web-dev-qa-db-fra.com

Comment ajouter dynamiquement aux enfants d'un widget Colonne dans Flutter

Flutter est un framework assez récent et en tant que tel, peu d'assistance sur les tâches simples est disponible. Ce que je demande spécifiquement, c'est comment ajouter des widgets Carte à un widget Colonne. Le code source est fourni ci-dessous pour aider à expliquer ce que je veux dire.

Disons que j'ai une fonction qui crée une nouvelle carte comme indiqué ci-dessous:

buildRow(barcode, letter, name, price) {
  return new Card(
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new ListTile(
          leading: new CircleAvatar(
            child: new Text(letter),
          ),
          title: new Text(name),
          subtitle: new Text("\$" + price),
          trailing: new Text(
            "x1",
            style: new TextStyle(color: Colors.lightBlue),
            textScaleFactor: 1.2,
          ),
        ),
      ],
    ),
  );
}
var snack = buildRow("091918229292", "C", "Crackers", "\$4.00");
var fruit = buildRow("091928229292", "P", "Pomegranate", "\$2.00");
var juice = buildRow("091948229292", "K", "Kiwi Juice", "\$20.00");

Et j'ai l'écran/la page suivante:

class Home extends StatefulWidget {
  @override
  HomePage createState() => new HomePage();
}

class HomePage extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[

    ]);
  }
}

Disons que tout le code fourni se trouve dans le même fichier. Comment ajouter des "collations", des "fruits" et des "jus" aux enfants du widget Colonne sur l'écran d'accueil?

androidoopwidgetflutter
6
Questionare232

Ok, j'ai résolu mon problème, j'ai créé une nouvelle liste comme ceci:

List<Widget> v = [];

et a fait cette liste des enfants du corps comme suit:

class HomePage extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return new Column(children: v);
  }
}

Après quoi j'ai créé une fonction à ajouter comme ceci:

buildRow(barcode, letter, name, price) {
  v.add(new Card(
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new ListTile(
          leading: new CircleAvatar(
            child: new Text(letter),
          ),
          title: new Text(name),
          subtitle: new Text("\$" + price),
          trailing: new Text(
            "x1",
            style: new TextStyle(color: Colors.lightBlue),
            textScaleFactor: 1.2,
          ),
        ),
      ], 
    ),
  ));
}

et enfin j'ai utilisé la fonction setState pour appliquer les modifications à l'écran.

1
Questionare232

Il s'agit d'un exemple de base si vous mettez à jour manuellement votre source.

      Column(
        children: _createChildren(),
      )

///////

Ceci est la méthode qui crée la liste des widgets que vous alimentez à votre colonne

  List<int> someList = [1, 2, 3, 4, 5];
  List<Widget> _createChildren() {
    return new List<Widget>.generate(someList.length, (int index) {
      return Text(someList[index].toString());
    });
  }

//////

Donc, lorsque vous mettez à jour votre liste, faites-le dans setState

  void _somethingHappens() {
    setState(() {
      someList.add(6);
    });
  }

Maintenant, si vous recevez vos données d'un flux, vous pouvez vérifier StreamBuilder, ou si elles proviennent d'un Future, vous pouvez utiliser FutureBuilder.

Cet exemple peut également être fait dans un Builder régulier

7
Tree

Vous devriez pouvoir faire quelque chose comme ceci:

class HomePage extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[
       buildRow("091918229292", "C", "Crackers", "\$4.00"),
       buildRow("091928229292", "P", "Pomegranate", "\$2.00"),
       buildRow("091948229292", "K", "Kiwi Juice", "\$20.00"),
    ]);
  }
}

Si vous voulez vraiment garder les références que vous pouvez faire:

class HomePage extends State<Home> {
  var snack;
  var fruit;
  var juice;

  @override
  void initState() {
    super.initState();

    snack = buildRow("091918229292", "C", "Crackers", "\$4.00");
    fruit = buildRow("091928229292", "P", "Pomegranate", "\$2.00");
    juice = buildRow("091948229292", "K", "Kiwi Juice", "\$20.00");
  }

  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[
      snack, 
      fruit, 
      juice,
    ]);
  }
}
0
QuirijnGB