树莓派Qt系列教程7：按钮控件类

2020-7-15 09:47| 发布者: dasi| 查看: 9309| 评论: 0|原作者: dasi

摘要: 这一节我们讲学习按钮类的控件。

前言

大家想一下，我们日常见到的界面，是不是几乎都有按钮的身影！所以这一节，我们将来学习Qt中的按钮控件类。

Button

Button控件可以说是最常用的控件之一了，用户点击按钮可能会触发pressed,released,clicked信号，这一节中我们要导入上一节中提到的控件库QtQuick.Controls2。

`1`	`import QtQuick.Controls 2.3`

第一步还是新建一个Qt Quick工程，然后在window对象中调用我们的Button控件

1Button{
2       id:button
3       anchors.centerIn: parent
4       text: "我是按钮"
5       checkable: true
6}

运行一下，看界面中间是不是多了一个按钮！其中的属性checkable默认是不选中的，即触发按钮，按下去马上弹起来。当设置为true时，Button变为切换按钮，有两种状态：按下/弹起。按下按钮，不会有后续的操作，因为我们还没有设置信号槽连接呢，继续添加代码。定制一个自己喜欢的按钮风格。

01Button{
02        id:button
03        anchors.centerIn: parent
04        text: "我是按钮"
05        checkable: true
06 
07        background: Rectangle{
08                    implicitHeight: 25
09                    implicitWidth: 100
10                    color: button.pressed ? "grey": "green"
11                    border.width: 2
12                    border.color: "slategray"
13                }
14 
15        onClicked: {
16            console.log("哎呀，我被按到了！！！")
17        }
18    }

运行可以看到，我们定制了一个长度为100，高度为25，边框为2，颜色为slategray的按钮，按钮的颜色按下去有一个颜色的变换，这里用到了信号槽的用法。同样onClicked也是一个信号槽的设置。点击按钮，会输出“哎呀，我被按到了！！！”

选择框控件

选择框控件分为单选框radiobutton、多选框 checkbox和分组框groupBox，因为很多属性是相同的，所有我们合到一起讲。如果我们的选项集很多的时候，还可以使用Radio Delegate和Check Delegate控件。

RadioBox

我们先来说一下ExclusiveGroup(互斥分组)，这不是controls2的控件，所以我们需要导入QtQuick.Controls 1.4，ExclusiveGroup本身是不可见元素，用于将一些可选择元素组合到一起，供用户选择其中的一个选项。我们可以在ExclusiveGroup对象中定义Rdiobutton、CheckBox等元素，此时不需要设置她们的exclusiveGroup属性，也可以定义一个只设置了id的ExclusiveGroup对象，在别处定义Rdiobutton、CheckBox等元素时通过id初始化这些元素的exclusiveGroup属性。如果导入controls2，则可以通过GroupBox来实现分组。
RadioButton用于多选一的场景，使用时需要通过exclusiveGroup属性为其制定一个分组，也可以和GroupBox结合使用。它的属性也很简单。

text:单选按钮的文本
checked:指示RadioButton是否被选中
hovered:指示指针是否悬停在RadioButton上
pressed:在按钮被按下时为true

我们通过下面的例子先来来看一下ExclusiveGroup互斥分组。将button部分的代码注释掉或者新建一个工程，输入以下代码

01import QtQuick 2.9
02import QtQuick.Window 2.2
03import QtQuick.Controls 1.4
04 
05Window {
06    visible: true
07    width: 640
08    height: 480
09    title: qsTr("RadioButton")
10 
11    ExclusiveGroup{
12        id: exclusivegroup
13     }
14 
15    Rectangle{
16        width: 200
17        height: 200
18        anchors.centerIn: parent
19        RadioButton{
20            id: radio1
21            text: "我是1号"
22            checked: true
23            exclusiveGroup: exclusivegroup
24        }
25        RadioButton{
26            id: radio2
27            anchors.top: radio1.bottom
28            anchors.topMargin: 10
29            text: "我是2号"
30            checked: false
31            exclusiveGroup: exclusivegroup
32        }
33        RadioButton{
34            id: radio3
35            anchors.top: radio2.bottom
36            anchors.topMargin: 10
37            text: "我是3号"
38            checked: false
39            exclusiveGroup: exclusivegroup
40        }
41    }
42}

