Виджет 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. Введите имя опции. Например, ввод значения Jupiter приведет к тому, что при запуске приложения будет выбрана вторая опция.

Стилизация выбранной опции

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

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

Получение выбранной опции RadioButton

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

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

  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.

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

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

  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.

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