¿Cómo agregar un ListView a una columna en Flutter?

Resuelto Charles Jr asked hace 7 años • 20 respuestas

Estoy intentando crear una página de inicio de sesión sencilla para mi aplicación Flutter. He creado con éxito TextFields y los botones de iniciar sesión/Iniciar sesión. Quiero agregar un ListView horizontal. Cuando ejecuto el código, mis elementos desaparecen, si lo hago sin ListView, vuelve a estar bien. ¿Cómo puedo hacer esto correctamente?

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),
          ),
        ),
      );
Charles Jr avatar Aug 14 '17 14:08 Charles Jr
Aceptado

Yo también tengo este problema. Mi solución es usar Expandedun widget para expandir el espacio restante.

Column(
  children: <Widget>[
    Expanded(
      child: horizontalList,
    )
  ],
);
up2up avatar Mar 27 '2018 07:03 up2up

Motivo del error:

Columnse expande al tamaño máximo en la dirección del eje principal (eje vertical), al igual que el archivo ListView.

Soluciones:

Por lo tanto, es necesario limitar la altura del archivo ListView. Hay muchas formas de hacerlo, puedes elegir la que mejor se adapte a tu necesidad.


  1. Si desea permitir ListViewque ocupe todo el espacio restante en el interior Column, utilice Expanded.

    Column(
      children: <Widget>[
        Expanded( //        <-- Use Expanded 
          child: ListView(...),
        )
      ],
    )
    

  1. Si desea limitar su ListViewa un determinado height, utilice SizedBox.

    Column(
      children: <Widget>[
        SizedBox(
          height: 200, // Constrain height.
          child: ListView(...),
        )
      ],
    )
    

  1. Si ListViewes pequeño, puede probar shrinkWrapuna propiedad en él.

    Column(
      children: <Widget>[
        ListView(
          shrinkWrap: true, // Set this
        )
      ],
    )
    

  1. Si quieres hacerlo ListViewlo más pequeño posible, úsalo Flexiblecon ListView.shrinkWrap:

    Column(
      children: <Widget>[
        Flexible( //        <-- Use Flexible 
          child: ListView(
            shrinkWrap: true, // and set this
          ),
        )
      ],
    )
    
CopsOnRoad avatar Jul 21 '2019 10:07 CopsOnRoad

Puede comprobar la salida de la consola. Imprime error:

Se lanzó la siguiente afirmación durante performResize(): A la ventana gráfica horizontal se le dio una altura ilimitada. Las ventanas gráficas se expanden en el eje transversal para llenar su contenedor y restringen a sus hijos para que coincidan con su extensión en el eje transversal. En este caso, a una ventana gráfica horizontal se le dio una cantidad ilimitada de espacio vertical para expandirse.

Debe agregar una restricción de altura a su lista horizontal. Por ejemplo, envolver en SizedBox con altura:

SizedBox(
  height: 44.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      RaisedButton(
        onPressed: null,
        child: Text("Facebook"),
      ),
      Padding(padding: EdgeInsets.all(5.00)),
      RaisedButton(
        onPressed: null,
        child: Text("Google"),
      )
    ],
  ),
)
German Saprykin avatar Aug 14 '2017 08:08 German Saprykin