我可以在单身儿童滚动视图中添加半径按钮吗?

时间:2020-05-28 09:11:22

标签: flutter

我正在使用Stack小部件,其中有2个小部件,一个只是图像,另一个是Singlechildscrollview

我需要在屏幕的页脚上添加一个按钮并修复此问题(不可移动)。是否需要Singlechildscrollview滚动时将其固定在屏幕上,我需要固定此按钮。我不确定该怎么做,因为如果我退出Singlechildscrollview中的按钮,则只有在滚动时它才会显示。滚动或不显示按钮时,我需要修正。

这是我的代码:

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.05,
                      ),
                      Container(
                        width: width,
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Text(
                          'NYC Food Festival',
                          textAlign: TextAlign.left,
                          style: TextStyle(fontSize: 30),
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Row(
                          children: <Widget>[
                            Icon(
                              Icons.calendar_today,
                              size: 20,
                              color: Color(0xff808080),
                            ),
                            SizedBox(width: width * 0.02), // give it width
                            Column(
                              children: <Widget>[
                                Text(
                                  'Sat, May 25, 2020',
                                  style: TextStyle(
                                      color: Color(0xff000000),
                                      fontWeight: FontWeight.bold,
                                      fontSize: 15),
                                ),
                              ],
                            )
                          ],
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Row(
                          children: <Widget>[
                            Icon(
                              Icons.attach_money,
                              size: 20,
                              color: Color(0xff808080),
                            ),
                            SizedBox(width: width * 0.02), // give it width
                            Column(
                              children: <Widget>[
                                Text(
                                  '25,000 PKR',
                                  style: TextStyle(
                                      color: Color(0xff000000),
                                      fontWeight: FontWeight.bold,
                                      fontSize: 15),
                                ),
                              ],
                            )
                          ],
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                        width: width,
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Text(
                          'Snaps',
                          textAlign: TextAlign.left,
                          style: TextStyle(fontSize: 25),
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                          child: Column(
                            children: <Widget>[
                              CarouselSlider(
                                options: CarouselOptions(
                                  autoPlay: true,
                                  aspectRatio: 2.0,
                                  enlargeCenterPage: true,
                                ),
                                items: imageSliders,
                              ),
                            ],
                          )),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                        width: width,
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Text(
                          'About',
                          textAlign: TextAlign.left,
                          style: TextStyle(fontSize: 25),
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                          padding: EdgeInsets.only(
                              right: width * 0.03, left: width * 0.03),
                          child: DescriptionTextWidget(
                              text:
                                  "Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.")
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                        width: width,
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Text(
                          'Included',
                          textAlign: TextAlign.left,
                          style: TextStyle(fontSize: 25),
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Included(),
                      SizedBox(
                        height: height * 0.01,
                      ),
                      Included(),
                      SizedBox(
                        height: height * 0.01,
                      ),
                      Included(),
                      SizedBox(
                        height: height * 0.01,
                      ),




                    ],
                  ),
                ),
              ),
            ),
          ),
        )
      ],
    )

以下是当前视图的输出:

enter image description here

这就是我想要的:

enter image description here

2 个答案:

答案 0 :(得分:1)

您可以相对轻松地实现这种外观。

这里是一个示例:

None

输出:

答案 1 :(得分:0)

是的,您可以将按钮添加到堆栈中,然后使用带有alignment.bottom_center的align小部件进行包装