QT - QML 9.4.2实例 RadioButton & exclusiveGroup

qt quick 9.4.2实例

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

import QtQuick.Window 2.2


Window {

    title: qsTr("选择你喜欢的手机操作系统")
    visible: true
    width: 640
    height: 600
    color: "lightblue"

    Rectangle{  //弹出对话框样式
        id:resultHolder
        color: "black"
        width: 400
        height: 120
        anchors.centerIn: parent  //anchors锚布局
        visible: false
        z:2
        opacity: 0.8   //透明度
        border.width: 23
        border.color: "red"
        Text {
            id: result
            anchors.centerIn: parent
            font.pointSize: 40
            color: "blue"
            font.bold:true
        }
    }

    ExclusiveGroup{    //头文件
        id:mos
    }

    Component{
        id:radioStyle
        RadioButtonStyle{
            indicator: Rectangle{     //显示器
                implicitWidth: 64   //潜在宽度，椭圆边框宽度
                implicitHeight: 64  //椭圆边框高度
                radius:12    //直角圆半径
                border.color: control.hovered ?"darkblue":"gray"
                border.width: 2
                Rectangle{
                    id:visrectangle
                    anchors.fill: parent
                    visible: control.checked  //
                    color: "black"
                    radius: 10
                    anchors.margins: 6
                }
            }
            label: Text {
                color: control.activeFocus?"blue":"black"
                text:control.text
            }
        }
    }

    Text {
        id: notation
        text: "please select the best mobile os:"
        //font.bold:true
        //font.pixelSize: 12
        anchors.top:parent.top
        anchors.topMargin: 32
        anchors.left: parent.left
        anchors.leftMargin: 16
    }

    RadioButton{     //android
        id:android
        text: "Android"
        exclusiveGroup:mos
        anchors.top: notation.bottom
        anchors.topMargin: 8
        anchors.left: notation.left  //符号 注释 记号
        anchors.leftMargin: 40

        checked: true   //如果控件被选中 属性为真
        //focus:true  //焦点属性

        activeFocusOnPress: true
        style:radioStyle
        onClicked: resultHolder.visible = false
    }

    RadioButton{     //ios
        id:ios
        text: "ios"
        exclusiveGroup:mos
        anchors.top: android.bottom
        anchors.topMargin: 8
        anchors.left: android.left  //符号 注释 记号
        //checked: true
        //focus:true
        activeFocusOnPress: true
        style:radioStyle
        onClicked: resultHolder.visible = false  //
    }

    RadioButton{     //wp
        id:wp
        text: "wp"
        exclusiveGroup:mos
        anchors.top: ios.bottom
        anchors.topMargin: 8
        anchors.left: ios.left  //符号 注释 记号
        //checked: true
       // focus:true
        activeFocusOnPress: true
        style:radioStyle
        onClicked: resultHolder.visible=false
    }

    RadioButton{     //firefox
        id:firefox
        text: "firefox"
        exclusiveGroup:mos
        anchors.top: wp.bottom
        anchors.topMargin: 8
        anchors.left: wp.left  //符号 注释 记号
        //checked: true
       // focus:true
        activeFocusOnPress: true
        style:radioStyle
        onClicked: resultHolder.visible=false
    }

    RadioButton{     //wp
        id:sailfish
        text: "sailfish OS"
        exclusiveGroup:mos
        anchors.top: firefox.bottom
        anchors.topMargin: 8
        anchors.left: firefox.left  //符号 注释 记号
       // checked: true
       // focus:true
        activeFocusOnPress: true
        style:radioStyle
        onClicked: resultHolder.visible=false
    }

    Button{
        id:confirm
        text: "confirm"
        anchors.top:sailfish.bottom
        anchors.topMargin: 16
        anchors.left: notation.left
        onClicked: {
            result.text = mos.current.text
            resultHolder.visible = true
        }

    }

}

 

 - - END - -