Пользовательский тип данных App State

Давайте посмотрим, как можно использовать пользовательские типы данных в переменной состояния приложения на примере. Приложение, в котором пользователи могут добавлять, обновлять и удалять продукты. Мы можем создать пользовательский тип данных под названием ‘product’, а затем переменную состояния приложения, которая будет хранить его список.

Вот как это выглядит после завершения работы:

Ниже приведены шаги для создания такого примера:

1. Создание переменной состояния приложения с пользовательским типом данных
2. Отображение списка товаров
3. Добавить продукт
4. Обновить товар
5. Удалить продукт

Сначала создайте пользовательский тип данных с именем ‘product’, а затем создайте переменную состояния приложения с именем ‘products’ и пометьте ее как ‘Is List’, чтобы она могла хранить список ‘product’.
Вот как ее создать:

Вы также можете заполнить значения для пользовательских типов данных непосредственно в переменной состояния приложения.

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

Чтобы показать список товаров, можно добавить виджет ListView > ListTile. На виджете ListView сгенерируйте дочерние элементы из переменной и при этом выберите App State > [app_state_variable], т.е. ‘products’.

Теперь, чтобы отобразить детали товара (т.е. значения полей пользовательского типа данных, такие как название и цена) на виджете ListTile:

1. Выберите виджет ListTile, перейдите на панель свойств > Заголовок > Текст > Установить из меню Переменная > пункт [generate_children_from_variable_name].
2. Установите доступные параметры в поле Структура данных. Это позволит вам выбрать поле из пользовательского типа данных.
3. Теперь выберите поле, которое вы хотите отобразить.

Вы можете добавить новый «продукт» (т.е. пользовательский тип данных) в переменную состояния приложения с помощью действия Update App State. Вот как это делается:

1. Выберите виджет (т.е. кнопку в данном случае) и добавьте действие Update App State.
2. Нажмите на + Добавить поля и выберите переменную состояния приложения, т.е. в данном случае «продукты».
3. Выберите Тип обновления — Добавить в список.
4. Теперь вы должны получить значения пользовательских полей, таких как название и цена, из TextFields и подготовить пользовательский тип данных ‘product’ для добавления. Для этого:
   1. Выберите UNSET > Set Variable > Create Data Type > [custom_data_type_name]. Совет: Не запутайтесь в названии «Создать тип данных». Вы уже создали его, но здесь это означает, что вы должны подготовить тип данных или заполнить значения типа данных.
   2. Нажмите на + Add Fields и установите значение поля из Set Variable > Widget State > [TextFieldName].
   3. Аналогичным образом установите значения других пользовательских полей.

В этом примере мы обновляем товар на новой странице. Чтобы обеспечить лучший пользовательский опыт, мы сначала отображаем текущие значения продукта, чтобы пользователи имели четкое представление о том, что они собираются редактировать. Затем они могут легко редактировать и обновлять нужные поля без необходимости повторного ввода всей информации.

Чтобы отобразить сведения о конкретном продукте, мы сначала передаем индекс ‘product’ с предыдущей страницы и используем его для получения продукта из переменной состояния приложения. После этого можно выбрать поле для отображения в виджете TextField.

Чтобы отобразить сведения о существующем продукте в TextField:

1. Выберите виджет TextField, перейдите на панель свойств > TextField Properties > Initial Value > Set from Variable menu > App State > [app_state_variable]. Здесь мы выбираем переменную состояния приложения.
2. Установите опции Available Option на Item at Index и List Index Options на Specific Index. Здесь мы хотим получить продукт из определенного индекса в списке.
3. Установите значение индекса в Параметры страницы > [имя_параметра_страницы] (который содержит индекс продукта).
4. Наконец, выберите поле, которое вы хотите отобразить.

Для обновления значений внутри ‘product’, опять же, можно использовать действие Update App State. Вот как это делается:

1. Выберите виджет (т.е. кнопку в данном случае) и добавьте действие Update App State.
2. Нажмите на + Add Fields и выберите переменную состояния приложения, т.е. в данном случае «продукты».
3. Выберите Update Type для Update Item at Index, поскольку мы хотим обновить конкретный продукт.
4. Установите индекс элемента в Параметры страницы > [имя_параметра_страницы] (который содержит индекс продукта). Это поможет получить точный продукт на основе указанного индекса.
5. Выберите Тип обновления — Обновить поле(а) и нажмите Обновить [имя_кастомного_типа_данных].
6. Нажмите на + Добавить поля и установите значение поля в Set Variable > Widget State > [TextFieldName]. Аналогичным образом установите значения других пользовательских полей.

В этом примере мы удаляем продукт непосредственно из списка. Это можно сделать, сначала получив его индекс из списка, а затем используя его в действии Update App State для удаления элемента на основе индекса.
Вот как именно это делается:

1. Выберите виджет (т.е. SlidableActionWidget из виджета Slidable ListTile в данном случае) и добавьте действие Update App State.
2. Нажмите на + Add Fields и выберите переменную состояния приложения, например, в данном случае ‘products’.
3. Выберите Update Type для Remove from List at Index, поскольку мы хотим удалить конкретный продукт.
4. Установите индекс для удаления в [generate_children_from_variable_name] item > Index in List. Это удалит конкретный продукт на основе указанного индекса.

Страницы, показанные здесь, вы найдете в папке ‘ProductListing’ этого примера проекта.

Как удалить элемент в списке внутри типа данных?

Видео:https://www.loom.com/share/cba0543b66ff40029311c3d05067e697?sid=6704364d-973c-4269-9cb0-1c665e8eb3d1

Чтобы понять, как удалить элемент списка в пользовательском типе данных, рассмотрим пример типа данных «продукт» и используем его для хранения списка продуктов в переменной состояния приложения. Далее тип данных «продукт» содержит список аддонов следующим образом:

Теперь, чтобы удалить элемент аддона в списке в типе данных «продукт», сначала убедитесь, что у вас есть виджет, позволяющий пользователям удалять элемент (например, ListTile с виджетом SlidableActionWidget).

При щелчке на виджете добавьте действие, которое обновляет текущий товар в переменной состояния приложения. При обновлении можно выбрать тип обновления Update Type to Update Field(s), поскольку мы хотим обновить список аддонов в конкретном продукте (т.е. удалить один элемент). Здесь выберите поле со списком (т.е. аддоны), выберите тип обновления Remove from List at Index и установите его на Index in List.

Видео:https://www.loom.com/share/f2054375581c435686974c7b05585bbb?sid=3543f105-1a06-4649-acb9-066258a890c8