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

RadioButton

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

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

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

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

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

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

  1. Сначала перетащите виджет Column из вкладки Элементы макета (в панели виджетов) или добавьте его непосредственно из дерева виджетов. Установите значение Cross Axis Alignment в Stretch.
  2. Далее добавьте виджет RadioButton из вкладки Элементы формы или добавьте его непосредственно из дерева виджетов.
к сведению

Виджет 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 на свой Backend (Firebase 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 и выберите один из вариантов, например, Начало, Центр, Конец.
  4. Если свойство Axis установлено на Horizontal, вы увидите варианты, включающие Начало, Центр, Конец, Равномерно, Между и Вокруг.

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

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

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

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

Стилизация радио-кнопки​

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

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

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

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