web-dev-qa-db-fra.com

Liste de la liste horizontale dans Flutter

J'ai suivi cela tutoriel et mis en œuvre une liste de défilement horizontal. Maintenant, ce que je voudrais faire, c'est créer une liste verticale où chaque ligne est une liste horizontale.

J'ai essayé différentes approches, mais je continue de penser qu'il devrait être possible de simplement définir la liste horizontale en tant qu'enfant de la verticale, mais cela ne fonctionne pas.

Mon code est:

Widget build(BuildContext context) {
return new Scaffold(

  body: Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 160.0,
      child: ListView(
        children: <Widget>[
          Text("First line"),
          HorizontalList(),
          Text("Second line"),
          HorizontalList()
        ],
      )
  ),

  drawer: new MyNavigationDrawer(),
);

}

J'ai également essayé de mettre les différentes listes horizontales dans ListTiles mais le résultat est le même.

androidiosdartflutter
6
Andrea Grippi

Je suppose que ce que vous voulez, c'est une liste dans une autre liste Voici l'adaptation de l'exemple de programme que vous avez suivi La méthode de construction est comme:

 Widget build(BuildContext context) {
    Widget horizontalList1 = new Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 200.0,
      child: new ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(width: 160.0, color: Colors.red,),
        Container(width: 160.0, color: Colors.orange,),
        Container(width: 160.0, color: Colors.pink,),
        Container(width: 160.0, color: Colors.yellow,),
      ],
    )
    );
    Widget horizontalList2 = new Container(
        margin: EdgeInsets.symmetric(vertical: 20.0),
        height: 200.0,
        child: new ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(width: 160.0, color: Colors.blue,),
        Container(width: 160.0, color: Colors.green,),
        Container(width: 160.0, color: Colors.cyan,),
        Container(width: 160.0, color: Colors.black,),
      ],
    )
    );
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Container(
          child: ListView(
            scrollDirection: Axis.vertical,
            children: <Widget>[
              horizontalList1,
              horizontalList2,
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

Le résultat est comme:

enter image description here

J'espère que ça aide

10
Dhaval Shah