Qt6教程之三(3) QtWedget自定义控件

原创已于 2023-03-04 17:20:34 修改 · 3.7k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#qt #ui

于 2023-03-01 23:17:57 首次发布

Qt学习同时被 2 个专栏收录

40 篇文章

订阅专栏

程序开发

36 篇文章

订阅专栏

本文介绍了如何在Qt中自定义控件，包括基于QtDesigner的控件提升方法，通过组合现有控件创建新的可复用组件，以及纯代码实现方式，通过继承并重写Qt原生控件的功能。示例展示了使用水平进度条和LCDNumber创建自定义控件的过程，并实现了两者之间的交互。此外，还提到了使用Qt绘图功能创建自定义仪表盘和时钟的博客资源。

在之前的博客中，我们使用的控件都是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());
}

运行效果：

点击圆盘或进度条时二者可以联动，对进度条进行设置时，进度条能够走到指定的位置，也能获取当前进度条的实时位置；