Flutter 将堆栈中的对象放在该堆栈外的容器顶部

Question

长话短说，我有一个堆栈，其中有一张图像位于堆栈之外。

body: Column(
        children: [
          Stack(
            clipBehavior: Clip.none,
            alignment: Alignment.center,
            children: [
              _positionedImage(),
            ],
          ),
          _bodyContainer(),
        ],

容器：

Widget _bodyContainer() {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 200,
      decoration:  BoxDecoration(
        color: itsyBackground,
        borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
        boxShadow: [BoxShadow(offset: Offset(0, 0), color: Colors.green, spreadRadius: 1, blurRadius: 1),],
      ),

        );
  }

我怎样才能使图片位于容器顶部？

Answer 1

您在这里使用的方法是错误的。您在这里不需要专栏。您可以简单地呈现一个堆栈，最底部的小部件应该首先放置在堆栈子项中。

https://medium.com/flutter-community/a-deep-dive-into-stack-in-flutter-3264619b3a77

一个例子：

Stack(
        clipBehavior: Clip.none,
        alignment: Alignment.center,
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20),
                  topRight: Radius.circular(20)),
              boxShadow: [
                BoxShadow(
                    offset: Offset(0, 0),
                    color: Colors.green,
                    spreadRadius: 1,
                    blurRadius: 1),
              ],
            ),
          ),
          Positioned(
            top: -10,
            child: Image.network(
              'https://static.toiimg.com/thumb/msid-31346158,width-748,height- 
      499,resizemode=4,imgsize-114461/.jpg',
              width: 100,
            ),
          ),
        ],
      ),

Flutter 将堆栈中的对象放在该堆栈外的容器顶部

Flutter place an object from a stack on top of container outside that stack

stack

containers

clip

flutter