昨天做了一个简单电池的
widget,今天把它做成自定义控件,集成到qtcreator,环境Qt5.11.2 QtCreator4.7.2,编译器vs2017。
本例子主要是为了学习,所以电池只有一个电量的属性。
另外,特别感谢大神刘的博客让我少走了很多坑(
https://www.cnblogs.com/feiyangqingyun/p/6182320.html)。
简单介绍一下过程:
custombattery.cpp
- void CustomBattery::paintEvent(QPaintEvent *event)
- {
- QPainter painter(this);
- drawBetteryBorder(painter);
- drawBetteryValue(painter);
- }
- void CustomBattery::setValue(double value)
- {
- if (value < 0 || value > 100 || m_value == value)
- {
- return;
- }
- m_value = value;
- emit valueChanged(m_value);
- update();
- }
- double CustomBattery::getValue(void)
- {
- return m_value;
- }
- void CustomBattery::drawBetteryBorder(QPainter &painter)
- {
- painter.save();
- // 全部要以widget的长宽比例计算
- int left = 10 * this->width() / 100;
- int top = 10 * this->height() / 100;
- int width = 70 * this->width() / 100;
- int height = 80 * this->height() / 100;
- // 画背景
- painter.setBrush(QColor("#595B5D"));
- painter.drawRect(0, 0, 100 * this->width() / 100, 100 * this->height() / 100);
- // 画框架
- painter.setPen(QPen(QColor("#F0F0F0"), 3));
- QRectF rect(left, top, width, height);
- painter.drawRect(rect);
- // 画电池头
- painter.setBrush(QColor("#F0F0F0"));
- QRectF headerRect(left + width, top + 0.33 * height, 5 * this->width() / 100, 0.33 * height);
- painter.drawRect(headerRect);
- painter.restore();
- }
- void CustomBattery::drawBetteryValue(QPainter &painter)
- {
- painter.save();
- // 全部要以widget的长宽比例计算
- int left = 10 * this->width() / 100 + 3 + 2;
- int top = 10 * this->height() / 100 + 3 + 2;
- int width = 70 * this->width() / 100 - 6 - 4;
- int height = 80 * this->height() / 100 - 6 - 4;
- QColor bgColor;
- if (m_value >= 0 && m_value < 20)
- {
- bgColor = QColor("#FF0000");
- }
- else if (m_value >= 20 && m_value < 50)
- {
- bgColor = QColor("#DCB01A");
- }
- else // if (m_value >= 60 && m_value <= 100)
- {
- bgColor = QColor("#41CD52");
- }
- QRectF rect(left, top, width * m_value / 100, height);
- painter.setBrush(QBrush(bgColor));
- painter.setPen(Qt::NoPen);
- painter.drawRect(rect);
- // 画数字
- QFont font;
- font.setPixelSize((int)(height / 2));
- QRectF rectNumber(left, top, width, height);
- QString valStr = QString::number(m_value, 'f', 0) + "%";
- painter.setFont(font);
- painter.setPen(QPen(QColor("#F0F0F0"), 5));
- painter.drawText(rectNumber, valStr, QTextOption(Qt::AlignCenter));
- painter.restore();
- }
custombattery.h
- #ifndef CUSTOMBATTERY_H
- #define CUSTOMBATTERY_H
- #include <QtUiPlugin/QDesignerExportWidget>
- #include <QWidget>
- namespace Ui {
- class CustomBattery;
- }
- class QDESIGNER_WIDGET_EXPORT CustomBattery : public QWidget
- {
- Q_OBJECT
- Q_PROPERTY(double m_value READ getValue WRITE setValue NOTIFY valueChanged)
- public:
- explicit CustomBattery(QWidget *parent = nullptr);
- ~CustomBattery();
- void paintEvent(QPaintEvent *event);
- double getValue();
- Q_SIGNALS:
- void valueChanged(const double &m_value);
- public slots:
- void setValue(double value);
- private slots:
- void testValue();
- private:
- Ui::CustomBattery *ui;
- double m_value;
- void drawBetteryBorder(QPainter &painter);
- void drawBetteryValue(QPainter &painter);
- };
- #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效果图:
再次感谢乐于分享知识的人!