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

Вот как это выглядит в готовом виде:

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

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

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

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

Для этого достаточно нажать кнопку ‘Tap to Edit Fields‘, ввести значения и нажать кнопку Save Data. Чтобы добавить больше, используйте кнопку + Добавить элемент. В данном примере добавим несколько уже существующих товаров.

Видео:https://www.loom.com/share/1806befbff4649dea1f403823c76dbb3?sid=867f67bf-15ea-4246-a682-467dfbfb266b

Для отображения списка товаров можно добавить виджет ListView > ListTile. На виджете ListView сгенерируйте дочерние элементы из переменной и при этом выберите App State > [app_state_variable], т.е. «Продукт».

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

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

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

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

Видео:https://www.loom.com/share/5ba027d3d7bd4520a8e98096e1afd3b9?sid=feaf0ec4-3aa9-4f38-901f-34a79216c95d

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

Для отображения сведений о конкретном товаре мы сначала передаем индекс ‘Продукт’ с предыдущей страницы и используем его для получения товара из переменной состояния приложения. После этого можно выбрать поле для отображения в виджете 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 — значение Specific Index. Здесь мы указываем, что нужно получить продукт из определенного индекса в списке.
3. Set Index Value в Page Parameters > [page_parameter_name] (в котором содержится индекс продукта).
4. Наконец, выберите поле, которое вы хотите отобразить.

Видео:https://www.loom.com/share/86a61b6515834f99b63bb07ddf8d0125?sid=ef13de4e-f879-4e3a-920f-6806e4a1c8aa

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

1. Выберите виджет (в данном случае Button) и добавьте действие Update App State.
2. Щелкните на + Add Fields и выберите переменную состояния приложения, в данном случае ‘products’.
3. Выберите Update Type для Update Item at Index, поскольку мы хотим обновить конкретный товар.
4. Установите для параметра Item Index значение Page Parameters > [page_parameter_name] (которое содержит индекс продукта). Это позволит получить точный продукт по указанному индексу.
5. Выберите Update Type (Тип обновления) для Update Field(s) и нажмите Update [custom_data_type_name].
6. Щелкните на + Add Fields и задайте значение поля из Set Variable > Widget State > [TextFieldName]. Аналогичным образом установите значения других пользовательских полей.

Видео:https://www.loom.com/share/2a1d20299c294572a7d4009f896b8daa?sid=ed5cb8d0-1a71-4e31-bc5f-7f41c18cc2a0

В данном примере мы удаляем товар непосредственно из списка. Это можно сделать, сначала получив его индекс из списка, а затем используя его в действии 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. В результате будет удален конкретный продукт, основанный на указанном индексе.

Видео:https://www.loom.com/share/70a96f5cc67b4bd8b3d2d5223f2f57ab?sid=0f80c0e1-1d74-4865-8dad-517ef4c3141c

Демонстрируемые здесь страницы находятся в папке ‘ProductListing’ данного примера проекта.

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

Видео:https://www.loom.com/share/cba0543b66ff40029311c3d05067e697?sid=1e3b3c4a-2295-4f19-9881-f4851149d371

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

Видео:https://www.loom.com/share/f2054375581c435686974c7b05585bbb?sid=4da2a80d-f1ed-4c35-826c-d50fa48cfc11

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

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