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

Флажок

В FlutterFlow флажок представляет собой универсальный виджет ввода, предназначенный для захвата бинарных выборов от пользователей, таких как true/false или да/нет. Он идеально подходит для ситуаций, когда необходимо предложить пользователям варианты, которые можно выбирать или сбрасывать по отдельности. FlutterFlow предоставляет три основные вариации виджета флажка: Checkbox, CheckboxListTile и CheckboxGroup. Каждый из этих виджетов предлагает уникальные функции и сценарии применения, что позволяет легко адаптировать интерфейс вашего приложения под конкретные нужды.

Состояние виджета

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

Checkbox​

Виджет Checkbox — это самая простая форма флажка. Он состоит из небольшого квадрата, который может быть отмечен или снят. Этот виджет обычно используется для отдельных булевых опций. Вы можете настроить внешний вид и поведение флажка, например, его размер, цвет и начальное состояние (отмечен или снят).

Добавление Checkbox​

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

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

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

Установка начального значения​

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

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

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

Сохранение значения флажка​

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

Настройка​

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

Изменение цвета​

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

  1. Выберите виджет Checkbox, перейдите в панель свойств и прокрутите вниз до раздела Checkbox Properties.
  2. Чтобы изменить цвет флажка в отмеченном и снятом состоянии, используйте свойства Checked Color и Unchecked Color соответственно.
  3. Чтобы изменить цвет значка отметки, используйте свойство Check Color.

Добавление скругленных углов​

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

  1. Выберите виджет Checkbox, перейдите в панель свойств и прокрутите вниз до раздела Checkbox Properties.
  2. Найдите свойство Border Radius и введите значения для TL(Top Left), TR(Top Right), BL(Bottom Left) и BR(Bottom Right). Используйте кнопку Lock, чтобы изменить все значения одновременно. Разблокировка позволит настроить каждое значение отдельно.

Сделать круглым​

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

Круглый флажок

Отключение флажка​

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

Чтобы отключить флажок, перейдите в Properties Panel > включите Checkbox Disable Options > нажмите Unset и задайте Condition. После установки вы также можете настроить цвета отключенного состояния с помощью свойства Disabled Check Color.

CheckboxListTile​

Виджет CheckboxListTile объединяет функциональность флажка с ListTile, предоставляя более полный вариант отображения флажков вместе с дополнительной информацией. В отличие от Checkbox этот виджет включает заголовок и необязательный подзаголовок, все в одном coherent элементе.

CheckboxListTile идеален для сценариев, где требуется предоставить больше контекста или описательного текста рядом с флажком, например, в меню настроек или форме с подробными опциями.

CheckboxGroup​

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

Добавление CheckboxGroup​

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

  1. Сначала добавьте виджет CheckboxGroup из вкладки Form Elements или напрямую из дерева виджетов.
  2. По умолчанию виджет CheckboxGroup добавляет один вариант с именем Option 1. Чтобы изменить имя, перейдите в панель свойств (справа на экране) и прокрутите вниз до раздела Define Options. Найдите свойство Option 1 и измените name.
  3. Чтобы добавить больше вариантов, перейдите в панель свойств и прокрутите вниз до раздела Define Options.
    1. Нажмите на текст Add Option.
    2. Введите имя в Option 2 Text.
  4. Чтобы удалить вариант, нажмите на значок отмены в свойстве Option name.
  5. Нажмите Set from Variable, чтобы отобразить варианты из переменной, такой как переменная состояния приложения, переменная ответа API или документ Firestore.

Запуск действия при изменении​

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

Установка начального выбора​

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

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

  1. Выберите CheckboxGroup из дерева виджетов или области холста.
  2. Перейдите в панель свойств (справа на экране) и прокрутите вниз до раздела Initially Selected.
  3. Нажмите Add Selected и введите имя варианта, который вы хотите отобразить как выбранный. Примечание: Убедитесь, что вы ввели правильное имя, соответствующее имени варианта в разделе define options.
  4. Аналогично вы можете отобразить другие вариант(ы) как выбранные.

Очистка/выбор всех элементов [Действие]​

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

Следуйте шагам ниже, чтобы добавить это действие к любому виджету.

  1. Выберите Widget (например, Button), к которому вы хотите добавить действие.
  2. Выберите Actions в панели свойств (правое меню). Если это первое действие, нажмите кнопку + Add Action. В противном случае нажмите кнопку "+" под плиткой предыдущего действия (в Action Flow Editor) и выберите Add Action.
  3. Найдите и выберите действие Clear All/Select All (в разделе Widget/UI Interactions).
  4. Выберите имя Multiselect Widget из выпадающего списка.
  5. Наконец, установите Action Type в Clear All или Select All.

Настройка​

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

Установка отступа вокруг флажка​

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

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

Изменение цвета флажка​

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

  1. Выберите CheckboxGroup из дерева виджетов или области холста.
  2. Перейдите в панель свойств и прокрутите вниз до раздела Checkbox Style.
  3. Чтобы изменить активный цвет (т. е. цвет при выборе флажка), найдите свойство Active Color, нажмите на поле рядом с уже выбранным цветом, выберите цвет и нажмите Use Color или нажмите Unset и введите Hex-код напрямую. Вы также можете выбрать цвет, нажав на кнопки Palette и Simple.
  4. Аналогично вы можете изменить цвет отметки (т. е. цвет значка галочки внутри флажка).

Настройка границы флажка​

Чтобы настроить границу флажка:

  1. Выберите CheckboxGroup из дерева виджетов или области холста.
  2. Перейдите в панель свойств и прокрутите вниз до раздела Checkbox Style.
  3. Чтобы изменить цвет границы флажка, найдите свойство Check Border Color, нажмите на поле рядом с уже выбранным цветом, выберите цвет и нажмите Use Color или нажмите Unset и введите Hex-код напрямую. Вы также можете выбрать цвет, нажав на кнопки Palette и Simple.
  4. Чтобы настроить скругление углов границы, найдите свойство Border Radius и введите значения в поля TL (Top left), TR (top right), BL (bottom left) и BR (bottom right). Используйте кнопку Lock, чтобы изменить все значения одновременно. Разблокировка позволит изменить каждое значение отдельно.