定义了3个单选框，因为还没有学习布局管理的部分，所以将这3个单选框放到了一个矩形中，采用锚定位的方式anchors.top简单管理一下位置。定义ExclusiveGroup对象，然后在RadioButton中设置exclusiveGroup属性，这样就可以实现单选框之间的互斥选择了。

运行看一下效果。

GroupBox

注释掉当前的代码，采用GroupBox的方式对单选框有一个分组。

01import QtQuick 2.9
02import QtQuick.Window 2.2
03import QtQuick.Controls 2.3
04 
05Window {
06    visible: true
07    width: 640
08    height: 480
09    title: qsTr("GroupBox")
10 
11    GroupBox{
12        id: groupbox
13        title: "选择:"
14        width: 200
15        height: 180
16        anchors.centerIn: parent
17 
18        RadioButton{
19            id: radio1
20            text: "我是1号"
21            checked: true
22            checkable: flase
23        }
24        RadioButton{
25            id: radio2
26            anchors.top: radio1.bottom
27            anchors.topMargin: 4
28            text: "我是2号"
29            checked: false
30        }
31        RadioButton{
32            id: radio3
33            anchors.top: radio2.bottom
34            anchors.topMargin: 4
35            text: "我是3号"
36            checked: false
37        }
38    }
39}

对比可以发现，其实RadioButton部分的定义属性都是一样的，只不过我们是将其定义在了GroupBox对象中。RadioButton也可以自定义style，使用方法和button一样，属性也差不多，只是在controls1中，需要导入QtQuick.Controls.Styles模块。

`1`	`import QtQuick.Controls.Styles 1.2`

我们运行程序，和上一种方法对比一下效果。

CheckBox

CheckBox的用法和RadioButton差不多，我们就不强调它的使用了，主要是讲一下没讲到的控件自定义的部分。controls1和2的对于style属性的使用略有不同，大家自行查看一下用法，我们这里举一个官方文档的例程。

01import QtQuick 2.9
02import QtQuick.Window 2.2
03import QtQuick.Controls 2.3
04 
05Window {
06    visible: true
07    width: 640
08    height: 480
09    title: qsTr("CheckBox")
10 
11    CheckBox{
12        anchors.centerIn: parent
13        id: control
14        text: "选我选我选我！！！"
15        spacing: 3
16 
17        indicator:Rectangle{
18            id:rectangel1
19            implicitWidth: 26
20            implicitHeight: 26
21            x: control.leftPadding
22            y: parent.height / 2 - height / 2
23            radius: 3
24            border.color: control.down ? "orange" : "green"
25 
26            Rectangle
27            {
28                id: rectangle2
29                width: 14
30                height: 14
31                x: 6
32                y: 6
33                radius: 2
34                color: control.down ? "orange" : "green"
35                visible: control.checked
36            }
37        }
38    }
39 
40}

定义了两个矩形，属于包含的关系，rectangel1为一个26*26的正方形，位置在checkbox的中心，边缘圆滑度为3，当点击复选框时颜色变为橘黄色，注意哦！不是选中了改变颜色，而是按下去改变。接着在大矩形内部定义一个小矩形，长宽起始位置设置好，填充颜色也是按下去改变。最后的属性visible,是可视化属性，CheckBoxc的hecked属性默认是flase(不选中)，当选择复选框以后，visible随之可视。
看一下运行效果：

总结

源码：7.zip

关于按钮类的控件就先讲这些。其实，控件类的使用是相通的，使用方法上也没有太大的差别，唯一不同的可能就是各个属性之间的用法，有的小伙伴可能对于属性还有点迷，这个方面还是需要自己动手多练习，除了文章中的例程，也可以自己编写或者查找相关的代码。从联系中掌握控件及其属性的用法。

227 顶一下

刚表态过的朋友 (227 人)

收藏邀请

上一篇：树莓派Qt系列教程6： QML语言基础下一篇：树莓派Qt系列教程8：信号与槽

树莓派Qt系列教程7： 按钮控件类

前言