Question

我有2个小部件，我需要在堆栈小部件中显示它

我的代码是这个

child: Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: statusBarHeight * 0.8),
            height: height * 0.4,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                  'assets/images/place2.jpg',
                ),
                fit: BoxFit.fill,
              ),
            ),
          ),
          ClipRRect(
            borderRadius: BorderRadius.only(
                topRight: Radius.circular(30), topLeft: Radius.circular(30)),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  SizedBox(
                    height: height * 0.03,
                  ),
                  Container(
                    height: height * 0.01,
                    width: width * 0.1,
                    color: Colors.pink,
                  ),
                  SizedBox(
                    height: height * 0.031,
                  ),
                  Container(
                    width: width,
                    margin: EdgeInsets.only(left: 10),
                    child: Text(
                      'PLACES',
                      textAlign: TextAlign.left,
                      style: TextStyle(fontSize: 30),
                    ),
                  ),
                  SizedBox(
                    height: height * 0.02,
                  ),
                  Places(),
                  Places(),
                  Places(),
                  Places(),
                  Places(),
                ],
              ),
            ),
          )



        ],
      ),

在代码中，我在堆栈小部件中有2个小部件Container和ClipRRect，但它没有给我预期的输出，它在整个屏幕上只显示了第二个小部件ClipRRect，而我认为容器位于该小部件的后面。

如果我用align包装ClipRRect小部件并设置alignment: Alignment.bottomCenter,，使其显示此输出

不知道为什么两个小部件都相互重叠

Answer 1

堆栈小部件按顺序添加东西，它先添加您的容器，然后再添加其他小部件，我的问题是您的第二个小部件具有整个屏幕高度的大小并覆盖了其他小部件，因此您可以为其设置高度并将其底部居中对齐，以便可以根据需要显示容器。

下面的代码可以给我一个希望。

带有填充的已编辑答案，并在第一个小部件上滚动：

 Stack(
      children: <Widget>[
        Container(
          height: height * 0.4,
          child: Placeholder(),
          ),
        SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.only(top: height * 0.4),
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30), topLeft: Radius.circular(30)),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    SizedBox(
                      height: height * 0.03,
                    ),
                    Container(
                      height: height * 0.01,
                      width: width * 0.1,
                      color: Colors.pink,
                    ),
                    SizedBox(
                      height: height * 0.031,
                    ),
                    Container(
                      width: width,
                      margin: EdgeInsets.only(left: 10),
                      child: Text(
                        'PLACES',
                        textAlign: TextAlign.left,
                        style: TextStyle(fontSize: 30),
                      ),
                    ),
                    SizedBox(
                      height: height * 0.02,
                    ),
                    Placeholder(fallbackHeight: 140, fallbackWidth: width,),
                    Placeholder(fallbackHeight: 140, fallbackWidth: width,),
                    Placeholder(fallbackHeight: 140, fallbackWidth: width,),
                    Placeholder(fallbackHeight: 140, fallbackWidth: width,),
                    Placeholder(fallbackHeight: 140, fallbackWidth: width,),
                  ],
                ),
              ),
            ),
          ),
        )
      ],
    ),

如果需要，您可以在ClipRRect上将SingleChildScrollView的位置更改为Padding，这取决于您的选择。

Flutter在Stack小部件中显示2小部件

1 个答案: