Question

我希望使整个页面可滚动，而不是只滚动可滚动的FirebaseAnimatedList，即包括表单和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的容器的高度应该是多少？

Answer 1

尝试将Column（）更改为ListView（）也尝试在FirebaseAnimatedList的外部添加一个listview 容器（）

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

Answer 2

您希望整个页面可可滚动，这意味着它需要将内容包装在ScollView(ListView)中。

这将使scrollView(FirebaseAnimatedList)在另外一个ScrollView(ListView)的内部{strong> 。 Flutter无法自行处理。我们必须提供一些更多信息。

选项：

提供内部scrollView的高度。
```
Container(
   height: 500.0, //some constant value
   child: FirebaseAnimatedList(...))
```
通过按住FirebaseAnimatedList小部件无法滚动。

使innerScollView不可滚动。

FirebaseAnimatedList(
   shrinkWrap: true,
   physics: NeverScrollableScrollPhysics(),
   itemBuilder: ...)

按住FirebaseAnimatedList小部件进行滚动。注意：但是它将加载列表中的所有元素（假设您有200个项目，无论该项目是否可见，它都将加载所有200个项目）。

Answer 3

您可以在列表视图中添加FirebaseAnimatedList和其他项，如下所示：

ending_balance

您也应该禁用FirebaseAnimatedList滚动

ListView(
    shrinkWrap: true,
    children: <Widget>[
         _buildCard(),
         FirebaseAnimatedList(...),
]);

如何使整个页面可滚动？

3 个答案: