五、Qt控件使用说明大全

1、Qwidget(开始控件入门)

QWidget类是所有用户界面对象的基类

常用于做顶层小部件或者子小部件

我们怎么看QPushButton是继承QWidget类？

我们知道，实际上确实是继承的，不过没有直接继承，而是间接继承。

通过帮助文档，索引直接搜索QPushButton。

由此可以看出，QPushButton是继承QAbstractButton类。

而QAbstractButton又是直接继承QWidget类的。

所以说QPushButton也是继承QWidget类。

同理我们再看下QLabel：

由此可以看出，QLabel是继承QFrame类。

由此可以看出来：QFrame是继承QWidget类的。

所以说QLabel也是继承QWidget类。

也就是验证了"QWidget类是所有用户界面对象的基类"。

随后我们在原来窗口上添加一个Widget窗口，并设置它的样式表，主要设置background-color，它的值有3种方式表示：一种是英文字母red，一种是rgb()，还有一种就是十六进制表示#DCDCDC。后两种我们可以通过百度查找RGB颜色对照表选一个合适的。

使用Widget可以当做一个背景来美化我们的界面。

我们在新建的Widget再放一个QLabel。

2、QPushButton

常用的四个信号：

我们点击 QAbstractButton：

翻译过来就是点击按下松手开关。

我们在新项目中拉动一个QPushButton到窗口中。

右键点击按钮，转到槽，分别选择clicked()、pressed()、released()，编辑项目文件如下：

复制代码

//widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    delete ui;
}


void Widget::on_pushButton_clicked()
{
    qDebug() << "clicked" << endl;
}

void Widget::on_pushButton_pressed()
{
    qDebug() << "pressed" << endl;
}

void Widget::on_pushButton_released()
{
    qDebug() << "released" << endl;
}

执行之后：

最后我们说明一下toggled(bool)的作用，这个使用起来比较特殊，除了操作对应的槽函数（以上面操作一样）之外，还要在构造函数里添加一段代码：

复制代码

ui->pushButton->setCheckable(true);//设置可选中

展示的效果是：在点击按钮的时候底色不会回弹原来的颜色，而是保持了按下的效果。以下是按下前后的效果：

还可以将选中的状态显示出来怎么做呢？

主要就是添加一个单词如下：

复制代码

void Widget::on_pushButton_toggled(bool checked)
{
    qDebug() << "toggled" << checked << endl;
}

这里运行一下，显示效果：

下面我们将设置一个音乐播放器按钮：

本次实验实现的效果是，一个音乐播放器的按钮，比如当前状态是未播放状态⏸️，当鼠标放在该按钮上是，按钮有微微点亮状态，点击按钮，是播放时的按钮▶，当鼠标放在该按钮上是，按钮有微微点亮状态。我们在实现的过程中需要注意的要点是：

1.会准备四个图片，我们将它作为资源添加进来；

2.在主窗口下新建一个Widget，我们实现了它的位置大小以及背景颜色；并把它作为一个容器，在它上面新建了一个按钮，文本为空，设置位置和大小；

3.我们将编辑.qss文件，添加.qss文件时要建立与项目的联系，也就是固定代码COPY到构造函数里，之后我们根据到刚刚新建的按钮的名字，编写qss文件，具体代码如下（我们要重点学习它的设置格式）：（代码部分省略，将会附到附件文件名是28）

css 复制代码

QPushButton#pushButton_2 { border-image:url(:/icons/btn_play1.png)}
QPushButton#pushButton_2:hover { border-image:url(:/icons/btn_play2.png)}
QPushButton#pushButton_2:checked { border-image:url(:/icons/btn_pause1.png)}
QPushButton#pushButton_2:checked:hover{ border-image:url(:/icons/btn_pause2.png)}

3、QRadioButton（单选按钮）

它长什么样子？

由于QRadioButton样式比较普通不太好看，我们最终实现的效果如下（怎么实现的呢？）

我们创建了多个QRadioButton，选中发现他们都是互斥的。为什么？因为他们在同一个父类当中，也就是说只能选中一个。我们从以下也可以看出来，他们的父对象都是QWidget。

那我们怎么将他们分开呢？

假设我们的课程是多选的，怎么做？

其实每个QRadioButton单独都有exclusive属性的，不过这个属性已经被按钮组的exclusive属性控制了，所以单独改是不起作用的。（多选其实是没有必要的，它其实是个单选按钮，多选按钮时CheckBox，很相似的，下节将会学习）

接下来实现下一个现象：

这是发现文本无法居中，其实用QPushButton就可以实现：

我们看下效果：

常用的信号：

女的也这么操作，转到槽函数，我们编辑槽函数：

复制代码

void Widget::on_radioButton_toggled(bool checked)
{
    qDebug() << "男性别状态：" << checked << endl;
}

void Widget::on_radioButton_2_toggled(bool checked)
{
    qDebug() << "女性别状态：" << checked << endl;
}

执行是什么效果？

当第二次点击女时，也触发了男的开关信号，因为男的开关状态已经被改变了，同样我们再次选中男的，女的开关信号也被触发了。

4、QCheckBox（复选按钮）

主要学习两个方面：1.自定义样式 2.常用信号

下面我们美化下它的样式：

常用信号：

由这个信号函数我们可以看出，它有int参数，我们知道这是三种状态，会由三种状态，这里我们槽函数我们使用switch语句：

复制代码

void Widget::on_checkBox_stateChanged(int arg1)
{
    switch(arg1) {
    case Qt::Checked:
        qDebug() << "选中的状态" << endl;
        break;
    case Qt::PartiallyChecked:
        qDebug() << "半选中的状态" << endl;
        break;
    case Qt::Unchecked:
        qDebug() << "未选中的状态" << endl;
        break;
    }
}

其中case的值是一个枚举类型的数值：