Форма с чекбоксами

Виджет CheckboxGroup используется для того, чтобы пользователь мог выбрать несколько элементов. Перед названием элемента отображается флажок, который можно установить/отметить, чтобы сделать/снять выбор.

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

Вот пример того, как вы можете использовать виджет CheckboxGroup в своем проекте:

• Сначала добавьте виджет CheckboxGroup из вкладки Form Elements или добавьте его непосредственно из дерева виджетов.
• По умолчанию виджет CheckboxGroup добавляет один вариант с именем Option 1. Чтобы изменить название, перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела Define Options. Найдите свойство Option 1 и измените его название.
• Чтобы добавить дополнительные параметры, перейдите на панель свойств и прокрутите вниз до раздела Определить параметры.
  • Нажмите на текст Добавить опцию.
  • Введите имя в Текст опции 2.
• Чтобы удалить опцию, нажмите на значок отмены (), отображаемый в свойстве Имя опции.
• Нажмите на Set from Variable, чтобы отобразить опции из переменной, такой как локальная переменная состояния, переменная ответа API или документ Firestore.

Иногда вы можете захотеть отобразить CheckboxGroup с уже выбранными опциями. Например, выбрать варианты начинок, которые уже подаются вместе с самой пиццей. Вы можете сделать это, установив начальный выбор для CheckboxGroup.

В зависимости от вашего приложения, вы можете захотеть установить начальный выбор вручную (т.е. вручную ввести имя опции) или из переменных, таких как локальная переменная состояния, переменная ответа API или документ Firestore).

Чтобы установить начальный выбор вручную:

• Выберите CheckboxGroup в дереве виджетов или в области холста.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела Initially Selected.
• Нажмите на кнопку Добавить выбранный и введите имя опции, которую вы хотите отобразить как выбранную. Примечание: Убедитесь, что вы ввели правильное имя и оно совпадает с именем опции, добавленным в разделе определения опций.
• Аналогичным образом вы можете отобразить другую опцию (опции) как выбранную.

Рассмотрим пример установки начальных вариантов начинки пиццы с помощью локальной переменной состояния.
Сначала создайте локальную переменную состояния с типом данных String и обозначьте ее как List (т.е. List <String>), что выглядит следующим образом. Чтобы сделать это, найдите инструкции здесь.

Чтобы установить начальный выбор из локальной переменной состояния:

• Выберите CheckboxGroup в дереве виджетов или в области холста.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела Initially Selected.
• Нажмите на Set from Variable (Установить из переменной). Откроется новая панель.
• Установите для параметра Источник значение Местное состояние.
• Установите для параметра Доступные параметры имя переменной.
• Нажмите кнопку Подтвердить.

Возможно, вы используете Firstore для хранения данных вашего приложения в модели коллекция-документ. Давайте рассмотрим пример отображения значения Repeat элемента Todo внутри CheckboxGroup из данных Firestore.

Прежде чем мы получим данные из Firestore, убедитесь, что вы выполнили все необходимые условия, чтобы иметь некоторые данные в Firestore.

• Ознакомьтесь со структурированием базы данных Firebase.
• Выполните все шаги в разделе Firebase Setup для вашего проекта.
• Создайте коллекцию под названием Todos.
• Добавьте данные в коллекцию.

Запись/документ внутри коллекции Todos должен выглядеть следующим образом:

Запрос одного документа на странице помогает получить данные документа, которые могут содержать значения для отображения на CheckboxGroup.

Чтобы запросить отдельный документ на странице:

• Выберите страницу.
• Перейдите на вкладку Backend Query (в правой части экрана).
• Установите для параметра Тип запроса значение Коллекция запросов.
• Прокрутите страницу вниз, чтобы найти выпадающий список Collection и измените его на вашу коллекцию.
• Установите Тип запроса на Одиночные документы.
• Нажмите на + Filter, чтобы найти точный документ/запись.
• Найдите поле Имя, нажмите кнопку Снять и выберите поле, к которому вы хотите применить фильтр.
• Найдите выпадающий список Relation, нажмите на Unset и выберите отношение из списка.
• Найдите свойство Value и установите в нем подходящее значение.
• Нажмите кнопку Подтвердить.

Чтобы отобразить варианты из данных документа в CheckboxGroup:

• Выберите виджет CheckboxGroup в дереве виджетов или в области холста.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела Initially Selected.
• Нажмите на Set from Variable (Установить из переменной). Откроется новая панель.
• Найдите выпадающий список Источник, щелкните на Unset и выберите [collection] Record (from PageName).
• В разделе Доступные параметры нажмите на кнопку Снять и выберите поле, содержащее параметры, которые будут отображаться внутри CheckboxGroup.
• Нажмите кнопку Подтвердить.

