QT学习之自定义控件

article/2025/11/9 8:58:43

一、自定义控件封装

1、添加新文件 - Qt – 设计师界面类 (smallwidget.h smallwidget.cpp smallwidget.ui)

2、在添加的新 smallwidget.ui中设计 QSpinBox和QSlider 两个控件，组合在一起

在这里插入图片描述

3、主UI界面中使用自定义控件，拖拽一个Widget，点击提升为刚在添加的新控件类的名字smallwidget，点击添加，点击提升，显示为如下效果（已经添加了两个按钮用来调用setnum 和 getnum 新接口）

在这里插入图片描述

4、实现功能，改变数字，滑动条跟着移动，信号槽监听。

在添加的新控件类的smallwidget.cpp文件中的构造函数中添加代码

#include "smallwidget.h"
#include "ui_smallwidget.h"smallwidget::smallwidget(QWidget *parent) :QWidget(parent),ui(new Ui::smallwidget)
{ui->setupUi(this);void(QSpinBox:: *spsignal)(int) = &QSpinBox::valueChanged;//槽函数有重载版本,需要用函数指针,信号函数和槽函数的参数要一一对应connect(ui->spinBox, spsignal, ui->horizontalSlider, &QSlider::setValue);connect(ui->horizontalSlider, &QSlider::valueChanged, ui->spinBox, &QSpinBox::setValue);}

5、在新控件类中提供 getNum 和 setNum对外接口，

在smallwidget.h中添加

#ifndef SMALLWIDGET_H
#define SMALLWIDGET_H#include <QWidget>namespace Ui {
class smallwidget;
}class smallwidget : public QWidget
{Q_OBJECTpublic:explicit smallwidget(QWidget *parent = nullptr);~smallwidget();//添加///void setNum(int val);int getNum();///private:Ui::smallwidget *ui;
};#endif // SMALLWIDGET_H

在smallwidget.cpp中添加

void smallwidget::setNum(int val)
{ui->spinBox->valueChanged(val);}int smallwidget::getNum()
{return ui->spinBox->value();
}

6、测试接口

在主.cpp中添加代码，调用接口

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);connect(ui->btn1, &QPushButton::clicked, [=](){ui->widget->setNum(50);//设置为进度条的一半});connect(ui->btn2, &QPushButton::clicked, [=](){qDebug()<< ui->widget->getNum();//获取当前的值});}MainWindow::~MainWindow()
{delete ui;
}