学习自定义控件之电量显示 - QTCN开发网

只看楼主正序阅读楼主发表于: 2018-12-05

昨天做了一个简单电池的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
效果图：

再次感谢乐于分享知识的人！