(资料图)

1.效果

2.原理

设计一个类BatteryItem，继承QWidget类，重写void paintEvent()函数，利用QPainter画出电池。

drawRoundedRect() : 画圆角矩形

drawRect() : 画矩形

setPen() : 设置画笔

setBrush() : 设置画刷

主要是通过获取的整个窗口部件(BatteryItem)的大小(width,height)，然后按照比例和顶点进行设计，最难和最恶心的就是要试出来合理的比例，毕竟这个控件要设计成自适应窗体(BatteryItem)大小的。

3.代码

h文件

#ifndef BATTERYITEM_H#define BATTERYITEM_H#include #include "ui_BatteryItem.h"class BatteryItem : public QWidget{Q_OBJECTpublic:BatteryItem(QWidget *parent = 0);/*[color]0: 绿色1: 黄色2: 红色[value]:电量值0-100*/BatteryItem(QWidget *parent, int value, int color = 0);/*[value]:电量值0-100*/void setBatteryValue(int value);/*[color]0: 绿色1: 黄色2: 红色*/void setBatteryColor(int color);/*[flg]0:不显示文字1:显示百分比2:显示自定义文字[str]str:自定义文字*/void setShowText(int flg=0, QString str="");~BatteryItem();//virtual QPaintEngine * paintEngine() const override;private:Ui::BatteryItem ui;int m_value;QColor m_color = QColor(0,255,0);int m_showTextFlg = 0;//显示文字FlgQString m_showText;//显示的文本文字protected:virtual void paintEvent(QPaintEvent * event) override;};#endif // BATTERYITEM_H

cpp文件

#include "BatteryItem.h"#include #include BatteryItem::BatteryItem(QWidget *parent): QWidget(parent){ui.setupUi(this);}BatteryItem::BatteryItem(QWidget *parent, int value, int color /*= 0*/): QWidget(parent){//ui.lab_value->setText("dd");//设置电池大小//setFixedSize(26, 16);//setFixedSize(100, 50);setBatteryColor(color);setBatteryValue(value);setShowText(1);}void BatteryItem::setBatteryValue(int value){if (value < 0 ){value = 0;}if (value >100){value = 100;}m_value = value;//更新界面update();}void BatteryItem::setBatteryColor(int color){if (color<0||color>2){color = 0;}//QColor(136, 205, 112) - 翠绿1//QColor(137, 249, 83) - 翠绿2switch (color){case 0://绿色m_color = QColor(0, 255, 0);break;case 1://黄色m_color = QColor(218, 165, 32);//m_color = QColor(255, 255, 0);break;case 2://红色m_color = QColor(255, 0, 0);break;}//更新界面update();}void BatteryItem::setShowText(int flg/*=0*/, QString str/*=""*/){m_showTextFlg = flg;m_showText = str;update();}BatteryItem::~BatteryItem(){}void BatteryItem::paintEvent(QPaintEvent *event){QSize itemSize = this->size();const int margin = 3;//外框的余量int w = itemSize.width();int h = itemSize.height();int x0, y0, w0, h0;//外框数据int x1, y1, w1, h1;//内框数据 - 电量int x2, y2, w2, h2;//内框数据 - 电池小头头//外框x0 = 1; y0 = x0;w0 = w - 2 * x0 - margin;h0 = h - 2 * y0;//内框填充x1 = 4; y1 = x1;w1 = w - 2 * x1 - 4;h1 = h - 2 * y1;//电池小头头x2 = x0 + w0 ;y2 = h / 3;w2 = margin;h2 = h / 3;QPainter painter(this);QPen pen;painter.setPen(m_color);//画外框的颜色pen = painter.pen();pen.setWidth(2);//设置线框宽度painter.setPen(pen);//画外框矩形//左上点[x] [y] [width] [height] [x半径] [y半径]//此时没有填充颜色painter.drawRoundedRect(x0, y0, w0, h0, 2, 2);//画内部电量 和 电池的小头头//填充的颜色painter.setBrush(m_color);//电池小头头//painter.drawRect(x2, y2, w2, h2);painter.drawRoundedRect(x2, y2, w2, h2, 1, 1);//左上点[x] [y] [width] [height]int w1_current = m_value*0.01*(w1);//根据数值设置电量painter.drawRect(x1, y1, w1_current, h1);painter.setPen(QColor(0, 0, 0));//画外框的颜色switch (m_showTextFlg){case 0://0:不显示文字//do nothingbreak;case 1://1:显示百分比painter.drawText(x0, y0, w0, h0,Qt::AlignHCenter | Qt::AlignVCenter,QString::asprintf("%d%%", m_value));break;case 2://2:显示自定义文字painter.drawText(x0, y0, w0, h0,Qt::AlignHCenter | Qt::AlignVCenter,m_showText);break;}QWidget::paintEvent(event);}

【领 QT开发教程 学习资料， 点击下方链接莬费领取↓↓ ，先码住不迷路~】

点击这里：