【问题标题】:stack an image in two widgets (flutter)在两个小部件中堆叠图像(颤动)
【发布时间】:2020-04-01 18:57:24
【问题描述】:

我的目标是像这样创作

我希望我的图像显示在白色大容器和背景中

我试过这样做

        Stack(
          overflow: Overflow.clip,
          alignment: AlignmentDirectional.topCenter,
          fit: StackFit.loose,
          children: <Widget>[


            Container(
              height: 458.4,
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20),
                    topRight: Radius.circular(20)
                )
              ),
            ),

            GFAvatar(
              backgroundImage:AssetImage(url),
              shape: GFAvatarShape.standard,
              radius: 70,
              borderRadius: BorderRadius.circular(20),
            )
          ],
        ),
]

不工作只能堆在容器里

【问题讨论】:

    标签: image flutter dart background stack


    【解决方案1】:

    尝试在Stack 中使用Positioned 并使Overflow.visible 溢出

    Stack(
                overflow: Overflow.visible,
                alignment: AlignmentDirectional.topCenter,
                fit: StackFit.loose,
                children: <Widget>[
                  Container(
                    height: 400.4,
                    width: double.infinity,
                    decoration: BoxDecoration(
                        color: Colors.amberAccent,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(20),
                            topRight: Radius.circular(20))),
                  ),
                  Positioned(
                    top: -50,
                    child: CircleAvatar(
                      radius: 50,
                      backgroundImage:
                          NetworkImage('https://picsum.photos/250?image=2'),
                    ),
                  )
                ],
              )
    

    【讨论】:

      猜你喜欢
      • 2018-09-05
      • 2021-05-23
      • 2020-11-11
      • 2020-10-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-09-25
      • 1970-01-01
      相关资源
      最近更新 更多