Перейти к основному содержимому

Генерация динамических дочерних элементов

Виджеты, способные обрабатывать несколько дочерних виджетов, имеют дополнительную функцию под названием Generate Dynamic Children, которая помогает генерировать несколько дочерних виджетов из переменной List.

Это особенно полезно, когда вы получаете данные из вызова API, запроса Firebase или переменной State, содержащей список элементов.

Некоторые из виджетов, которые могут обрабатывать несколько дочерних элементов, включают Column, Row, Stack, ListView, GridView и PageView.

В следующем примере мы используем переменную AppState под названием categoryList, которая содержит список категорий продуктов, и установим эту переменную для виджета categoryList, который является ListView.

примечание

В демонстрационном приложении у нас есть предопределённые пользовательские DataTypes. Один из таких типов данных — "Category", который включает поля categoryImg и categoryName. В состоянии приложения (App State) переменная categoryList представляет собой List<Category>, содержащую несколько объектов Category. Мы используем эту переменную списка в качестве источника значения для виджета ListView.

Значение хранится в переменной (в этом примере — allCategoriesList) и может использоваться для заполнения любого прокручиваемого представления. В нашем примере мы заполняем виджет ListView, который создаёт несколько экземпляров, каждый из которых содержит Column с круглым Container и Text.

Что такое экземпляры?

Узнайте о Instances и о том, чем они отличаются от Classes, в этом документе.

Чтобы внести изменения, вам нужно изменить только первый дочерний элемент и установить источники переменных для первых дочерних виджетов. Эти изменения будут применены ко всем дочерним виджетам в ListView. Количество дочерних элементов будет соответствовать длине переменной списка, если вы не установили ограничение в опции Max Items на вкладке Generating Dynamic Children.

Давайте посмотрим короткую демонстрацию установки источника переменной для первых дочерних виджетов: