QtQuick常⽤元素：RadioButton（单选框），CheckBox（复选
框）与Gr。。。
先介绍⼀下 ExclusiveGroup。
ExclusiveGroup (互斥分组）本⾝是不可见元素，⽤于将若⼲个可选择元素组合在⼀起，供⽤户选择其中的⼀个选项。
你可以在ExclusiveGroup 对象中定义 RadioButton、CheckBox、Action 等元素，此时不需要设置它们的 exclusiveGroup 属性；也可以定义⼀个只设置了 id 属性的 ExclusiveGroup 对象，在别处定义 RadioButton、CheckBox、Action 等元素时通过 id 初始化这些元素的 exclusiveGroup 属性。current 属性指向互斥分组中第⼀个选中的元素。
⼀、RadioButton
RadioButton⽤于多选⼀的场景，使⽤时需要通过 exclusiveGroup 属性为其指定⼀个分组。它也可以和GroupBox结合使⽤。
要使⽤RadioButton，需要导⼊Controls模块，这样： import QtQuick.Controls 1.2。
text 属性存储单选按钮的⽂本。
单选按钮还有⼀个指⽰选中与否的⼩图标，⼀般显⽰在⽂本前⾯。给 style 属性设置⾃定义的 RadioButtonStyle 对象，可以定制RadioButton 的外观。 checked 属性指⽰ RadioButton 是否被选中，也可以设置它来选中或取消选中。
hovered 是只读属性，指⽰⿏标是否悬停在 RadioButton 上。
pressed 属性在按钮被按下时为 true；当单选按钮被按下时，activeFocusOnPress 属性为 true，按钮获得焦点。
如果你点击了⼀个单选按钮，则会触发clicked()信号。
1.1 RadioButtonStyle
RadioButtonStyle ⽤来定制⼀个 RadioButton，要使⽤它需要引⼊ QtQuick.Controls.Styles 1.x 模块。
background 属性定制背景，indicator 定制选中指⽰图标，label 定制单选按钮的⽂本，它们的类型都是 Component。
spacing 指定图标和⽂本之间的间隔。
control 指向使⽤ style 的 RadioButton 对象，组件内的对象可以通过 control 访问 RadioButton 的各种属性，如 focus、activeFocus、hovered 等。
下⾯的实例中我们会使⽤ RadioButtonStyle 来定制 RadioButton。
1.2 实例：选择你喜欢的⼿机操作系统
提供⼀个简单的实例，preferred_mobile_os.qml，内容如下：
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Rectangle {
width: 320;
height: 300;
color: "#d0d0d0";
Rectangle {
id: resultHolder;
color: "#a0a0a0";
width: 200;
height: 60;
visible: false;
z: 2;
opacity: 0.8;
border.width: 2;
Text {
id: result;
font.pointSize: 20;
color: "blue";
font.bold: true;
}
}
ExclusiveGroup {
id: mos;
}
Component {
id: radioStyle;
RadioButtonStyle {
indicator: Rectangle {
implicitWidth: 16;
implicitHeight: 12;
radius: 6;
Rectangle {
anchors.fill: parent;
visible: control.checked;
color: "#0000A0";
radius: 5;
anchors.margins: 3;
}
}
label: Text {
color: control.activeFocus ? "blue" : "black";
text: ;
}
}
}
Text {
id: notation;
text: "Please select the best mobile os:"
anchors.left: parent.left;
anchors.leftMargin: 8;
}
RadioButton {
id: android;
text: "Android";
exclusiveGroup: mos;
anchors.left: notation.left;
anchors.leftMargin: 20;
checked: true;
focus: true;
activeFocusOnPress: true;
style: radioStyle;
onClicked: resultHolder.visible = false;
}
RadioButton {
id: ios;
text: "iOS";
exclusiveGroup: mos;
anchors.left: android.left;
activeFocusOnPress: true;
style: radioStyle;
onClicked: resultHolder.visible = false;
}
RadioButton {
id: wp;
text: "Windows Phone";
exclusiveGroup: mos;
anchors.left: android.left;
activeFocusOnPress: true;
style: radioStyle;
onClicked: resultHolder.visible = false;
}
RadioButton {
id: firefox;
text: "Firefox OS";
exclusiveGroup: mos;
anchors.left: android.left;
activeFocusOnPress: true;
style: radioStyle;
onClicked: resultHolder.visible = false;
}
RadioButton {
id: sailfish;
text: "Sailfish OS";
exclusiveGroup: mos;
anchors.left: android.left;
activeFocusOnPress: true;
style: radioStyle;
onClicked: resultHolder.visible = false;
}
Button {
id: confirm;
text: "Confirm";
anchors.left: notation.left;
onClicked: {
< = ;
resultHolder.visible = true;
}
}
}
实例定义了 5 个 RadioButton，分别代表 5 个移动操作系统，这些单选按钮同属于 mos 这个 ExclusiveGroup。我使⽤锚布局来安排界⾯元素的位置。
当⽤户点击某个 RadioButton 时⽤于显⽰结果的 Text 对象处于界⾯中央，⼀开始是隐藏的，当点击 “Confirm” 按钮时显⽰⽤户的选择结果。
触发 clicked 信号，我在 onClicked 信号处理器内隐藏显⽰结果的 Text 对象。
QML ⽂件内嵌⼊了⼀个 RadioButtonStyle 组件，将选中图标变成了椭圆形，将选中时的⽂字变成了蓝⾊。RadioButton 通过 radioStyle 这个id来引⽤组件。
执⾏ “qmlscene preferred_mobile_os.qml” 命令，效果如下图所⽰。
⼆、CheckBox
CheckBox，复选框，顾名思义，你可以在⼀组选项中选择⼀个或多个选项，这些选项之间互不影响。
像 RadioButton —样，CheckBox 可以显⽰⼀个提⽰选中与否的⼩图标，以及⼀⾏简单的⽂本。
相⽐ RadioButton，CheckBox 多了两个属性：partiallyCheckedEnabled 属性指⽰是否允许部分选中状态，默认为 false；checkedState 记录选中状态，它的值可能是 Qt.UnChecked、 Qt.Checked 或 Qt.PartiallyChecked。
2.1 CheckBoxStyle
CheckBoxStyle 的属性与 RadioButtonStyle ⼏乎完全⼀样，唯⼀不同的是 control 属性的类型是CheckBox 。
与 RadioButtonStyle 类似，CheckBoxStyle ⽤来定制 CheckBox 。需要注意的是，如果你指定了 exdusiveGroup 属性，那么同属于⼀个互斥组的复选框， 也可以达到多选⼀的效果。2.2 实例：那些你喜欢的爱情电影⼀个简单的实例，preferred_movies.qml ，内容如下：
import QtQuick 2.2
import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.2
Rectangle {
width: 320;
height: 300;
color: "#d0d0d0"; Rectangle {
id: resultHolder;
color: "#a0a0a0";
width: 220;
height: 80;
visible: false;
z: 2;
opacity: 0.8;
border.width: 2;
radius: 8;
Text {
id: result;
anchors.fill: parent;
anchors.margins: 5;
font.pointSize: 16;
color: "blue";
font.bold: true;
wrapMode: Text.Wrap;
}
} Component {
id: checkStyle;
CheckBoxStyle {
indicator: Rectangle {
implicitWidth: 14;
implicitHeight: 14;
border.width: 1;
Canvas {
anchors.fill: parent;
anchors.margins: 3;
visible: control.checked;
onPaint: {
var ctx = getContext("2d");
ctx.save();
ctx.strokeStyle = "#C00020";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.lineTo(width, height);
ctx.lineTo(width, 0);
ctx.stroke();
}
}
}
checkbox和radiobutton的区别label: Text {
color: control.checked ? "blue" : "black"; text: ;
}
}
}
Text {
id: notation;
text: "Please select the best love movies:" p: p;
anchors.left: parent.left;
anchors.leftMargin: 8;
}
Column {
id: movies;
anchors.left: notation.left;
anchors.leftMargin: 20;
spacing: 8;
CheckBox {
text: "廊桥遗梦";
style: checkStyle;
onClicked: resultHolder.visible = false;
}
CheckBox {
text: "⼈⿁情未了";
style: checkStyle;
onClicked: resultHolder.visible = false;
}
CheckBox {
text: "触不到的恋⼈";
style: checkStyle;
onClicked: resultHolder.visible = false;
}
CheckBox {
text: "西雅图夜未眠";
style: checkStyle;
onClicked: resultHolder.visible = false;
}
}
Button {
id: confirm;
text: "Confirm";
anchors.left: notation.left;
onClicked: {
var str = new Array();
var index = 0;
var count = movies.children.length;
for(var i = 0; i < count; i++){
if(movies.children[i].checked){
str[index] = movies.children[i].text;
index++;
}
}
if(index > 0){
< = str.join();
resultHolder.visible = true;
}
}
}
}
发表评论