Flutter将底部边距添加到Stack

mrphzbgm  于 2022-11-25  发布在  Flutter
关注(0)|答案(3)|浏览(212)

我正在尝试将Stack向下扩展一点,以便为“All Catched up”文本创建空间。
下面是我的代码;
第一个

当我执行以下操作时,

return Stack(
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 30),
          child: buildListView(scrollController),
        ),
        buildBackToTop(scrollController, backtoTop),
        buildBottomReached(isLastIndex),
      ],
    );

这是所期望的,但是它总是在底部添加空白,
第一次
有办法做到这一点吗?

b0zn9rqh

b0zn9rqh1#

另一个有效的解决方案是将Stack扩展到屏幕大小,然后将小部件与Align小部件对齐,如下所示:

final mq = MediaQuery.of(context);
return ConstrainedBox(
  constraints: BoxConstraints(
    maxHeight: mq.size.height,
    minHeight: mq.size.height,
    maxWidth: mq.size.width,
    minWidth: mq.size.width,
  ),
  child: Stack(
    fit: StackFit.expand,
    children: [
      buildListView(scrollController),
      Align(
        alignment: Alignment.bottomCenter,
        child: buildBackToTop(scrollController, backtoTop),
      ),
      buildBottomReached(isLastIndex),
    ],
  ),
);
3okqufwl

3okqufwl2#

根据您的UI。尝试Column小部件,而不是Stack

return Column(
        children: [
          Expaneded(child: buildListView(scrollController)),
          buildBackToTop(scrollController, backtoTop),
          buildBottomReached(isLastIndex),
        ],
      );

如果需要叠加,请通过将listView和Text与Column组合使用Stack。
使用Positioned Package 小部件并添加bottom

return Stack(
        children: [
         .....
         Positioned(
           bottom: yourValue,
           child:
nr9pn0ug

nr9pn0ug3#

首先,用ListView小部件 Package Stack
然后,将buildBottomReached辅助对象作为Stack小部件的同级小部件移动

return ListView(//this
      children: [
        Stack(
          children: [
            buildListView(),
            buildBackToTop(backtoTop),
            //buildBottomReached(isLastIndex),//move this a sibling of the Stack
          ],
        ),
        buildBottomReached(isLastIndex),//moved here
      ],
    );

然后,在buildListView帮助器上,将shrinkWrapListView.builder属性设置为true

Widget buildListView(ScrollController scrollController) {
  return ListView.builder(
      shrinkWrap: true,//this
      controller: scrollController,
      itemCount: 50,
      itemBuilder: (context, index) {
        return SizedBox(
          width: 20,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 20,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                color: Colors.grey[100],
              ),
              child: Center(
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text("Index $index"),
                  ),
                ),
              ),
            ),
          ),
        );
      },
      physics: const BouncingScrollPhysics());
}

相关问题