在之前的博客中,我们使用的控件都是Qt官方提供的,对于控件的特性也只能被动地接受,为了打破这种束缚,可以按照自己的想法来定义控件。
不过自定义控件必须遵守Qt官方的一套自定义控件规则,在规则之下我们就可以定义属于我们自己的控件啦!
QWidget是所有控件的基类,在自定义控件时均需要继承QWidget,然后通过重写覆盖原有方法或属性的方式来达到自定义控件的目的。
博主对于自定义控件的相关技术掌握程度略浅,这里针对自定义控件仅有两种方法,一种是基于Qt设计师的提供的控件提升方式,这种方式可以对多个控件进行组合,形成一个可复用的新控件;
另一种是纯代码实现方式,这种一般是继承Qt的原生控件,如push button,然后重写里面的对应函数来实现自己想要的功能,下面将对两种方式进行逐一演示。
话不多说,开始上代码:
一 基于Qt设计师的控件提升方式实现自定义控件
打开 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());
}
运行效果:
点击圆盘或进度条时二者可以联动,对进度条进行设置时,进度条能够走到指定的位置,也能获取当前进度条的实时位置;
二 纯代码实现方式实现自定义控件
这里有一个比较优秀的博客介绍,绘制漂亮的仪表盘,博客链接如下 :
另外还有一个时钟的博客:
下一篇博客: