本例子为Qt Quick 核心编程中的一个小例子,点击对应单选框,显示对应数据,按钮下去得到对应数据,QML有时候就是这样枯燥与无聊。
对应代码:
import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Window{
width: 320;
height: 240;
color: "#C0C0C0";
visible: true;
Rectangle{
id:resultHolder;
color: "#a0a0a0";
width: 200;
height: 60;
anchors.centerIn: parent;
visible: false;
z: 2;
opacity: 0.8;
border.width: 2;
border.color: "#808080";
Text {
id: result;
anchors.centerIn: parent;
font.pointSize: 20;
color: "blue";
font.bold: true;
}
}
ExclusiveGroup{
id:mos;
}
Component{
id:radioStyle;
RadioButtonStyle{
indicator: Rectangle{ //制定选中图标
implicitWidth: 16;
implicitHeight: 12;
radius: 6;
border.color: control.hovered?"darkblue":"gray";
border.width: 1;
Rectangle{
anchors.fill: parent;
visible: control.checked;
color: "#0000A0";
radius: 5;
anchors.margins: 3;
}
}
label: Text {
color: control.activeFocus ? "blue":"black";
text:control.text;
}
}
}
Text {
id: notation;
text: qsTr("Please select the best mobile os:");
anchors.top: parent.top;
anchors.topMargin: 16;
anchors.left: parent.left;
anchors.leftMargin: 8;
}
RadioButton{
id:android;
text: "Android";
exclusiveGroup: mos;
anchors.top: notation.bottom;
anchors.topMargin: 4;
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.top: android.bottom;
anchors.topMargin: 4;
anchors.left: android.left;
activeFocusOnPress: true;
style: radioStyle;
onClicked: resultHolder.visible = false;
}
RadioButton{
id:wp;
text: "Windows Phone";
exclusiveGroup: mos;
anchors.top: ios.bottom;
anchors.topMargin: 4;
anchors.left: ios.left;
activeFocusOnPress: true;
style: radioStyle;
onClicked: resultHolder.visible = false;
}
RadioButton{
id:firefox;
text: "Firefox OS";
exclusiveGroup: mos;
anchors.top: wp.bottom;
anchors.topMargin: 4;
anchors.left: wp.left;
activeFocusOnPress: true;
style: radioStyle;
onClicked: resultHolder.visible = false;
}
RadioButton{
id:sailfish;
text: "Sailfish OS";
exclusiveGroup: mos;
anchors.top: firefox.bottom;
anchors.topMargin: 4;
anchors.left: firefox.left;
activeFocusOnPress: true;
style: radioStyle;
onClicked: resultHolder.visible = false;
}
Button{
id:confirm;
text: "Confirm";
anchors.top: sailfish.bottom;
anchors.topMargin: 8;
anchors.left: notation.left;
onClicked: {
result.text = mos.current.text;
resultHolder.visible = true;
}
}
}
仔细体会中的数据处理,是如何产生互斥,这个是通过自定义的,你自己如何处理呢。复选框道理与这个差不多,自己学会体会,让我们一起进步吧。