前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[Qt]用QPainter设计电池充电控件(百分比,自定义文字显示)

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

作者头像
祥知道
发布2020-03-10 16:43:20
1.9K0
发布2020-03-10 16:43:20
举报
文章被收录于专栏:祥的专栏

原创文章,欢迎转载。转载请注明:转载自 祥的博客

原文链接:https://cloud.tencent.com/developer/article/1596461


文章目录

代码语言:txt
复制
- @[toc]1.效果2.原理3.代码h文件cpp文件3.扩展

用QPainter设计电池充电控件

1.效果

2.原理

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

  • drawRoundedRect() : 画圆角矩形
  • drawRect() : 画矩形
  • setPen() : 设置画笔
  • setBrush() : 设置画刷

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

3.代码

h文件

代码语言:javascript
复制
#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

cpp文件

代码语言:javascript
复制
#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);
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 1.效果
  • 2.原理
  • 3.代码
    • h文件
      • cpp文件
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档