首页 > 解决方案 > Flutter 如何创建 3 层堆栈

问题描述

我需要显示 3 个容器,但要显示一列,但需要显示它们重叠

像这样

在此处输入图像描述

正如您在图像中看到的,我需要显示 3 个小部件图像,然后这会创建一个新的帐户标题,而不是另一个容器。

我的代码只是显示一个图像和我需要知道的最后一个容器如何添加这个中间容器,就像在图像中一样

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,
                ),
              ),
            ),
            SingleChildScrollView(
              child: Padding(

                padding: EdgeInsets.only(top: height * 0.3),
                child: SingleChildScrollView(
                  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.031,
                          ),
                          Container(
                            width: width,
                            margin: EdgeInsets.only(left: 10),
                            child: Text(
                              'PLACES',
                              textAlign: TextAlign.left,
                              style: TextStyle(fontSize: 30),
                            ),
                          ),
                          SizedBox(
                            height: height * 0.02,
                          ),

                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
            GestureDetector(
              onTap: () {
                print('back');
              },
              child: Align(
                alignment: Alignment.topLeft,
                child: Container(
                  margin: EdgeInsets.only(left: width * 0.03),
                  padding: EdgeInsets.only(top: statusBarHeight * 2),

                  child: Icon(
                    Icons.arrow_back_ios,
                    size: 25,
                    color: Colors.white,
                  ),
                ),
              ),
            ),



          ],
        )

标签: flutter

解决方案


尝试使用“堆栈”小部件。它类似于列,但它的子项堆叠在一起。它在本周的 Flutter Widget 上的特色在这里阅读这里 的用法


推荐阅读