如何使整个页面可滚动？
Posted
技术标签:
【中文标题】如何使整个页面可滚动？【英文标题】：How can I make the whole page scrollable? 【发布时间】：2019-03-05 08:06:58 【问题描述】：我想让整个页面可滚动，即包含表单和 FirebaseAnimatedList 的父 Column 小部件，而不仅仅是可滚动的 FirebaseAnimatedList。
长期以来，我一直坚持这一点，并尝试了各种不同的小部件，但无法成功。 请帮忙。
Column(
children: <Widget>[
Flexible(
flex: 0,
child: Center(
child: Form(
key: formkey,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
ListTile(
leading: Icon(Icons.subject),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.subject = val,
validator: (val) => val == "" ? val : null,
),
),
ListTile(
leading: Icon(Icons.message),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.body = val,
validator: (val) => val == "" ? val : null,
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: FlatButton(
child: Text(
"POST",
style: TextStyle(color: Colors.white),
),
color: Colors.blueGrey,
onPressed: ()
handleSubmit();
,
),
),
],
),
),
),
),
Flexible(
child: FirebaseAnimatedList(
query: databaseReference,
itemBuilder: (_, DataSnapshot snapshot,
Animation<double> animation, int index)
return Card(
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.blueAccent,
),
title: Text(boardMessages[index].subject),
subtitle: Text(boardMessages[index].body),
),
);
,
),
),
],
),
使用 SingleChildScrollView，我可以通过按住表单小部件来滚动页面，但它不会通过按住 FirebaseAnimatedList 小部件来滚动。
LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints)
return SingleChildScrollView(
child: new ConstrainedBox(
constraints: new BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Container(
height: 180.0,
child: Center(
child: Form(
key: formkey,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
ListTile(
leading: Icon(Icons.subject),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.subject = val,
validator: (val) => val == "" ? val : null,
),
),
ListTile(
leading: Icon(Icons.message),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.body = val,
validator: (val) => val == "" ? val : null,
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: FlatButton(
child: Text(
"POST",
style: TextStyle(color: Colors.white),
),
color: Colors.blueGrey,
onPressed: ()
handleSubmit();
,
),
),
],
),
),
),
),
new Container(
height: 2000.0,
child: FirebaseAnimatedList(
query: databaseReference,
itemBuilder: (_, DataSnapshot snapshot,
Animation<double> animation, int index)
return Card(
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.blueAccent,
),
title: Text(boardMessages[index].subject),
subtitle: Text(boardMessages[index].body),
),
);
,
),
),
],
),
),
);
,
)
包含 FirebaseAnimatedList 的 Container 的高度应该是多少？
【问题讨论】：
SinglePageScrollView 可能是你想要的。或列表视图 同意@RémiRousselet，这是可能的两种简单方法。 @RémiRousselet 感谢您的快速回复。使用 SingleChildScrollView 我可以通过按住表单小部件来滚动页面，但它不会通过按住 FirebaseAnimatedList 小部件来滚动。 【参考方案1】：尝试将 Column() 更改为 ListView() 还尝试在 FirebaseAnimatedList 之外添加一个列表视图 容器（）
ListView(
children: <Widget>[
Flexible(
flex: 0,
child: Center(
child: Form(
key: formkey,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
ListTile(
leading: Icon(Icons.subject),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.subject = val,
validator: (val) => val == "" ? val : null,
),
),
ListTile(
leading: Icon(Icons.message),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.body = val,
validator: (val) => val == "" ? val : null,
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: FlatButton(
child: Text(
"POST",
style: TextStyle(color: Colors.white),
),
color: Colors.blueGrey,
onPressed: ()
handleSubmit();
,
),
),
],
),
),
),
),
Flexible(
child: FirebaseAnimatedList(
query: databaseReference,
itemBuilder: (_, DataSnapshot snapshot,
Animation<double> animation, int index)
return Card(
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.blueAccent,
),
title: Text(boardMessages[index].subject),
subtitle: Text(boardMessages[index].body),
),
);
,
),
),
],
),
【讨论】：
【参考方案2】：您希望整个页面可滚动，这意味着它需要将内容包装在ScollView(ListView) 中。
这将使scrollView(FirebaseAnimatedList) inside 成为另一个ScrollView(ListView)。 Flutter 无法自行处理此问题。我们必须向它提供更多信息。
选项：
提供内部滚动视图的高度。
Container(
height: 500.0, //some constant value
child: FirebaseAnimatedList(...))
按住 FirebaseAnimatedList 小部件不会滚动。
使innerScollView 不可滚动。
FirebaseAnimatedList(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: ...)
它通过按住 FirebaseAnimatedList 小部件来滚动。 注意：但它会加载列表中的所有元素（假设您有 200 个项目，无论项目是否可见，它都会加载所有 200 个项目）。
【讨论】：
这行得通，但 FirebaseAnimatedList 每个项目的高度不固定。如果它是固定的，我会以这种方式给容器高度：Container( height: boardMessages.length * Some_constant_value , child: FirebaseAnimatedList(...)) 但它不是固定的。
如果你想要boardMessages.length * some_constant_value，选项二就可以了。
为了完成这项工作，我必须将这两个选项结合起来。这就是我的代码的样子：Container( height: boardMessages.length * 80.0, child: FirebaseAnimatedList( shrinkWrap: true, physics: NeverScrollableScrollPhysics(), query: databaseReference, itemBuilder:
如果你没有将 FirebaseAnimatedList 包裹在 Container 内，会发生什么？【参考方案3】：
您可以在 ListView 中添加 FirebaseAnimatedList 和其他项目，如下所示：
ListView(
shrinkWrap: true,
children: <Widget>[
_buildCard(),
FirebaseAnimatedList(...),
]);
你也应该禁用 FirebaseAnimatedList 滚动
FirebaseAnimatedList(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true, ...)
【讨论】：
以上是关于如何使整个页面可滚动？的主要内容，如果未能解决你的问题，请参考以下文章