用QPainter设计电池充电控件(百分比，自定义文字显示)

主要是通过获取的整个窗口部件(BatteryItem)的大小(width,height)，然后按照比例和顶点进行设计，最难和最恶心的就是要试出来合理的比例，毕竟这个控件要设计成自适应窗体(BatteryItem)大小的。设计一个类BatteryItem，继承QWidget类，重写void paintEvent()函数，利用QPainter画出电池。drawRoundedRect() : 画圆角矩形

Qt程序员

407人浏览 · 2023-05-17 17:16:04

Qt程序员 · 2023-05-17 17:16:04 发布

1.效果

2.原理

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

drawRoundedRect() : 画圆角矩形

drawRect() : 画矩形

setPen() : 设置画笔

setBrush() : 设置画刷

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

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

学习Qt开发不知道做什么？UP主为大家整理的这些领域都涉及到Qt开发：嵌入式领域、桌面端开发、移动端、微控制器MCU、客户端(游戏、直播等等)、汽车领域行业、消费类电子设备、医疗领域行业、工业自动化领域等等

Qt框架,GUI应用程序,跨平台开发,信号与槽机制,QML语言,模型视图编程,多线程编程,数据库编程,网络编程,XML解析,JSON解析,图形图像处理,用户界面设计,动画效果,OpenGL,WebKit,嵌入式开发,客户端/服务器应用程序.自定义控件

Qt框架,GUI应用程序,跨平台开发,信号与槽机制,QML语言,模型视图编程,多线程编程,数据库编程,网络编程,XML解析,JSON解析,图形图像处理,用户界面设计,动画效果,OpenGL,WebKit,嵌入式开发,客户端/服务器应用程序.自定义控件QT6，C++语言基础，qt基础编程，qt软件开发，Qt架构设计，qt布局管理器，qt嵌入式开发，qt编程入门，qt数据库编程，qt跨平台框架，QT项目实战，Quick模块，OpenCV，Qt实战，OpenCV教程，QT界面开发，Qt框架，C++数据结构，Qt线程，桌面应用开发，qt桌面应用开发，Socket网络编程，qt开发工程师，qt开发，应用程序开发框架，图形视图框架，数据库编程，Qt开发编程，Qt开发控件，Qt开发工程师，QT开发必备技能栈，qt编码，qt网络编程，qt网络通信，Qt信号，Qt槽机制，qt字符串,qt数据类型,qt容器，qt客户端开发，qt软件工程师，qt页面绘制

3.代码

h文件

#ifndef BATTERYITEM_H
#define BATTERYITEM_H
#include <QWidget>
#include "ui_BatteryItem.h"
class BatteryItem : public QWidget
{
Q_OBJECT
public:
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;//显示文字Flg
QString m_showText;//显示的文本文字
protected:
virtual void paintEvent(QPaintEvent * event) override;
};
#endif // BATTERYITEM_H

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

cpp文件

#include "BatteryItem.h"
#include <QPainter>
#include <QDebug>
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) - 翠绿2
switch (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 nothing
break;
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);
}