Qt控件数据展示

（一）、控件介绍

1.效果图来源于网络
2.数据展示
3.适配屏幕
4.自定义颜色配置

（二）、效果图

核心代码

#include <QTextDocument>
#include <QAbstractTextDocumentLayout> 
#include <QPainter>
#include <QPropertyAnimation> 

DataDisplay::DataDisplay(QWidget *parent)
	: QWidget(parent)
{
	m_imageposX = 280.0;
	m_footerColor = QColor("#e67e22");
	m_animation = new QPropertyAnimation(this, "");
	connect(m_animation, &QPropertyAnimation::valueChanged, this, &DataDisplay::onValueChanged);
	m_animation->setDuration(200);
	this->setMouseTracking(true);
}

DataDisplay::~DataDisplay()
{

}

void DataDisplay::onValueChanged(const QVariant &value)
{
	m_imageposX = value.toDouble();
	update();
}

void DataDisplay::setTitle(const QString& key, const QString& value)
{
	m_titleKey = key;
	m_titleValue = value;
	update();
}

void DataDisplay::setContent(const QString& content)
{
	m_content = content;
	update();
}

void DataDisplay::setBackImage(const QString& image)
{
	m_image = image;
	update();
}

void DataDisplay::setFooter(const QString& footer)
{
	m_footer = footer;
	update();
}

void DataDisplay::setFooterColor(const QColor& color)
{
	m_footerColor = color;
	update();
}

void DataDisplay::paintEvent(QPaintEvent *event)
{
	int sw = 480;
	int sh = 290;

	QWidget::paintEvent(event);
	QPainter painter(this);
	painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
	painter.scale(this->width() * 1.0 / sw, this->height() * 1.0 / sh);

	painter.setPen(Qt::NoPen);
	painter.setBrush(Qt::NoBrush);

	//drawtitle
	int titleHeight = 40;
	painter.fillRect(this->rect(), Qt::white);
	QRect tectrect = QRect(0, 0, sw, sh).adjusted(20, 20, -20, -20);
	QFont font = painter.font();
	font.setPointSize(14);
	painter.setFont(font);
	painter.setPen(QColor("#666666"));
	painter.drawText(tectrect.x(), tectrect.y(), tectrect.width(), titleHeight, Qt::AlignLeft | Qt::AlignVCenter, m_titleKey);

	font.setBold(true);
	painter.setFont(font);
	painter.setPen(QColor("#333333"));
	painter.drawText(tectrect.x() + 12 + painter.fontMetrics().width(m_titleKey), tectrect.y(), tectrect.width(), titleHeight, Qt::AlignLeft | Qt::AlignVCenter, m_titleValue);

	//drawline
	painter.setPen(QPen(QColor("#eeeeee"), 1, Qt::SolidLine));
	painter.drawLine(tectrect.x(), tectrect.y() + titleHeight, 240, tectrect.y() + titleHeight);

	//drawcontent
	QTextOption option;
	option.setWrapMode(QTextOption::WrapAnywhere);
	option.setAlignment(Qt::AlignLeft | Qt::AlignTop);
	font.setBold(false);
	font.setPointSize(12);
	painter.setFont(font);
	painter.setPen(QColor("#666666"));
	int footerH = 46;
	int contentY = tectrect.y() + titleHeight + 6;
	int contentH = sh - contentY - footerH;
	painter.drawText(QRect(tectrect.x(), contentY, 240, contentH), m_content, option);

	//drawfooter
	painter.setPen(Qt::NoPen);
	painter.setBrush(m_footerColor);
	painter.drawRect(0, contentY + contentH, sw, footerH);
	painter.setPen(Qt::white);
	painter.drawText(tectrect.x(), contentY + contentH, sw, footerH, Qt::AlignLeft | Qt::AlignVCenter, m_footer);

	//drawEllipseBack
	painter.save();
	QRectF ellipseRect(m_imageposX, -20, 340, 340);
	painter.setBrush(Qt::white);
	painter.setPen(QColor("#eeeeee"));
	painter.drawEllipse(ellipseRect);
	painter.restore();

	//drawImage
	QPainterPath clicp;
	const QRectF& clipRect = ellipseRect.adjusted(10, 10, -10, -10);
	clicp.addEllipse(clipRect);
	painter.setClipPath(clicp);
	painter.drawPixmap(clipRect.x(), clipRect.y(), QPixmap(m_image).scaled(clipRect.width(), clipRect.height(), Qt::IgnoreAspectRatio, Qt::SmoothTransformation));
}

void DataDisplay::enterEvent(QEvent *event)
{
	QWidget::enterEvent(event);
	m_animation->setStartValue(280.0);
	m_animation->setEndValue(270.0);
	m_animation->start();
}

void DataDisplay::leaveEvent(QEvent *event)
{
	QWidget::leaveEvent(event);
	m_animation->setStartValue(270.0);
	m_animation->setEndValue(280.0);
	m_animation->start();
}

工程文件

Qt交流大会 853086607

结尾

不定期上传新作品，解答群中作品相关问题。相关外，能解答则解答。欢迎大家一起探索Qt世界