保持按钮固定在屏幕底部，但仅当上述列表高度小于设备高度时答案

【问题标题】：Keep button fixed in the bottom of screen, but only when the above list height is shorter than the device height保持按钮固定在屏幕底部，但仅当上述列表高度小于设备高度时
【发布时间】：2020-08-13 19:20:10
【问题描述】：

我正在开发一个 Flutter 应用程序，并希望我的按钮始终位于屏幕底部，除非顶部的按钮足够高以使屏幕滚动。例子：

Example A（按钮顶部的高度不足以滚动屏幕）

Example B（按钮顶部的高度足以滚动屏幕，因此按钮将离开屏幕并允许屏幕滚动）

总结一下：当列表的其余部分小于设备高度时，按钮应该被强制停留在屏幕底部，但是如果列表高度大于设备高度，则按钮应该正常运行并停留在列表下方。

我尝试了什么：

使用 ListView，如果需要，它通常会滚动，但我找不到将按钮发送到屏幕底部的方法；
使用列。在Spacer 的帮助下，我可以使按钮转到屏幕底部，但列不会滚动，如果我添加SingleChildScrollView 来包装它，Spacer 将不再起作用，因为 SingleChildScrollView具有无限高度的潜力；

谢谢。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

Stack(
 children:[
        //Use list widget,
     yourList.length<7?  Postioned(
       bottom :10,                margin from bottom
      child: //button widget):Container()
 ])

In listbuilder 

ListView.builder( 
        physics: ScrollPhysics(),
        itemCount: yourList+1,
        itemBuilder: (BuildContext ctxt, int index) {
          if (index== yourList.length) {    
           return  yourList.length >7?  //your button widget:Container();
           } else {
           return //list item}
  });

【讨论】：

如果列表可滚动，他希望按钮离开屏幕。
不是“当我们滚动时”。当列表长到可以滚动时。
根据您的列表项高度更改项数条件
查看问题中的图片。该按钮是可见的，但它有点不在屏幕上。

【解决方案2】：

我明白了。正确的做法是使用LayoutBuilder、ConstrainedBox、IntrinsicHeight 和Expanded，像这样：

（在本例中，_widgets 是我希望它位于顶部的小部件列表。_buttons 是我希望位于底部的按钮列表）

return Scaffold(
      appBar: buildAppBar(),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: viewportConstraints.maxHeight,
              ),
              child: IntrinsicHeight(
                child: Column(
                  children: <Widget>[
                    Expanded(
                      child: Column(
                        children: _widgets,
                      ),
                    ),
                    Column(
                      children: _buttons,
                    )
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );

文档说要避免这种情况，因为它可能很昂贵。您可以在documentation 中阅读有关此解决方案的更多信息和其他详细信息。

【讨论】：