Как добавить элементы в объект Row во время выполнения в Flutter?

Question

Самая удивительная часть Flutter - это то, что каждый виджет является объектом. Но когда я пытаюсь сделать объект из Row и добавить List виджетов к его дочерним элементам, я получаю эту ошибку во время выполнения:

Cannot add to an unmodifiable list

В настоящее время я создаю свой Row вот так:

Row rowStar = Row();
rowStar.children.addAll(rowChildren);

Это неправильно? Если да, то как правильно?

Answer 1

1. Почему это не сработает

Если все, что вам нужно, это добавить список в Row, вы должны создать список и затем инициализировать Row. Вы не можете добавить список позже, потому что виджеты Flutter обычно имеют final поля / свойства, которые нельзя изменить во время выполнения.

2. The Flutter Way

Однако, что вы можете сделать для динамического изменения списка, это передать функцию, которая строит ваш список во время выполнения. И это именно то, что делает ListView.builder() конструктор ListView.

Например, этот пример документа для динамического создания List из Container s на основе List s entries и colorCodes.

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      color: Colors.amber[colorCodes[index]],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  }
);

Вы можете добавить кнопку к .add, скажем, к буквам D и colorCode 400, к соответствующим List с, и Флаттер будет динамически отображать соответствующие Container с на экране.

Answer 2

Использование Listview:

ListView(
  children: rowStar((data) {
    return ListTile();
}).toList();

Answer 3

В моем случае я могу сделать Row из ранее созданного List<Widget>:

Row calculateListOfStars(ranking) {
  final List<Widget> rowList = [];

  rowList.addAll([
    // make my custom widget
  ]);

  final Row rowStars = Row(
    children: rowList,
  );

  return rowStars;
}

Answer 4

Я не уверен, правильно ли я понял, но то, что вы пытаетесь сделать, не имеет смысла. Если вы хотите повторно использовать Row с виджетами и информацией, вы можете просто создать его один раз и сохранить все как виджет.

Попробуйте это так:

1. Build a Row.
2. Создание виджетов для ваших детей.
3. Отображение их как виджетов строки.

Row(
  children: <Widget>[
    customWidget1(),
    customWidget2(),
    customWidget3(), 
  ],
)

Ваши пользовательские виджеты являются содержимым Row затем.

Надеюсь, это поможет.