Как динамически добавлять дочерние элементы виджета «Столбец» во Flutter

Question

Flutter - сравнительно недавний фреймворк, и поэтому не так много помощи в простых задачах.Что конкретно я спрашиваю, так это как добавить виджеты карты в виджет «Столбец».Ниже приведен исходный код, помогающий объяснить, что я имею в виду.

Допустим, у меня есть функция, которая создает новую карту, как показано ниже:

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");

И у меня есть следующий экран /page:

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

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

    ]);
  }
}

Допустим, что весь предоставленный код находится в одном файле.Как добавить «закуски», «фрукты» и «сок» в дочерние элементы виджета «Столбец» на главном экране?

Answer 1

Это базовый пример, если вы вручную обновляете свой источник.

      Column(
        children: _createChildren(),
      )

///////

Это метод, который создает список виджетов, которым вы кормитеваш столб

  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());
    });
  }

//////

Итак, когда вы обновляете свой список, сделайте это в setState

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

Теперь, если вы получитеваши данные из потока, вы можете проверить StreamBuilder, или, если они получены от Future, вы можете использовать FutureBuilder.

Этот пример может быть сделан также в обычном Builder

Answer 2

Хорошо, я решил свою проблему, я создал новый список примерно так:

List<Widget> v = [];

и создал этот список детей тела следующим образом:

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

После этого я создал функцию для добавления следующим образом:

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,
          ),
        ),
      ], 
    ),
  ));
}

и, наконец, я использовал функцию setState, чтобы применить изменения к экрану.

Answer 3

Вы должны быть в состоянии сделать что-то вроде этого:

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"),
    ]);
  }
} 

Если вы действительно хотите сохранить ссылки, вы можете сделать:

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,
    ]);
  }
}