Прокручиваемый домашний экран во Flutter

Question

Интересно, почему это не работает. Может, мне и помогут, думаю, это небольшая ошибка. Я хотел бы иметь возможность прокручивать весь экран. Контейнер с виджетом «CompanyCard» можно прокручивать по вертикали.

return Column(
      children: <Widget>[
        SearchBox(),
        Expanded(
          child: Stack(
            children: <Widget>[
              Container(
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: companies.length,
                  itemBuilder: (context, index) => CompanyCard(),
                ),
              ),
            ],
          ),
        ),
        SearchBox(),
        SearchBox(),
        SearchBox(),
      ],
    );

по горизонтали : Facebook, Google Twitter ( уже работает ) по вертикали : весь экран ( не работает )

Answer 1

Оберните SingleChildScrollView виджетами, которые вы хотите прокручивать

    return Column(
      children: <Widget>[
        SearchBox(),
        SingleChildScrollView(
          child: Expanded(
            child: Stack(
              children: <Widget>[
                Container(
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: companies.length,
                    itemBuilder: (context, index) => CompanyCard(),
                  ),
                ),
              ],
            ),
          ),
        ),
        SearchBox(),
        SearchBox(),
        SearchBox(),
      ],
    );

Новое редактирование: чтобы сделать всю страницу прокручиваемой, оберните страницу в SingleChildScrollView:

Полный код:

 return Container(
              child: SingleChildScrollView(
                child: Expanded(
                  child: Column(
                    children: <Widget>[
                      SearchBox(),
                      SingleChildScrollView(
                        child: Expanded(
                          child: Stack(
                            children: <Widget>[
                              Container(
                                child: ListView.builder(
                                  scrollDirection: Axis.horizontal,
                                  itemCount: companies.length,
                                  itemBuilder: (context, index) =>
                                      CompanyCard(),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      SearchBox(),
                      SearchBox(),
                      SearchBox(),
                    ],
                  ),
                ),
              ),
            );

Answer 2

Я думаю, что ListView в столбце требует высоты. Я обернул ListView контейнером и дал некоторую высоту.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Home page"),
        elevation: 5.0,
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: <Widget>[
              SizedBox(child: Text('asdf')),
              Container(
                height: 500,
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: 3,
                  itemBuilder: (context, index) =>
                      SizedBox(width: 200, child: Text('aaa')),
                ),
              ),
              SizedBox(child: Text('asdf')),
              SizedBox(child: Text('asdf')),
              SizedBox(child: Text('asdf')),
            ],
          ),
        ),
      ),
    );
  }

Answer 3

Вам необходимо указать явную высоту для вашего списка. По умолчанию представление списка имеет бесконечную высоту / ширину.

Чтобы иметь возможность прокручивать весь экран, вам нужно обернуть свой виджет root внутри SingleChildScrollView, а затем указать высоту для контейнера представления списка. Примерно так: -

body : SingleChildScrollView(child :... 
 ... Other widgets... 
  Container (
    height :200,
    width :MediaQuery.of(context).size.width, // so that ListView occupies the entire width
child : ListView.builder(...