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

- @[toc]1.效果2.原理3.代码h文件cpp文件3.扩展

#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

#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);
}