QML 设计自定义样式CheckBox,可改变字体大小

将自定义的代码封装成组件:

myCheckBox.qml

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.2


Rectangle {

    property string str:""
    property int langrageSize:25
    property alias gl_checked: ll.checked
    property alias gl_exclusiveGroup: ll.exclusiveGroup
    property alias gl_checkedState:ll.checkedState//0未选中,2选中
    signal gl_clicked;


    width: (ll.width + str.length)
    height: langrageSize

    CheckBox
    {
        id:ll
        style:CheckBoxStyle{
            indicator:Rectangle{
                id:functChose
                implicitWidth: langrageSize
                implicitHeight: langrageSize
                radius: langrageSize
                border.color: control.activeFocus ? "darkblue" : "gray"
                border.width: 2
                Rectangle {
                    visible: control.checked
                    color: "#555"
                    border.color: "#333"
                    radius: langrageSize
                    anchors.margins: 4
                    anchors.fill: parent
                }
            }
            label: Label{
                id:string
                text:str
                font.pixelSize: langrageSize-5
            }
        }
    }
}

添加互斥事件:ExclusiveGroup

 Rectangle
            {
                width: 200
                height:50
                anchors{top:sureLabel.bottom;left:sureLabel.left}
                ExclusiveGroup//添加互斥事件
                {
                    id: chose;
                }

                Row
                {
                    spacing:25

                    myCheckBox
                    {
                        str:"歇业"
                        langrageSize: 22
                        gl_checked: true
                        gl_exclusiveGroup: chose
                        onGl_checkedStateChanged: {
                            if(gl_checkedState)
                            {
                                i = 1;
                            }
                        }
                    }

                    myCheckBox
                    {
                        str:"下班"
                        langrageSize: 22
                        gl_checked: false
                        gl_exclusiveGroup: chose
                        onGl_checkedStateChanged: {
                            if(gl_checkedState)
                            {
                                i = 2;
                            }
                        }
                    }
                }
            }


猜你喜欢

转载自blog.csdn.net/bootleader/article/details/76651846
QML
今日推荐