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

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

需求:

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

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

例子:

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

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

1. #ifndef TBATTERY_H
2. #define TBATTERY_H
4. #include <QWidget>
6. class TBattery : public QWidget
7. {
8.     Q_OBJECT
10.     Q_PROPERTY(int m_power READ powerLevel WRITE setPowerLevel NOTIFY powerLevelChanged)
12. private:
13.     int m_power;
15. public:
16.     explicit TBattery(QWidget *parent = nullptr);
17.     int powerLevel();
18.     bool setPowerLevel(int v);
20. protected:
21.     void paintEvent(QPaintEvent *event);
23. signals:
24.     void powerLevelChanged(int);
26. public slots:
27.     void update_Power(int);
28. };
30. #endif // TBATTERY_H

复制代码

1. #include "tbattery.h"
2. #include <QLabel>
3. #include <QPainter>
4. #include <QRect>
6. TBattery::TBattery(QWidget *parent)
7.     : QWidget{parent}
8. {}
10. int TBattery::powerLevel()
11. {
12.     return this->m_power;
13. }
15. bool TBattery::setPowerLevel(int v)
16. {
17.     this->m_power = v;
18.     return true;
19. }
21. void 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);
30.     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);
38.     painter.setPen(pen);
39.     painter.setBrush(color);
41.     int L = (int) (120 * (this->m_power / 100.0));
43.     painter.drawRect(QRect(0, 0, L, 48));
44. }
46. void 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. }

复制代码

提升法在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 .

1. include_directories(
2.   ${PROJECT_SOURCE_DIR}
3. )

复制代码

不足:

使用prompted方法在Designer中使用自定义组件非常的简单, 不足之处是不能在desinger中实时的显示自定义的UI, 也不能用deisigner的图形界面设置信号量.
进一步的解决办法是把组件写成插件的形式让qt creater载入, 这样可以用上qt designer中的所有功能.
更多:　https://www.codebonobo.tech/post/Qt%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%A7%E4%BB%B6%E4%B8%8E%E6%8F%90%E5%8D%87%E6%B3%95(prompted)

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！