Question

我有一个简单的2个小部件是Stack，我需要在第一个小部件的末尾显示第二个小部件

类似这样的东西

这是我的代码

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,
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30), topLeft: Radius.circular(30)),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                child: Column(
                  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(),
                  ],
                ),
              ),
            ),
          )



        ],
      ),

在此代码中，第二个小部件与第一个小部件重叠并覆盖整个屏幕。我只需要显示它和第一个小部件的结尾

Answer 1

您要查找的小部件是Positioned。

您的使用方式类似

Stack(
   children: [
       //Behind container, fill screen (can also use Positioned.fill)
       Positioned(top:0, left: 0, right: 0, bottom: 0, child: Container()), 

       //Front most container, aligned bottom, full width
       Positioned(left: 0, right: 0, bottom: 0, child: Container()), 
   ]
)

Answer 2

您做得正确，但是由于“列”小部件的大小，您得到了想要的输出。

您可以将mainAxisSize设置为MainAxisSize.min，这样它将仅占用该小部件所需的空间。

 child: Column(
       mainAxisSize: MainAxisSize.min,   // added line
       children: <Widget>[

如果窗口小部件的尺寸很大，然后又希望得到相同的行为，则可以将高度赋予容器，并用 SingleChildScrollView 包裹列。

Answer 3

 Column(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      Container(
        height: 200,
        width: double.infinity,
        child: Text("Text"),
      ),
      Container(
        height: MediaQuery.of(context).size.height * 0.7,
        decoration: BoxDecoration(
            color: primaryColor,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(35),
                topRight: Radius.circular(35))),
      ),
    ],
  ),

<块引用>

将 Column 的 MainAxisAlignment 设置为 MainAxisAlignment.end 将容器推到底部并给了我想要的结果。

颤振如何在具有堆栈的其他容器上设置容器

3 个答案: