Переключатель RadioButton

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

Тип RadioButton наследует весь функционал от типа AbstractButton, в частности, свойство checked, которое указывает, отмечен ли флажок (значение true) или нет (false)

Например, определим группу переключателей:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column {
        RadioButton {
            text: "C++"
            checked: true
        }
        RadioButton {
            text: "Java"
        }
        RadioButton {
            text: "JavaScript"
        }
    }
}

Стилизация

Для стилизации флажков можно использовать унаследованные от AbstractButton возможности. Например, для установки шрифта применяется свойство font и его вложенные свойства:

• font.bold: представляет тип bool и устанавливает, будет ли текст выделяться жирным

• font.family: представляет тип string и устанавливает используемое семейство шрифтов

• font.italic: представляет тип bool и устанавливает курсив текста

• font.letterSpacing: представляет тип real и устанавливает пространство между символами

• font.pixelSize: представляет тип int и устанавливает размер шрифта в пикселях

• font.pointSize: представляет тип real и устанавливает размер шрифта в точках

• font.strikeout: представляет тип bool и устанавливает, будет ли текст зачеркнут

• font.styleName: представляет тип string и устанавливает имя стиля шрифта

• font.underline: представляет тип bool и устанавливает, будет ли текст подчеркнут

• font.overline: представляет тип bool и устанавливает, будет ли текст надчеркнут

• font.weight: представляет тип int и устанавливает вес шрифта

Например, установка шрифта:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"
    Column {
        RadioButton {
            text: "C++"
            checked: true
            font {family: "Verdana"; pixelSize:15}
        }
        RadioButton {
            text: "Java"
            font {family: "Verdana"; pixelSize:15}
        }
    }
}

Правда, при таком изменении у нас получает шрифт, не пропорциональный кружку - иконке переключателя. Но с помощью свойства indicator можно настроить внешний вид иконки переключателя. Это свойство представляет тип Item, благодаря чему мы можем сами определить форму иконки переключателя. Например, установим высоту и ширину:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"
    Column {
        padding: 5
        spacing: 5
        RadioButton {
            text: "C++"
            checked: true
            font {family: "Verdana"; pixelSize:15}
            indicator {height:18; width:18}
        }
        RadioButton {
            text: "Java"
            font {family: "Verdana"; pixelSize:15}
            indicator {height:18; width:18}
        }
    }
}

Определение группы переключателей

Специальный тип ButtonGroup позволяет определить группу кнопок, в том числе, группу переключателей. Это позволяет создать на одном окне несколько независимых групп переключателей.

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Row{
        anchors.fill: parent
        spacing: 5
        Column {
            // группа для языков программирования
            ButtonGroup { id: languages }

            RadioButton {
                text: "C++"
                checked: true
                font {family: "Verdana"; pixelSize:15}
                ButtonGroup.group: languages
            }
            RadioButton {
                text: "Java"
                font {family: "Verdana"; pixelSize:15}
                ButtonGroup.group: languages
            }
            RadioButton {
                text: "JavaScript"
                font {family: "Verdana"; pixelSize:15}
                ButtonGroup.group: languages
            }
        }
        Column {
            // группа для технологий программирования
            ButtonGroup { id: technologies }

            RadioButton {
                font {family: "Verdana"; pixelSize:15}
                text: "Mobile"
                ButtonGroup.group: technologies
            }
            RadioButton {
                font {family: "Verdana"; pixelSize:15}
                text: "Web"
                ButtonGroup.group: technologies
            }
            RadioButton {
                font {family: "Verdana"; pixelSize:15}
                text: "Desktop"
                ButtonGroup.group: technologies
            }
        }
    }
}

В данном случае имеются две группы, для каждой из которых установлен идентификатор - languages или technologies. Внутри каждого элемента RadioButton можно установить принадлежность к определенной группе с помощью свойства ButtonGroup.group

ButtonGroup.group: languages

Обработка выбора переключателя

Для каждой группы ButtonGroup определен сигнал "clicked", который срабатывает при нажатии на одну из кнопок группы. А с помощью обработчика onClicked можно обработать выбор переключателя. В частнсти, выбранный переключатель доступен через свойство checkedButton. Например:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"
    Column {
        spacing:5
        padding: 5
        ButtonGroup {
            id: languages
            onClicked: {output.text = checkedButton.text}   // обработка выбора переключателя 
        }
        RadioButton {
            text: "C++"
            ButtonGroup.group: languages
        }
        RadioButton {
            text: "Java"
            ButtonGroup.group: languages
        }
        RadioButton {
            text: "JavaScript"
            ButtonGroup.group: languages
        }
        Text {
            id: output
            font.pixelSize:15
        }
    }
}

В данном случае при переключении переключателей текст отмеченной радиокнопки отображается в элементе Text: