02 - QT 自定义控件封装

• 目标： 封装一个滑动改变显示数值的小控件（Spin Box + Horizontal Slider）
• 创建工程之后， 再新增一个smallwidget类， 在这个控件类中实现自定义的控件部分；

1. smallwidget

1.1 设计UI（smallwidget.ui）

• 拖动Spin Box和Horizontal Slider控件， 水平布局， 再调整整个widget的大小， 为这个widget修改name：
• 

1.2 smallwidget.h

• 新增了两个函数， 等下有用

#ifndef SMALLWIDGET_H
#define SMALLWIDGET_H



// 封装自定义控件
#include 

namespace Ui {
class smallWidget;
}

class smallWidget : public QWidget
{
   Q_OBJECT

public:
   explicit smallWidget(QWidget *parent = nullptr);
   ~smallWidget();

   // 设置数字
   void setNum(int num);

   // 获取数字
   int getNum();

private:
   Ui::smallWidget *ui;
};

#endif // SMALLWIDGET_H

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

1.3 smallwidget.cpp

• 实现绑定信号和槽， 使得拖动slider的时候， Spin Box 数值会变化； Spin Box数值变化的时候， Slider会滑动；

• 注意！： 经过查阅文档之后， 发现QSpinBox的Signals中有两个valueChanged信号， 所以， 这里连接的时候会注意重载；

#include "smallwidget.h"
#include "ui_smallwidget.h"

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

//    函数指针
//    int(*p)(int, int); 这个语句就定义了一个指向函数的指针变量 p。
//    首先它是一个指针变量，所以要有一个“*”，即（*p）；其次前面的 int 表示这个指针变量可以指向返回值类型为 int 型的函数；后面括号中的两个 int 表示这个指针变量可以指向有两个参数且都是 int 型的函数。

//    两个连接， QSpinBox移动， QSlider移动；QSlider移动， QSpinBox移动
//    查阅文档， 发现，QSpinBox的Signals中有两个valueChanged， 所以这里关于信号重载要处理一下， 否则连接会报错
//            void valueChanged(int i)
//            void valueChanged(const QString &text)

//    函数指针写法
    //定义了一个指针变量 p，该指针变量可以指向返回值类型为 int 型，且有两个整型参数的函数。p 的类型为 int(*)(int，int)。
    //函数返回值类型 (* 指针变量名) (函数参数列表);
    //要加作用域
    void (QSpinBox:: * SB)(int) = &QSpinBox::valueChanged;
    connect(ui->spinBox, SB, ui->horizontalSlider, &QSlider::setValue);

    connect(ui->horizontalSlider, &QSlider::valueChanged, ui->spinBox, &QSpinBox::setValue);

}

// 实现函数后， 要与widget关联
void smallWidget::setNum(int num)
{
    ui->spinBox->setValue(num);
}

int smallWidget::getNum()
{
    return ui->spinBox->value();
}


smallWidget::~smallWidget()
{
    delete ui;
}
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

• 以上， 自定义控件就封装好了；

2. widget

• 在这个主控件中， 使用自定义控件；
• 可以看到类smallwidget也是继承自QWidget， 所以， 这里可以使用widget控件接收， 如下图所示：
• 

2.1 提升类（即设置自定义控件类）

2.2 widget.cpp

• widget头文件中大致没有什么修改的内容， 所以这里跳过到widget.cpp
• 提升之后， widget.ui中的控件smallwidget（对象名也改过了）就可以直接使用自定义控件类中封装好的两个方法

#include "widget.h"
#include "ui_widget.h"
#include 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

//    获取控件当前的值
    connect(ui->btn_get, &QPushButton::clicked, this, [=](){
       qDebug() << ui->smallwidget->getNum();
    });

//    设置控件值到一半
    connect(ui->btn_set, &QPushButton::clicked, this, [=](){
      ui->smallwidget->setNum(50);	
    });
}

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


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