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

RadioButton

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

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

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

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

Добавление RadioButton в проект​

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

  1. Сначала перетащите виджет Column из вкладки Layout Elements (в панели виджетов) или добавьте его напрямую из дерева виджетов. Установите значение Cross Axis Alignment в Stretch.
  2. Теперь добавьте виджет RadioButton из вкладки Form Elements или добавьте его напрямую из дерева виджетов.
к сведению

Виджет RadioButton по умолчанию добавляет один вариант с именем Option 1.

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

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

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

Чтобы изменить имя варианта:

  1. Выберите RadioButton в дереве виджетов или на холсте.
  2. Перейдите в редактор свойств (справа на экране) и прокрутите вниз до раздела Define Options.
  3. Найдите свойство Option 1 и измените name.

Добавление или удаление варианта​

Чтобы добавить или удалить вариант в RadioButton:

  1. Выберите RadioButton в дереве виджетов или на холсте.
  2. Перейдите в редактор свойств (справа на экране) и прокрутите вниз до раздела Define Options.
  3. Нажмите на текст Add Option.
  4. Введите имя в поле Option 2 Text.
  5. Чтобы удалить вариант, просто нажмите на значок отмены () в свойстве Option name.

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

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

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

  1. Выберите RadioButton в дереве виджетов или на холсте.
  2. Перейдите в редактор свойств (справа на экране) и прокрутите вниз до свойства Initial Option.
  3. Введите name варианта. Например, ввод значения Jupiter покажет второй вариант выбранным при запуске приложения.

Стилизация выбранного варианта​

Чтобы изменить стиль текста выбранного варианта:

  1. Выберите RadioButton в дереве виджетов или на холсте.
  2. Перейдите в редактор свойств (справа на экране) и прокрутите вниз до раздела Radio Button Text Style.
  3. Поставьте галочку напротив Change Selected Text Style. (Нажмите на него)
  4. В разделе Radio Button Selected Text Style измените стиль текста.

Получение выбора RadioButton​

Давайте создадим пример отображения выбранного варианта в виджете Text.

к сведению

Для упрощения выбранный вариант отображается в виджете Text. В реальном сценарии вы можете передать выбор RadioButton на бэкенд (Firestore Database/API call).

Чтобы получить выбор пользователя:

  1. Добавьте виджет Text на страницу.
  2. Перейдите в редактор свойств и нажмите на текст Set from Variable. (Это откроет новую панель)
  3. Установите Source в Widget State.
  4. Установите Available Options в RadioButton.
  5. (Необязательно) Установите значение по умолчанию, если хотите.
  6. Нажмите Save.

Изменение свойств​

Панель свойств позволяет настроить внешний вид и поведение виджета.

Изменение высоты вариантов​

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

  1. Выберите RadioButton в дереве виджетов или на холсте.
  2. Перейдите в редактор свойств (справа на экране) и прокрутите вниз до раздела Radio Button Properties.
  3. Введите желаемую высоту в поле Option Height.

Добавление отступов вокруг текста варианта​

Чтобы добавить отступы вокруг текста варианта:

  1. Выберите RadioButton в дереве виджетов или на холсте.
  2. Перейдите в редактор свойств (справа на экране) и прокрутите вниз до раздела Radio Button Properties.
  3. Найдите свойство Margin и введите значения.
  4. Нажмите на значок обновления, чтобы сбросить значения.
к сведению

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

Отображение вариантов горизонтально​

По умолчанию все варианты отображаются так, как будто они находятся внутри виджета Column. Используя свойство Axis, вы можете изменить это поведение, чтобы отображать все варианты горизонтально, как будто они находятся внутри виджета Row.

Чтобы отобразить все варианты горизонтально:

  1. Выберите RadioButton в дереве виджетов или на холсте.
  2. Перейдите в редактор свойств (справа на экране) и прокрутите вниз до раздела Radio Button Properties.
  3. Найдите свойство Axis и измените его на Horizontal.

Выравнивание вариантов​

Изменение выравнивания повлияет на то, как варианты распределяются в горизонтальном пространстве.

Чтобы изменить выравнивание вариантов:

  1. Выберите RadioButton в дереве виджетов или на холсте.
  2. Перейдите в редактор свойств (справа на экране) и прокрутите вниз до раздела Radio Button Properties.
  3. Найдите выпадающий список Alignment и выберите из отображаемых вариантов: Start, Center, End.
  4. Если свойство Axis установлено в Horizontal, вы увидите варианты: Start, Center, End, Space evenly, Space between и Space around.

Изменение позиции кнопки​

Если вы хотите отобразить кнопку на противоположной стороне от текста варианта, то есть справа, вы можете сделать это с помощью свойства Button Position.

Чтобы изменить позицию кнопки:

  1. Выберите RadioButton в дереве виджетов или на холсте.
  2. Перейдите в редактор свойств (справа на экране) и прокрутите вниз до раздела Radio Button Properties.
  3. Найдите свойство Button Position и измените его на Right.

Стилизация Radio Button​

Чтобы изменить цвет выбранных и невыбранных вариантов:

  1. Выберите RadioButton в дереве виджетов или на холсте.
  2. Перейдите в редактор свойств (справа на экране) и прокрутите вниз до раздела Radio Button Properties.
  3. Найдите свойство Selected Color, нажмите на поле рядом с Unset, выберите цвет и затем нажмите Use Selected Color или нажмите на Unset и введите Hex-код напрямую. Вы также можете выбрать цвет, нажав на кнопки Palette и Simple.
  4. Найдите свойство Unselected Color, нажмите на поле рядом с Unset, выберите цвет и затем нажмите Use Selected Color или нажмите на Unset и введите Hex-код напрямую. Вы также можете выбрать цвет, нажав на кнопки Palette и Simple.