RadioButton
RadioButton даёт выбрать ровно один вариант из нескольких — пол, способ уведомлений, тариф.
Прежде чем браться за виджеты форм, посмотрите руководство по состоянию виджетов.
Добавление виджета
- Перетащите виджет Column из вкладки Layout Elements и задайте ему Cross Axis Alignment = Stretch.
- Добавьте виджет RadioButton из вкладки Form Elements.
По умолчанию у виджета один вариант — Option 1.
Действие при смене выбора
Как выполнить действие при смене выбора.
Переименование варианта
- Выделите RadioButton в дереве виджетов или на холсте.
- Откройте раздел Define Options в панели свойств.
- Найдите свойство Option 1 и измените name.
Добавление и удаление вариантов
- Выделите RadioButton.
- Откройте раздел Define Options.
- Нажмите Add Option.
- Введите название в Option 2 Text.
- Чтобы убрать вариант, нажмите крестик в свойстве с его именем.
Начальный вариант
При запуске приложения ни один вариант не выбран.
- Выделите RadioButton.
- Найдите свойство Initial Option.
- Введите имя варианта. Например, значение Jupiter выделит второй вариант при запуске.
Оформление выбранного варианта
- Выделите RadioButton.
- Откройте раздел Radio Button Text Style.
- Отметьте Change Selected Text Style.
- Задайте оформление в разделе Radio Button Selected Text Style.
Чтение выбранного значения
Соберём пример, где выбранный вариант выводится в виджете Text.
Здесь значение показано в тексте для наглядности. В реальном приложении выбор чаще уходит на бэкенд — в базу или в запрос к API.
Порядок действий:
- Добавьте на страницу виджет Text.
- В панели свойств нажмите Set from Variable.
- В Source выберите Widget State.
- В Available Options укажите RadioButton.
- При необходимости задайте значение по умолчанию.
- Нажмите Save.
Настройка
Высота вариантов
- Выделите RadioButton.
- Откройте раздел Radio Button Properties.
- Задайте значение в поле Option Height.
Отступы вокруг подписи
- Выделите RadioButton.
- Откройте раздел Radio Button Properties.
- Задайте значения в свойстве Margin.
- Значок обновления сбрасывает их к исходным.
Кнопка с замком меняет отступы слева, сверху, справа и снизу разом; разомкнув её, значения задают по отдельности.
Варианты в строку
По умолчанию варианты выстраиваются столбцом, как внутри Column. Свойство Axis переключает их в строку, как в Row.
- Выделите RadioButton.
- Откройте раздел Radio Button Properties.
- Смените Axis на Horizontal.
Выравнивание
Выравнивание определяет, как варианты распределяются по ширине.
- Выделите RadioButton.
- Откройте раздел Radio Button Properties.
- Выберите значение в списке Alignment: Start, Center, End.
- Если Axis = Horizontal, добавляются варианты Space evenly, Space between и Space around.
Положение кнопки
Кружок можно поставить справа от подписи — за это отвечает свойство Button Position.
- Выделите RadioButton.
- Откройте раздел Radio Button Properties.
- Смените Button Position на Right.
Цвета
- Выделите RadioButton.
- Откройте раздел Radio Button Properties.
- Selected Color — цвет выбранного варианта: нажмите на квадрат рядом с Unset и выберите цвет либо введите HEX-код.
- Unselected Color — цвет остальных вариантов; задаётся так же.