Как добавить ListView в колонку в Flutter?

Я пытаюсь создать простую страницу входа для своего приложения Flutter. Я успешно создал кнопки TextFields и Login/Signin. Я хочу добавить горизонтальный ListView. Когда я запускаю код, мои элементы исчезают, если я делаю это без ListView, он снова прекрасен. Как я могу сделать это правильно?

return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("Login / Signup"),
          ),
          body: new Container(
            child: new Center(
              child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new TextField(
                    decoration: new InputDecoration(
                      hintText: "E M A I L    A D D R E S S"
                    ),
                  ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(obscureText: true,
                    decoration: new InputDecoration(
                      hintText: "P A S S W O R D"
                    ),
                    ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(decoration: new InputDecoration(
                    hintText: "U S E R N A M E"
                  ),),
                  new RaisedButton(onPressed: null,
                  child:  new Text("SIGNUP"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new RaisedButton(onPressed: null,
                  child: new Text("LOGIN"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new ListView(scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    new RaisedButton(onPressed: null,
                    child: new Text("Facebook"),),
                    new Padding(padding: new EdgeInsets.all(5.00)),
                    new RaisedButton(onPressed: null,
                    child: new Text("Google"),)
                  ],)

                ],
              ),
            ),
            margin: new EdgeInsets.all(15.00),
          ),
        ),
      );

Ответы

Ответ 1

Вы можете проверить вывод консоли. Он печатает ошибку:

Следующее утверждение было брошено во время выполненияResize(): горизонтальное окно просмотра было задано неограниченной высотой. Видовые экраны расширяются на поперечной оси, чтобы заполнить их контейнер и ограничить их детей, чтобы они соответствовали их протяженности по оси. В этом случае горизонтальному видовому пространству было предоставлено неограниченное количество вертикального пространства для расширения.

Вам нужно добавить ограничение высоты в свой горизонтальный список. Например, упаковка в контейнере с высотой:

new Container(
  height: 44.0,
  child: new ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      new RaisedButton(
        onPressed: null,
        child: new Text("Facebook"),
      ),
      new Padding(padding: new EdgeInsets.all(5.00)),
      new RaisedButton(
        onPressed: null,
        child: new Text("Google"),
      )
    ],
  ),
)

Ответ 2

У меня тоже есть эта проблема. Мое решение - использовать Expanded виджет, чтобы расширить оставшееся пространство.

new Column(
  children: <Widget>[
    new Expanded(
      child: horizontalList,
    )
  ],
);

Ответ 3

Причина ошибки:

Column расширяется до максимального размера в направлении главной оси (вертикальная ось), как и ListView.

Решения

Итак, вам нужно ограничить высоту ListView. Есть много способов ее решения, вы можете выбрать то, что лучше всего соответствует вашим потребностям.

Если вы хотите, чтобы ListView занимал все левое пространство внутри Column используйте Expanded.
```
Column(
  children: <Widget>[
    Expanded(
      child: ListView(...),
    )
  ],
)
```

Если вы хотите ограничить свой ListView определенной height, вы можете использовать SizedBox.
```
Column(
  children: <Widget>[
    SizedBox(
      height: 200, // constrain height
      child: ListView(),
    )
  ],
)
```

Если ваш ListView маленький, вы можете попробовать свойство shrinkWrap на нем.
```
Column(
  children: <Widget>[
    ListView(
      shrinkWrap: true, // use it
    )
  ],
)
```