兼容Qt4/Qt5版本Qml控件CheckBox

发表于

复选框显示一个可切换(选中)或关闭(未选中)的选项按钮.

描述

复选框显示一个可切换(选中)或关闭(未选中)的选项按钮.复选框通常用于从一组选项中选择一个或多个选项.

1
2
3
4
CheckBox {
    checked: true
    text: "Default"
}

示例

CheckBox

属性文档

  • background: Item
    该属性保留着控件的背景项.

  • checked : bool
    该属性保留着控件是否选中.

  • contentItem : Item
    该属性保留着自定义内容元素.

  • down : bool
    此属性保留按钮是否在视觉上向下。
    更多相关请查看pressed.

  • indicator : Item
    此属性保存着指示器项。

  • pressed : bool
    此属性保存按钮是否被物理按下。可通过触摸或按键事件按下按钮。
    更多相关请查看down.

  • text : string
    此属性保存按钮的文本描述。
    更多相关请查看contentItem.

关于更新

  • 文章首发于微信公众号你才小学生(nicaixiaoxuesheng)
  • 后续更新于Qtbig哥(qtbig.com)

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import QtQuick 2.0

Item {
    id: root

    implicitWidth: backgroundId.item.width
    implicitHeight: backgroundId.item.height

    property bool  checked: false
    property bool down: false
    property bool pressed: false
    property string text: "text"

    property Component indicator : Rectangle {
        implicitWidth: 20
        implicitHeight: 20
        radius: 3
        border.color: "gray"
        y: (root.height - height)/2

        Rectangle {
            anchors.centerIn: parent
            width: 10; height: 10
            radius: 2
            color: "gray"
            visible: root.checked
        }
    }

    property Component contentItem : Text {
        height: root.height
        text: root.text
        color: root.down ? "black" : "black"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        x: 25
    }

    property Component background : Rectangle {
        width: 60; height: 20
        color: "#00000000"
    }

    Loader {
        id: backgroundId
        sourceComponent: background
    }

    Loader {
        id: indicatorId
        sourceComponent: indicator
    }

    Loader {
        id: contentItemId
        sourceComponent: contentItem
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: {
            down = !down
            checked = down
        }
    }
}

示例源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import QtQuick 2.0
import "../" as My

Rectangle {
    width: 70
    height: 150

    Row {
        anchors.centerIn: parent
        spacing: 150

        Column {
            spacing: 30

            /* Default */
            Repeater {
                model: ["gray", "red", "blue"]

                My.CheckBox {
                    id: checkBox
                    text: "默认样式" + (index + 1)

                    indicator : Rectangle {
                        implicitWidth: 20
                        implicitHeight: 20
                        radius: 3
                        border.color: "gray"
                        y: (checkBox.height - height)/2

                        Rectangle {
                            anchors.centerIn: parent
                            width: 10; height: 10
                            radius: 2
                            color: modelData
                            visible: checkBox.checked
                        }
                    }
                }
            }
        }

        Column {
            spacing: 30

            Repeater {
                model: ["gray", "red", "blue"]
                My.CheckBox {
                    id: checkBox1
                    text: "圆形样式" + (index + 1)
                    indicator : Rectangle {
                        implicitWidth: 20
                        implicitHeight: implicitWidth
                        radius: implicitWidth/2
                        border.color: "#e4846c"
                        y: (checkBox1.height - height)/2

                        Rectangle {
                            anchors.centerIn: parent
                            width: 10; height: width
                            radius: width/2
                            color: modelData
                            visible: checkBox1.checked
                        }
                    }
                }
            }
        }

        Column {
            spacing: 30

            My.CheckBox {
                id: checkBox2
                text: "符号样式1"
                indicator : Rectangle {
                    implicitWidth: 20
                    implicitHeight: implicitWidth
                    border.color: "lightblue"
                    y: (checkBox2.height - height)/2

                    Text {
                        anchors.centerIn: parent
                        font.pixelSize: 16
                        text: "√"
                        visible: checkBox2.checked
                    }
                }
            }

            My.CheckBox {
                id: checkBox3
                text: "符号样式2"
                indicator : Rectangle {
                    implicitWidth: 20
                    implicitHeight: implicitWidth
                    border.color: "lightblue"
                    y: (checkBox3.height - height)/2

                    Text {
                        anchors.centerIn: parent
                        font.pixelSize: 16
                        text: checkBox3.checked ? "√" : "×"
                    }
                }
            }

            My.CheckBox {
                id: checkBox4
                text: "符号样式3"
                indicator : Rectangle {
                    implicitWidth: 20
                    implicitHeight: implicitWidth
                    border.color: "lightblue"
                    y: (checkBox4.height - height)/2

                    Text {
                        anchors.centerIn: parent
                        font.pixelSize: 16
                        text: checkBox4.checked ? "" : "-"
                    }
                }
            }
        }
    }
}