问题描述
我正在开发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}
});
,
我明白了。正确的方法是使用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中了解有关此解决方案的更多信息和其他详细信息。