一、效果展示

二、源碼分享

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，然后右鍵提升