Qt自定义控件与提升法(prompted)#

需求:#

我们需要自定义UI组件, 同时还想在Desiginer上通过拖拽搭建界面.

方法:#

继承widget类, 用QPainer自已绘制界面.
在Desiginer中, 使用QWidget做为占位符, 并把这个占位QWidget提升为我们的自定义组件.

例子:#

这里举一个自定义电池UI的例子展示自定义组件和提升方法.

自定义UI#

首先, 我们从Widget继承出TBattey类, 用QPainter来画一个能根据电量值变化长度的矩形框来表示电池电量.

python
1#ifndef TBATTERY_H2#define TBATTERY_H34#include <QWidget>56class TBattery : public QWidget7{8    Q_OBJECT910    Q_PROPERTY(int m_power READ powerLevel WRITE setPowerLevel NOTIFY powerLevelChanged)1112private:13    int m_power;1415public:16    explicit TBattery(QWidget *parent = nullptr);17    int powerLevel();18    bool setPowerLevel(int v);1920protected:21    void paintEvent(QPaintEvent *event);2223signals:24    void powerLevelChanged(int);2526public slots:27    void update_Power(int);28};2930#endif // TBATTERY_H31

python
1#include "tbattery.h"2#include <QLabel>3#include <QPainter>4#include <QRect>56TBattery::TBattery(QWidget *parent)7    : QWidget{parent}8{}910int TBattery::powerLevel()11{12    return this->m_power;13}1415bool TBattery::setPowerLevel(int v)16{17    this->m_power = v;18    return true;19}2021void TBattery::paintEvent(QPaintEvent *event)22{23    QPainter painter(this);24    QRect rect(0, 0, width(), height());25    # 设置显示范围是整个组件26    painter.setViewport(rect);27    # 设置虚拟座标轴的范围28    painter.setWindow(0, 0, 120, 50);2930    Qt::GlobalColor color = Qt::green;31    if (this->m_power >= 20 && this->m_power <= 50)32        color = Qt::yellow;33    if (this->m_power <= 20)34        color = Qt::red;35    QPen pen(color);36    pen.setWidth(2);3738    painter.setPen(pen);39    painter.setBrush(color);4041    int L = (int) (120 * (this->m_power / 100.0));4243    painter.drawRect(QRect(0, 0, L, 48));44}4546void TBattery::update_Power(int x)47{48    if (x >= 100)49        x = 100;50    if (x <= 0)51        x = 0;52    this->setPowerLevel(x);53    qDebug() << this->m_power;54    this->update();55    emit this->powerLevelChanged(this->m_power);56}57

提升法在Designer中拖拽组件#

接下来我们在UI界面上拖一个Widget组件, 这个Widget组件是空的什么都不会显示.

我们在这个组件上右键选择 prompt to..., 并添加 prompted classes.

这里的类名就是我们的自定义组件的类名 TBattery , Header file 是TBattery类的头文件位置.

我们可以看到这个组件的类型已经从QWidget变成了TBattery, 在运行程序时就会显示我们画的电池UI.

编译运行项目, 我们可以看到界面中原本用来占位的QWidget变成了我们自定义的TBattery类.

有时, QtCreater并不会帮我们把头文件链入cmake文件中, 编译时会显示找不到TBattery.h这个头文件, 这时我们需要在CMakeLists.txt中加上include_directories .

python
1include_directories(2  ${PROJECT_SOURCE_DIR}3)

不足:#

使用prompted方法在Designer中使用自定义组件非常的简单, 不足之处是不能在desinger中实时的显示自定义的UI, 也不能用deisigner的图形界面设置信号量.

进一步的解决办法是把组件写成插件的形式让qt creater载入, 这样可以用上qt designer中的所有功能.

目录