qml学习------------（RadioButton）单选框

最新推荐文章于 2024-08-20 02:23:12 发布

我只是一只狗

最新推荐文章于 2024-08-20 02:23:12 发布

阅读量5.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： c++

本文链接：https://blog.youkuaiyun.com/u011619422/article/details/48547149

c++ 专栏收录该内容

229 篇文章

订阅专栏

这篇博客主要介绍了在Qt QML中如何使用RadioButton，包括 ExclusiveGroup 的应用，用于实现单选框的互斥操作，以及自定义RadioButton的样式，通过RadioButtonStyle设置选中状态下的文本颜色。博主强调，其他组件知识之前已经学习过，所以重点在于这两个方面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次学习了qml中的单选框的使用，在单选框的使用过程中，用到了一些的关联的东西，这里都来总结下，当做学习。
1。ExclusiveGroup （互斥分组），用来将若干个元素组合在一起，只需要设置一个id就是了
2. 定了单选框的风格组件（Component），在其中通过RadioButtonStyle来设置单选框的风格，同时设置选中状态下的文本颜色

其他的东西都在以前都学过了，都是一些常用的组件的学习而已。下面来看下具体的源码

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;
        anchors.centerIn: parent;
        visible: false;
        z: 2;

        opacity: 0.8;

        border.width: 2;
        border.color: "#808080";

        Text{

            id:result;
            anchors.centerIn: parent;
            font.pixelSize: 20;
            color:"blue";
            font.bold: true;
        }
    }


    //定义的互斥分组
    ExclusiveGroup{

        id: mos;
    }


    // 单选框框风格组件
    Component{

        id: radioStyle;
        RadioButtonStyle{

            indicator: Rectangle{
                implicitHeight: 12;
                implicitWidth: 16;

                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:"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: notation.left;
        activeFocusOnPress: true;
        style:radioStyle;
        onClicked: resultHolder.visible = false;


    }



    RadioButton{

        id: wp;
        text:"wp_phone";
        exclusiveGroup: mos;
        anchors.top: ios.bottom;
        anchors.topMargin: 4;
        anchors.left: notation.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: notation.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: notation.left;
        activeFocusOnPress: true;
        style:radioStyle;
        onClicked: resultHolder.visible = false;


    }



    //提交按钮
    Button{
        id: confirm;
        text:"Confirm";

        anchors.top: sailfish.bottom;
        anchors.topMargin: 4;
        anchors.left: notation.left;


        onClicked: {
            result.text = mos.current.text;
            resultHolder.visible = true;
        }

    }



}