QT绘制电池图标（横立，竖立全部包括）

本文实现QT实现绘制电池图标主要是在paintEven中进行绘制，网上历程很多，本文旨在记录总结！

函数初始化

borderWidth = 2;						//边框宽度
borderRadius = 3;						//边框倒角
alarmValue = 30;						//电池电量警戒值
bgRadius = 1;							//背景电量倒角
alarmColorStart = QColor(250, 118, 113);//低电量时的渐变开始颜色
alarmColorEnd = QColor(204, 38, 38);	//低电量时的渐变结束颜色
normalColorStart = QColor(50, 205, 51);	//正常电量时的渐变开始颜色
normalColorEnd = QColor(60, 179, 133);	//正常电量时的渐变结束颜色

setAlignment(Qt::AlignCenter);

---

以下为paintEvent函数编写：

电池绘制分为三部分，绘制电池头，绘制电池边框以及绘制电池电量

QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);		//反锯齿

 1.绘制电池头

//绘制电池头部
QPointF headTopLeft(31, 12);		                                                           //头部矩形
QPointF headBottomRight(35,18);
QRectF headRect(headTopLeft, headBottomRight);
painter.setBrush(borderColor);
painter.drawRoundedRect(headRect, borderRadius, borderRadius)

2.绘制电池边框

QPointF topLeft(2, 6);//边框矩形
QPointF bottomRight(31, 24);
QRectF batteryRect = QRectF(topLeft, bottomRight);
QColor borderColor = QColor(Qt::white); //边框颜色及线
painter.setPen(QPen(borderColor, borderWidth));
painter.setBrush(Qt::NoBrush);
painter.drawRoundedRect(batteryRect, borderRadius, borderRadius);                  //drawRoundedRect 绘画圆角

3.绘制电池电量变化 

电池电量显示分为横向变化和纵向变化。把电池头和电池边框的比例可以计算一下，我这里是把控件总宽度分成20份，让电池头占一份，其余的都是电池边框（如果你想做纵向的电池就用高度计算）

a.横向显示

QLinearGradient batteryGradient(QPointF(0, 0), QPointF(width(), height()));
	
if (batteryPower1 >= 100)
{
	batteryPower1 = 100;
}
else if (batteryPower1 <= 0)
{
	batteryPower1 = 0;
}

if (batteryPower1 <= alarmValue)								//低电量颜色
{
	batteryGradient.setColorAt(0.0, alarmColorStart);
	batteryGradient.setColorAt(1.0, alarmColorEnd);
}
else														//正常电量颜色
{
	batteryGradient.setColorAt(0.0, normalColorStart);
	batteryGradient.setColorAt(1.0, normalColorEnd);
}

double unit = (batteryRect.width() - (borderWidth * 2)) / 100;
double width = batteryPower1 * unit;
QPointF topLeft(batteryRect.topLeft().x() + borderWidth, batteryRect.topLeft().y() + borderWidth);
QPointF bottomRight(width + borderWidth + borderWidth, batteryRect.bottomRight().y() - borderWidth);
QRectF chargeRect(topLeft, bottomRight);

b.纵向显示

QLinearGradient batteryGradient(QPointF(0, 0), QPointF(width(), height()));

if (batteryPower1 >= 100)
{
	batteryPower1 = 100;
}
else if (batteryPower1 <= 0)
{
	batteryPower1 = 0;
}

if (batteryPower1 <= alarmValue)								//低电量颜色
{
	batteryGradient.setColorAt(0.0, alarmColorStart);
	batteryGradient.setColorAt(1.0, alarmColorEnd);
}
else														//正常电量颜色
{
	batteryGradient.setColorAt(0.0, normalColorStart);
	batteryGradient.setColorAt(1.0, normalColorEnd);
}

int margin = qMin(width(), height()) / 20;					//电量内边距
double unit = (batteryRect.height() - (margin * 2)) / 100;	//1个电量的长度
double height = batteryRect.bottomRight().y() - (batteryPower * unit) - margin;

QPointF chargeTopLeft(batteryRect.topLeft().x() + margin, height);
QPointF chargeBottomRight(batteryRect.bottomRight().x() - margin, batteryRect.bottomRight().y() - margin);
QRectF chargeRect(chargeTopLeft, chargeBottomRight);

可添加图片显示

QPixmap pixmap1(QString(":/battery/battery_state%2_icon").arg(batteryStatus1));
QPixmap pixmap2(QString(":/battery/battery_state%2_icon").arg(batteryStatus2));

painter.drawPixmap(9, 7, 15, 15, pixmap1);
painter.drawPixmap(9, 37, 15, 15, pixmap2);