在之前的博客中，我们使用的控件都是Qt官方提供的，对于控件的特性也只能被动地接受，为了打破这种束缚，可以按照自己的想法来定义控件。
不过自定义控件必须遵守Qt官方的一套自定义控件规则，在规则之下我们就可以定义属于我们自己的控件啦！
QWidget是所有控件的基类，在自定义控件时均需要继承QWidget，然后通过重写覆盖原有方法或属性的方式来达到自定义控件的目的。
博主对于自定义控件的相关技术掌握程度略浅，这里针对自定义控件仅有两种方法，一种是基于Qt设计师的提供的控件提升方式，这种方式可以对多个控件进行组合，形成一个可复用的新控件；
另一种是纯代码实现方式，这种一般是继承Qt的原生控件，如push button，然后重写里面的对应函数来实现自己想要的功能，下面将对两种方式进行逐一演示。
话不多说，开始上代码：
打开 Qt Qcreator ，新建一个应用程序工程，步骤如下：
项目名称叫WidgetTest ，创建路径根据自己的实际需求选择即可，点击下一步：
点击完成后，项目创建成功，
接下来添加一个UI页面作为自定义控件使用，下面我们采用水平进度条+LCD Number控价组合来作为一个自定义控件，步骤如下：
鼠标右键工程名称，选择添加新文件，
点击完成后，页面创建成功，
在左侧拖入两个控件： 水平进度条、LCD Number，布局如下：
然后点击左侧的编辑按钮，找到widget.ui 文件，双击打开，
找到widget控件，拖入UI编辑器，
选中拖入的widget控件，鼠标右键，选择提升为 ，
填入类名，选择添加，
然后勾选全局包含，点击提升，
此时可以看到，widget控件已被提升为 MyWidget,
此时，运行程序后，我们之前在MyWidget.ui里面添加的控件就会在widget.ui的widget控件里面显示了，
接下来我们实现圆盘与进度条的相互联动功能（当拖动进度条时圆盘转动，当转动圆盘时进度条走动）；
在MyWidget.h中新建四个属性函数，分别用于设置和获取圆盘与进度条的值，
MyWidget.h
#ifndef MYWIDGET_H
#define MYWIDGET_H
#include <QWidget>
namespace Ui {
class MyWidget;
}
class MyWidget : public QWidget
{
Q_OBJECT
public:
explicit MyWidget(QWidget *parent = nullptr);
~MyWidget();
//四个public 属性函数，分别用于设置和获取圆盘与进度条的值
void setDialValue(int value);
int getDialValue();
void setSliderValue(int value);
int getSliderValue();
private:
Ui::MyWidget *ui;
};
#endif // MYWIDGET_H
MyWidget.cpp
#include "mywidget.h"
#include "ui_mywidget.h"
MyWidget::MyWidget(QWidget *parent) :
QWidget(parent),
ui(new Ui::MyWidget)
{
ui->setupUi(this);
ui->dial->setMaximum(100);
ui->dial->setMinimum(0);
ui->dial->setPageStep(1);
ui->horizontalScrollBar->setMaximum(100);
ui->horizontalScrollBar->setMinimum(0);
ui->horizontalScrollBar->setPageStep(1);
connect(ui->dial,SIGNAL(valueChanged(int)),ui->horizontalScrollBar,SLOT(setValue(int)));
connect(ui->horizontalScrollBar,SIGNAL(valueChanged(int)),ui->dial,SLOT(setValue(int)));
}
MyWidget::~MyWidget()
{
delete ui;
}
void MyWidget::setDialValue(int value)
{
ui->dial->setValue(value);
}
int MyWidget::getDialValue()
{
return ui->dial->value();
}
void MyWidget::setSliderValue(int value)
{
ui->horizontalScrollBar->setValue(value);
}
int MyWidget::getSliderValue()
{
return ui->horizontalScrollBar->value();
}
接下来在主程序页面 widget.ui中添加两个按钮，用于设置和获取进度条的值，实现基础控价的属性设置功能；
widget.h
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = nullptr);
~Widget();
private slots:
void setSliderValue();
void getSliderValue();
private:
Ui::Widget *ui;
};
#endif // WIDGET_H
widget.cpp
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
connect(ui->setBT,SIGNAL(clicked()),this,SLOT(setSliderValue()));
connect(ui->getBT,SIGNAL(clicked()),this,SLOT(getSliderValue()));
}
Widget::~Widget()
{
delete ui;
}
void Widget::setSliderValue()
{
ui->widget->setSliderValue(ui->setSP->value());
}
void Widget::getSliderValue()
{
ui->getSP->setValue(ui->widget->getSliderValue());
}
运行效果：
点击圆盘或进度条时二者可以联动，对进度条进行设置时，进度条能够走到指定的位置，也能获取当前进度条的实时位置；
这里有一个比较优秀的博客介绍，绘制漂亮的仪表盘，博客链接如下 ：
另外还有一个时钟的博客：
下一篇博客：
