qml Button RadioButton GroupBox CheckBox 按钮控件类

Button

导入 import QtQuick.Controls 1.4 或 import QtQuick.Controls 2.4
根据自己的编译器选择相应的版本
新建一个Qt Quick工程，然后在window对象中调用我们的Button控件
属性checkable默认是不选中的，即触发按钮，按下去马上弹起来。当设置为true时，Button变为切换按钮，有两种状态：按下/弹起
添加一些信号槽连接

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

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")

Button{
id:button
anchors.centerIn: parent
text: "我是按钮"
checkable: true

background: Rectangle{
implicitHeight: 30 //高度
implicitWidth: 100 //长度
color: button.pressed ? "blue": "red" //按下去颜色的变换
border.width: 2 //边框
border.color: "slategray" //颜色
}

onClicked: {
console.log("button被按了！") //信号槽设置
}
}
}

选择框控件

单选框RadioButton

用于多选一的场景，使用时需要通过exclusiveGroup属性为其制定一个分组，也可以和GroupBox结合使用,

ExclusiveGroup(互斥分组)，这不是controls2的控件，所以我们需要导入QtQuick.Controls 1.4，ExclusiveGroup本身是不可见元素，用于将一些可选择元素组合到一起，供用户选择其中的一个选项

属性:

text:单选按钮的文本
checked:指示RadioButton是否被选中
hovered:指示指针是否悬停在RadioButton上
pressed:在按钮被按下时为true
义了3个单选框，将这3个单选框放到了一个矩形中，采用锚定位的方式anchors.top简单管理一下位置。定义ExclusiveGroup对象，在RadioButton中设置exclusiveGroup属性，可以实现单选框之间的互斥选择

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

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
visible: true
width: 480
height: 320
title: qsTr("RadioButton")

ExclusiveGroup{
id: exclusivegroup
}

Rectangle{
width: 50
height: 100
anchors.centerIn: parent
RadioButton{
id: radio1
text: "1号"
checked: true
exclusiveGroup: exclusivegroup
}
RadioButton{
id: radio2
anchors.top: radio1.bottom
anchors.topMargin: 10
text: "2号"
checked: false
exclusiveGroup: exclusivegroup
}
RadioButton{
id: radio3
anchors.top: radio2.bottom
anchors.topMargin: 10
text: "3号"
checked: false
exclusiveGroup: exclusivegroup
}
}
}

分组框GroupBox

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

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
visible: true
width: 480
height: 320
title: qsTr("GroupBox")

GroupBox{
id: groupbox
title: "选择:"
width: 200
height: 180
anchors.centerIn: parent

RadioButton{
id: radio1
text: "我是1号"
checked: true
checkable: flase
}
RadioButton{
id: radio2
anchors.top: radio1.bottom
anchors.topMargin: 4
text: "我是2号"
checked: false
}
RadioButton{
id: radio3
anchors.top: radio2.bottom
anchors.topMargin: 4
text: "我是3号"
checked: false
}
}
}

多选框 CheckBox

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

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
visible: true
width: 240
height: 160
title: qsTr("CheckBox")

CheckBox{
anchors.centerIn: parent
id: control
text: "选我"
spacing: 3

indicator:Rectangle{
id:rectangel1
implicitWidth: 26
implicitHeight: 26
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 3 //边缘圆滑度
border.color: control.down ? "orange" : "green" //按下去改变为橘黄色

Rectangle
{
id: rectangle2
width: 14
height: 14
x: 6
y: 6
radius: 2
color: control.down ? "orange" : "green"
visible: control.checked //可视化属性
}
}
}

}