一、效果展示
二、源码分享
cell.h
#ifndef CELL_WIDGET_H
#define CELL_WIDGET_H
#include <QWidget>
#include <QPainter>
#include <QPaintEngine>
#include <QPaintEvent>/* 电池控件类 */
class CellWidget : public QWidget
{Q_OBJECTQ_PROPERTY(QColor colorBackground READ getColorBackground WRITE setColorBackground NOTIFY colorBackgroundChanged)Q_PROPERTY(QColor colorBorder READ getColorBorder WRITE setColorBorder NOTIFY colorBorderChanged)Q_PROPERTY(QColor colorPower READ getColorPower WRITE setColorPower NOTIFY colorPowerChanged)Q_PROPERTY(QColor colorWarn READ getColorWarn WRITE setColorWarn NOTIFY colorWarnChanged)Q_PROPERTY(int powerMax READ getPowerMax WRITE setPowerMax NOTIFY powerMaxChanged)Q_PROPERTY(int powerNow READ getPowerNow WRITE setPowerNow NOTIFY powerNowChanged)Q_PROPERTY(int powerWarn READ getPowerWarn WRITE setPowerWarn NOTIFY powerWarnChanged)public:CellWidget(QWidget *parent = 0);QColor getColorBackground() const {return m_colorBackground;}QColor getColorBorder() const { return m_colorBorder; }QColor getColorPower() const { return m_colorPower; }QColor getColorWarn() const { return m_colorWarn; }int getPowerMax() const { return m_powerMax; }int getPowerNow() const { return m_powerNow; }int getPowerWarn() const { return m_powerWarn; }public slots:void setColorBackground(QColor colorBackground) { m_colorBackground = colorBackground; update(); emit colorBackgroundChanged(m_colorBackground); }void setColorBorder(QColor colorBorder) { m_colorBorder = colorBorder; update(); emit colorBorderChanged(m_colorBorder); }void setColorPower(QColor colorPower) { m_colorPower = colorPower; update(); emit colorPowerChanged(m_colorPower); }void setColorWarn(QColor colorWarn) { m_colorWarn = colorWarn; update(); emit colorWarnChanged(m_colorWarn); }void setPowerMax(int powerMax) { m_powerMax = powerMax; update(); emit powerMaxChanged(m_powerMax); }void setPowerNow(int powerNow) { m_powerNow = powerNow; update(); emit powerNowChanged(m_powerNow); }void setPowerWarn(int powerWarn) { m_powerWarn = powerWarn; update(); emit powerWarnChanged(m_powerWarn); }signals:void colorBackgroundChanged(QColor colorBackground);void colorBorderChanged(QColor colorBorder);void colorPowerChanged(QColor colorPower);void colorWarnChanged(QColor colorWarn);void powerMaxChanged(int powerMax);void powerNowChanged(int powerNow);void powerWarnChanged(int powerWarn);protected:void paintEvent(QPaintEvent *event);private:QColor m_colorBackground; //背景颜色QColor m_colorBorder; //边框颜色QColor m_colorPower; //正常电量颜色QColor m_colorWarn; //警告电量颜色int m_powerNow; //当前电量值int m_powerMax; //最大电量值int m_powerWarn; //警告电量值
};#endif // CELL_H
cell.cpp
#include "cellWidget.h"
#include <QPainter>
#include <QPen>
#include <QColor>
#include <QDebug>/** 构造函数*/
CellWidget::CellWidget(QWidget *parent) :QWidget(parent)
{m_colorBackground = Qt::white;m_colorBorder = Qt::black;m_colorPower = Qt::green;m_colorWarn = Qt::red;m_powerMax = 4200;m_powerNow = 3800;m_powerWarn = 3500;
}/** 重绘事件*/
void CellWidget::paintEvent(QPaintEvent *event)
{(void)event;QPainter painter(this);QRect rect(0, 0, width(), height());/* 设置视口和逻辑坐标系 */painter.setViewport(rect);painter.setWindow(0, 0, 50, 120);/* 抗锯齿效果 */painter.setRenderHint(QPainter::Antialiasing);painter.setRenderHint(QPainter::TextAntialiasing);/* 设置画笔和画刷 */QPen pen;pen.setWidth(2);pen.setColor(m_colorBorder);pen.setStyle(Qt::SolidLine);pen.setCapStyle(Qt::FlatCap);pen.setJoinStyle(Qt::BevelJoin);painter.setPen(pen);/* 绘制电池轮廓和背景 */QBrush brush;brush.setStyle(Qt::SolidPattern);//电池方形部分brush.setColor(m_colorBackground);painter.setBrush(brush);rect.setRect(1, 11, 48, 109);painter.drawRect(rect);//电池头部分brush.setColor(m_colorBorder);painter.setBrush(brush);rect.setRect(15, 1, 20, 9);painter.drawRect(rect);/* 绘制电池电量 */if(m_powerNow > m_powerWarn){brush.setColor(m_colorPower);pen.setColor(m_colorPower);}else{brush.setColor(m_colorWarn);pen.setColor(m_colorWarn);}pen.setWidth(1);painter.setPen(pen);painter.setBrush(brush);if(m_powerNow > 0){qreal powerStartY, powerStopY;qreal powerNowPercent = m_powerNow * 1.0 / m_powerMax * 100;if(powerNowPercent > 100) powerNowPercent = 100;if(powerNowPercent < 0) powerNowPercent = 0;powerStartY = (100 - powerNowPercent) + 14;powerStopY = 120 - powerStartY - 2;rect.setRect(3, powerStartY, 44, powerStopY);painter.drawRect(rect);}/* 数值显示 */QFontMetrics textsize(this->font());QString powStr = QString::number(m_powerNow);QRect textRect = textsize.boundingRect(powStr);painter.setFont(this->font());pen.setColor(Qt::black);painter.setPen(pen);painter.drawText(24-textRect.width()/2, 55+textRect.height()/2, powStr);
}
三、使用方法
放置一个QWidget,然后右键提升