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

问题描述

我正在开发Flutter应用程序,并且希望将我的按钮始终保持在屏幕底部,除非它顶部的高度足以使屏幕滚动。例子:

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

Example B(按钮顶部的高度足以滚动屏幕,因此按钮将离开屏幕并允许屏幕滚动)

所以总结:当列表的其余部分短于设备高度时,应强制按钮停留在屏幕底部,但是如果列表高度大于设备高度,则按钮应正常工作并保持在列表下方。

我尝试过的事情:

  • 使用ListView,该列表通常会在必要时滚动,但是我找不到将按钮发送到屏幕底部方法
  • 使用列。在Spacer的帮助下,我可以将按钮转到屏幕的底部,但是“列”将不会滚动,如果我添加SingleChildScrollView来进行包装,则Spacer将不再起作用,因为SingleChildScrollView可能具有无限的高度;

谢谢。

解决方法

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}
  });
,

我明白了。正确的方法是使用LayoutBuilderConstrainedBoxIntrinsicHeightExpanded,如下所示:

(在此示例中,_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中了解有关此解决方案的更多信息和其他详细信息。