• 417阅读
  • 4回复

学习自定义控件之电量显示 [复制链接]

上一主题 下一主题
离线futureq
 

只看楼主 倒序阅读 楼主  发表于: 12-05
昨天做了一个简单电池的widget,今天把它做成自定义控件,集成到qtcreator,环境Qt5.11.2 QtCreator4.7.2,编译器vs2017。
本例子主要是为了学习,所以电池只有一个电量的属性。
另外,特别感谢大神刘的博客让我少走了很多坑(https://www.cnblogs.com/feiyangqingyun/p/6182320.html)。
简单介绍一下过程:
custombattery.cpp
  1. void CustomBattery::paintEvent(QPaintEvent *event)
  2. {
  3.     QPainter painter(this);
  4.     drawBetteryBorder(painter);
  5.     drawBetteryValue(painter);
  6. }
  7. void CustomBattery::setValue(double value)
  8. {
  9.     if (value < 0 || value > 100 || m_value == value)
  10.     {
  11.         return;
  12.     }
  13.     m_value = value;
  14.     emit valueChanged(m_value);
  15.     update();
  16. }
  17. double CustomBattery::getValue(void)
  18. {
  19.     return m_value;
  20. }
  21. void CustomBattery::drawBetteryBorder(QPainter &painter)
  22. {
  23.     painter.save();
  24.     // 全部要以widget的长宽比例计算
  25.     int left = 10 * this->width() / 100;
  26.     int top = 10 * this->height() / 100;
  27.     int width = 70 * this->width() / 100;
  28.     int height = 80 * this->height() / 100;
  29.     // 画背景
  30.     painter.setBrush(QColor("#595B5D"));
  31.     painter.drawRect(0, 0, 100 * this->width() / 100, 100 * this->height() / 100);
  32.     // 画框架
  33.     painter.setPen(QPen(QColor("#F0F0F0"), 3));
  34.     QRectF rect(left, top, width, height);
  35.     painter.drawRect(rect);
  36.     // 画电池头
  37.     painter.setBrush(QColor("#F0F0F0"));
  38.     QRectF headerRect(left + width, top + 0.33 * height, 5 * this->width() / 100, 0.33 * height);
  39.     painter.drawRect(headerRect);
  40.     painter.restore();
  41. }
  42. void CustomBattery::drawBetteryValue(QPainter &painter)
  43. {
  44.     painter.save();
  45.     // 全部要以widget的长宽比例计算
  46.     int left = 10 * this->width() / 100 + 3 + 2;
  47.     int top = 10 * this->height() / 100 + 3 + 2;
  48.     int width = 70 * this->width() / 100 - 6 - 4;
  49.     int height = 80 * this->height() / 100 - 6 - 4;
  50.     QColor bgColor;
  51.     if (m_value >= 0 && m_value < 20)
  52.     {
  53.         bgColor = QColor("#FF0000");
  54.     }
  55.     else if (m_value >= 20 && m_value < 50)
  56.     {
  57.         bgColor = QColor("#DCB01A");
  58.     }
  59.     else // if (m_value >= 60 && m_value <= 100)
  60.     {
  61.         bgColor = QColor("#41CD52");
  62.     }
  63.     QRectF rect(left, top, width * m_value / 100, height);
  64.     painter.setBrush(QBrush(bgColor));
  65.     painter.setPen(Qt::NoPen);
  66.     painter.drawRect(rect);
  67.     // 画数字
  68.     QFont font;
  69.     font.setPixelSize((int)(height / 2));
  70.     QRectF rectNumber(left, top, width, height);
  71.     QString valStr = QString::number(m_value, 'f', 0) + "%";
  72.     painter.setFont(font);
  73.     painter.setPen(QPen(QColor("#F0F0F0"), 5));
  74.     painter.drawText(rectNumber, valStr, QTextOption(Qt::AlignCenter));
  75.     painter.restore();
  76. }
custombattery.h
  1. #ifndef CUSTOMBATTERY_H
  2. #define CUSTOMBATTERY_H
  3. #include <QtUiPlugin/QDesignerExportWidget>
  4. #include <QWidget>
  5. namespace Ui {
  6. class CustomBattery;
  7. }
  8. class QDESIGNER_WIDGET_EXPORT CustomBattery : public QWidget
  9. {
  10.     Q_OBJECT
  11.     Q_PROPERTY(double m_value READ getValue WRITE setValue NOTIFY valueChanged)
  12. public:
  13.     explicit CustomBattery(QWidget *parent = nullptr);
  14.     ~CustomBattery();
  15.     void paintEvent(QPaintEvent *event);
  16.     double getValue();
  17. Q_SIGNALS:
  18.     void valueChanged(const double &m_value);
  19. public slots:
  20.     void setValue(double value);
  21. private slots:
  22.     void testValue();
  23. private:
  24.     Ui::CustomBattery *ui;
  25.     double m_value;
  26.     void drawBetteryBorder(QPainter &painter);
  27.     void drawBetteryValue(QPainter &painter);
  28. };
  29. #endif // CUSTOMBATTERY_H

写好自定义控件后,新建工程去使用自定义控件时,主要注意点:
1、dll要复制到3个地方:C:QtQt5.11.25.11.2msvc2017_64pluginsdesigner和C:Qtqtcreator-4.7.2binpluginsdesigner和batterybuild-custombattery-unknown-Releaserelease,第3个路径是执行文件目录,如果这里没放,则程序运行不起来,而且没什么明确的提示。
2、.lib要放在.pro中指定的目录即可:LIBS += $$PWD/include/CustomBatteryplugin.lib
效果图:


再次感谢乐于分享知识的人!
离线沉默小ai

只看该作者 1楼 发表于: 12-06
感谢楼主的分享,但是貌似图看不见
离线futureq

只看该作者 2楼 发表于: 12-11
离线futureq

只看该作者 3楼 发表于: 12-11
回 沉默小ai 的帖子
沉默小ai:感谢楼主的分享,但是貌似图看不见[表情]  (2018-12-06 15:20) 

4个电池是拖上去
离线沉默小ai

只看该作者 4楼 发表于: 12-11
回 futureq 的帖子
futureq:4个电池是拖上去 (2018-12-11 00:38) 

看起来很不错,谢谢楼主的奉献
快速回复
限100 字节
 
上一个 下一个