Чекбокс

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

Давайте посмотрим, как добавить виджет checkbox и построить пример, который показывает его значение на виджете Text. Вот как это выглядит:

Вот простой способ сделать это:

• Сначала нажмите на + Add Widget, перетащите виджет Checkbox с вкладки Base Elements или добавьте его непосредственно из дерева виджетов.
• Под флажком добавьте виджет Text, перейдите на панель свойств, нажмите на Set from Variable и выберите Widget State > checkboxValue (т.е. имя вашего флажка).

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

Чтобы установить начальное значение:

• Выберите виджет Checkbox, перейдите на панель свойств и посмотрите свойство Checkbox Initial Value.
• Используйте флажок, чтобы установить это значение вручную, или нажмите кнопку Установить из переменной, чтобы установить его на основе динамического значения. Если вы выбрали Set from Variable, убедитесь, что вы передаете булево значение из источника (например, ответ API, поле документа Firestore).

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

Виджет флажка предоставляет вам следующие типы действий (aks callbacks), и вы можете выбрать любой из них для добавления действий под ним.

1. On Toggled On: Действия, добавленные под этим действием, будут срабатывать всякий раз, когда флажок выбран/отмечен.
2. On Toggled Off: Действия, добавленные под этим пунктом, будут срабатывать всякий раз, когда флажок будет снят/выбран.

Вот как это делается:

• Выберите виджет Checkbox, выберите Actions на панели Properties (правое меню) и нажмите Open. Это откроет редактор потока действий в новом всплывающем окне.
• Выберите Включено при переключении или Выключено при переключении и добавьте действие, которое будет обновлять значение. (например, обновление локального состояния, обновление записи в Firestore и т.д.).

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

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

• Выберите виджет «Флажок«, перейдите на панель свойств и прокрутите вниз до раздела «Свойства флажка«.
• Чтобы изменить цвет флажка, когда он выбран и не выбран, используйте свойства Checked Color и Unchecked Color соответственно.
• Чтобы изменить цвет значка флажка, используйте свойство Check Color.

Чтобы изменить закругленные углы для этого виджета:

• Выберите виджет Checkbox, перейдите на панель свойств и прокрутите вниз до раздела Checkbox Properties.
• Найдите свойство Радиус границы и введите значения для TL(верхний левый), TR(верхний правый), BL(нижний левый) и BR(нижний правый). Используйте кнопку Lock, чтобы изменить все значения одновременно. Разблокировка позволит вам настроить каждое значение отдельно.

Если вы хотите сделать флажок круглым по форме, выберите виджет Checkbox, перейдите на панель свойств, найдите свойство Circular Check и включите его.

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

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