Как я могу сделать всю страницу прокручиваемой?

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

Вы хотите, чтобы вся страница была прокручиваемой , что означает, что необходимо обернуть содержимое внутри ScollView(ListView).

Что сделает наличие scrollView(FirebaseAnimatedList) внутри другого ScrollView(ListView).Флаттер не может справиться с этим самостоятельно.Мы должны дать ему больше информации.

Опции:

1. Укажите высоту для внутреннего scrollView.

   Container(
      height: 500.0, //some constant value
      child: FirebaseAnimatedList(...))
   

   Он не прокручивается при удержании виджета FirebaseAnimatedList.

2. Сделать innerScollView не прокручиваемым.

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

1032 * выполняет прокрутку, удерживая виджет FirebaseAnimatedList. Примечание: Но он загрузит все элементы в списке (скажем, у вас есть 200 элементов, он загрузит все 200 элементов, независимо от того, видим элемент или нет).

Answer 2

Вы можете добавить FirebaseAnimatedList и другие элементы в ListView, как показано ниже:

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

Вы также должны отключить прокрутку FirebaseAnimatedList

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

Answer 3

Попробуйте изменить 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),
          ),
        );
      },
    ),
  ),
],
),