如何使整个页面可滚动？答案

【问题标题】：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 小部件来滚动。

标签： widget flutter flutter-layout

【解决方案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, ...)

【讨论】：