Скорее всего, вы будете использовать CheckboxGroup внутри формы и сохранять выбор в базе данных бэкенда, когда форма будет отправлена.

Давайте посмотрим пример сохранения выбора CheckboxGroup в документе Firestore.

Чтобы сохранить выбор CheckboxGroup внутри документа Firestore, убедитесь, что вы выполнили все упомянутые предварительные условия.

• Ознакомьтесь со структурированием базы данных Firebase.
• Выполните все шаги в разделе «Настройка Firebase» для вашего проекта.
• Создайте коллекцию под названием Todos со схемой, как показано ниже.

Для хранения списка выбранных опций схема коллекции должна содержать поле с типом данных String и должна быть списком (т.е. List<String>).

Вы можете передать выбор CheckboxGroup в поле документа, добавив действие, которое создает или обновляет документ, например, Create Document или Update Document.

Ниже приведены подробные шаги:

• Выберите виджет (например, кнопку), на который вы хотите добавить действие.
• Выберите Действия на панели свойств (правое меню) и нажмите Открыть. Это откроет редактор потока действий в новом всплывающем окне.
  • Нажмите на + Добавить действие.
  • В правой части найдите и выберите Создать документ или Обновить документ.
  • Если вы выбрали Создать документ.
    • Установите Коллекцию на имя вашей коллекции (например, todo).
  • Если вы выбрали Обновить документ, установите ссылку документа на обновление.
    • Если у вас есть доступ к документу, установите Источник на фактический документ, а Доступные параметры — на ссылку.
  • В разделе Задать поля нажмите на кнопку + Поле.
  • Щелкайте по имени поля, пока не увидите поля, в которых хранится выбор CheckboxGroup.
    • Установите для параметра Тип обновления списка значение Установить значение.
    • Установите для параметра Источник значение Состояние виджета.
    • Установите для параметра Доступные параметры значение CheckboxGroup.
  • Аналогично добавьте поле для других элементов пользовательского интерфейса.

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

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

Чтобы создать пустое пространство вокруг флажка:

• Выберите CheckboxGroup в дереве виджетов или в области холста.
• Перейдите на панель свойств и найдите свойство Item Padding.
• Установите отступы для сторон L(Left), T(Top), R(Right) и B(Bottom). Используйте кнопку Lock, чтобы изменить все значения одновременно. Разблокировка позволит вам изменять каждое значение отдельно.

Чтобы изменить цвет флажка:

• Выберите группу CheckboxGroup в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Стиль флажка.
• Чтобы изменить активный цвет (т.е. цвет, когда флажок выбран), найдите свойство Active Color, нажмите на поле рядом с уже выбранным цветом, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав кнопку Палитра и просто.
• Аналогичным образом можно изменить цвет флажка (т.е. цвет значка «сделано»/»галочка» внутри флажка).

Чтобы настроить границу флажка, выполните следующие действия:

• Выберите группу CheckboxGroup в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Стиль флажка.
• Чтобы изменить цвет границы флажка, найдите свойство Check Border Color, нажмите на поле рядом с уже выбранным цветом, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав кнопку Палитра и просто.
• Чтобы настроить угол границы, найдите свойство Border Radius и введите значения в поля TL (верхнее левое), TR (верхнее правое), BL (нижнее левое) и BR (нижнее правое). Используйте кнопку Lock, чтобы изменить все значения одновременно. Разблокировка позволит вам изменять каждое значение отдельно.

Чтобы настроить ярлык, выполните следующие действия:

• Выберите группу CheckboxGroup в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Стиль ярлыка.
• Чтобы создать некоторое пространство вокруг ярлыка, найдите свойство Label Padding и установите отступы для сторон L(Left), T(Top), R(Right) и B(Bottom). Используйте кнопку Lock, чтобы изменить все значения одновременно. Разблокировка позволит вам изменять каждое значение отдельно.
• Чтобы изменить стиль этикетки, найдите свойство Label Text Style и измените стиль в соответствии с приведенной здесь инструкцией.

Ниже приведены инструкции по добавлению набивки.

Здесь приведены инструкции по настройке выравнивания.

Посмотрите, как установить цвет из переменной в любое свойство цвета этого виджета.

Узнайте, как вызвать действие при изменении выбора на этом виджете.

Инструкции по отображению/скрытию виджета находятся здесь.