Qt Quick 点选框的使用，与自定义单选框

本例子为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;

        }
    }

}

 仔细体会中的数据处理，是如何产生互斥，这个是通过自定义的，你自己如何处理呢。复选框道理与这个差不多，自己学会体会，让我们一起进步吧。