我想创建一个视图,它必须有一个带有滚动视图的Column
(例如,类似SingleChildScrollView
的东西)和一个页脚,而不管屏幕大小。如果屏幕足够大,它将使用滚动和页脚之间的空白空间,如果不是,它将扩展并仅使页脚上方的小部件可滚动。
它或多或少像Listview with scrolling Footer at the bottom,但有一个区别,我希望键盘溢出页脚,它也应该留在原地。
就像
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(left: 30.0, right: 30.0, top: 80.0),
child: Form(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// Multiple widgets and form fields
],
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 50.0),
child: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// Footer widgets
],
),
),
)
],
),
);
7条答案
按热度按时间5w9g7ksd1#
对于那些希望以简单的方式实现just footer with scrollview的人,下面的代码可能会有所帮助:
视觉表现:-
我在这里使用了
expanded
和SinglechildScrollView
ruarlubt2#
尽管Rémi的答案是正确的,但我实际上找到了一种更简单的方法来实现我所寻找的东西,只需将
LayoutBuilder
与IntrinsicHeight
结合起来。ztigrdn83#
在许多情况下,公认的解决方案都是有效的,但是当你想使用ListView之类的东西时,它就变得很棘手了,因为它不能提供固有的高度。我试图找到一些不同的解决方案,结果证明我可以,而且它似乎更灵活。我设法使用slivers解决了这种情况。其中内容在一个sliver中,页脚也在一个sliver中。
提示:观看“无聊的Flutter发展显示,第12集”,这是所有关于条子。
igsr9ssn4#
我解决这个问题的方法是将固定的
Footer
和TheSingleChildScrollView
Package 在Stack
小部件中,然后相应地对齐Footer
。vnjpjtjt5#
困难在于
Column
和SingleChildScrollView
很难一起工作,因为一个需要约束,另一个删除了它们。诀窍是使用
CustomMultiChildLayout
并自己进行计算。在MediaQuery
的帮助下获得键盘的大小,以便页脚可以消失,为内容留下更多空间。这里有一个可重复使用的小部件,可以为您做到这一点:
按如下方式使用:
carvr3hs6#
虽然公认的答案似乎适用于移动的设备,但当宽度(远)大于高度时就会出现问题。当这种情况发生时,
IntrinsicHeight
就像AspectRatio
一样,高度增加,所以页脚被推离屏幕。我认为问题在于
IntrinsicHeight
对其内部工作的定义:......而是将自身调整到更合理的高度。
我可以确认@Rémi的解决方案在这些情况下也有效。
它应该成为Flutter框架提供的标准小部件。
58wvjzkj7#
要创建一个具有可滚动屏幕的页脚,我们可以使用ListView.builder和SingleChildScrollview的堆栈小部件: