web-dev-qa-db-fra.com

Comment ajouter un ListView à une colonne dans Flutter?

J'essaie de créer une page de connexion simple pour mon application Flutter. J'ai construit avec succès les boutons TextFields et Login/Signin. Je veux ajouter un ListView horizontal. Lorsque je lance le code, mes éléments disparaissent, si je le fais sans ListView, tout va bien à nouveau. Comment puis-je faire cela correctement?

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),
          ),
        ),
      );
flutterdart
50
Charles Jr

Vous pouvez vérifier la sortie de la console. Il imprime une erreur:

L'assertion suivante a été émise lors de performResize (): La hauteur de la fenêtre de visualisation horizontale était illimitée. Les fenêtres s’étendent dans l’axe transversal pour remplir leur conteneur et contraignent leurs enfants à correspondre à leur étendue dans l’axe transversal. Dans ce cas, une fenêtre d'affichage horizontale disposait d'un espace vertical illimité pour se développer.

Vous devez ajouter une contrainte de hauteur à votre liste horizontale. Par exemple. wrap in Container avec hauteur:

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"),
      )
    ],
  ),
)
32
German Saprykin

J'ai aussi ce problème. Ma solution est d'utiliser le widget Expanded pour développer l'espace restant.

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

Raison de l'erreur:

Column étend la taille maximale dans la direction de l'axe principal (axe vertical), de même que ListView.

Solutions

Vous devez donc limiter la hauteur de ListView. Il existe de nombreuses façons de le faire, vous pouvez choisir celle qui correspond le mieux à vos besoins.

  1. Si vous souhaitez autoriser ListView à occuper tout l'espace restant à l'intérieur de Column, utilisez Expanded.

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

  1. Si vous voulez limiter votre ListView à certains height, vous pouvez utiliser SizedBox.

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

  1. Si votre ListView est petit, vous pouvez essayer la propriété shrinkWrap.

    Column(
  children: <Widget>[
    ListView(
      shrinkWrap: true, // use it
    )
  ],
)
12
CopsOnRoad