QT 自定义控件 数值选择器

最新推荐文章于 2023-12-10 08:38:15 发布
最新推荐文章于 2023-12-10 08:38:15 发布
阅读量778 收藏 9
点赞数 2
分类专栏： QT自定义 文章标签： qt c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mininsist/article/details/124796433
版权

自定义控件，基于QWidget 实现数值选择器；

1.支持水平、垂直两种方向；

2. 支持设置文字颜色，选中文字颜色，背景色，选中背景色；

3.支持设置后缀显示如 ℃，KG 等

4.可设置选中字体大小；

5.支持设置自定义文字，纯数字时支持设置显示位数如(01, 001)

6.支持拖动后动画效果

//设置数字选项，

//设置文字为选项

使用示例：

    CValueSelector * valSelector = new CValueSelector(this, Qt::Vertical);

    valSelector ->setShowNum(2);
    valSelector ->SetFontSize(30);
    valSelector ->SetRange(0, 23);
    valSelector ->SetValue(0);
    valSelector ->SetColors(QColor("#FFFFFF"), QColor("#FFFFFF"), QColor("#1B1C1E"), QColor(0xEA, 0x55, 0x32, 0x90));
    valSelector ->setFixedSize(300, 400);
    //信号
    connect(valSelector , &CValueSelector::ValueChanged, this, ...);

上代码:

#pragma once


#include <QMouseEvent>
#include <QColor>
#include <QPainter>
#include <QTime>
#include <QDate>
#include <QWidget>
#include <QPropertyAnimation>


//数值选择器
class CValueSelector : public QWidget {
	Q_OBJECT
		Q_PROPERTY(int32_t deviation READ ReadDeviation WRITE SetDeviation)
public:
	explicit CValueSelector(QWidget *parent = nullptr, Qt::Orientation ori = Qt::Horizontal);
	virtual ~CValueSelector();
	//初始化
	bool Init();
	//设置值显示个数 推荐为 5 默认
	void SetValueCount(uint8_t valNum);
	//设置值范围
	void SetRange(int32_t min, int32_t max);
	//设置值
	void SetValue(int32_t val);
	//获取当前值
	int32_t Value();
	//设置字体大小  
	void SetFontSize(uint8_t fontPix);
	//设置文字 
	void SetTextList(const QStringList & tests);
	//设置Color
	void SetColors(const QColor & textCol, const QColor & textHCol, const QColor & bkgCol = Qt::NoBrush, const QColor & selectCol = Qt::NoBrush);
	//设置值 后缀 如℃，KG, S
	void SetValueSuffix(const QString & suffix);
	//设置数字的最小显示位数
	void setShowNum(uint8_t num);

protected:
	virtual bool event(QEvent *event);
	virtual void ProcMousePress(QMouseEvent * ev);
	virtual void ProcMouseMove(QMouseEvent * ev);
	virtual void ProcMouseRelease(QMouseEvent * ev);
	virtual void paintEvent(QPaintEvent * ev);

protected:
	//绘制背景
	virtual void PainterBackgorund(QPainter &painter);
	//绘制选中背景
	virtual void PainterSelectBackgorund(QPainter &painter);

private:
	//绘制值
	void PainterVal(QPainter &painter, int32_t num, int32_t deviation);
	//更正动画开始
	void CorrectionAnimationStart();
	//读取偏移量
	int32_t ReadDeviation();
	//设置偏移量
	void SetDeviation(int32_t n);
	//获取当前值索引的文字
	const QString GetCurrentValText(int32_t num);

signals:
	//值更新信号
	void ValueChanged(int32_t value);

private:
	Qt::Orientation m_orientation;		//水平 / 垂直
	QPalette m_palette;					//调色板
	QPropertyAnimation * m_pAnimation;
	uint8_t m_valCount;
	uint8_t m_showNum;      //显示位数
	int32_t m_minVal;		//最小值
	int32_t m_maxVal;		//最大值
	int32_t m_value;		//当前值
	int32_t m_valueBak;		//当前值备份
	bool m_bDragValid;		//拖拽有效
	int32_t m_pressPos;		//鼠标按下POS
	int32_t m_deviation;	//移动偏移量
	uint8_t m_fontSize;		//字体大小
	QStringList m_textList;	//值对应的文字  不设置默认为数字
	QString m_valSuffix;	//值后缀
};

#include "valueSelector.h"
#include <QDebug>

#define MAX_DISP_VAL_NUM	5	//显示几个数值 默认

//数值选择器实现
CValueSelector::CValueSelector(QWidget *parent, Qt::Orientation ori)
	: QWidget(parent), m_orientation(ori), m_palette(), m_pAnimation(nullptr), m_valCount(MAX_DISP_VAL_NUM), m_minVal(0), m_maxVal(100), m_value(0),
	m_valueBak(5), m_bDragValid(false), m_pressPos(0), m_deviation(0), m_fontSize(24), m_textList(), m_showNum(0) {
	Init();
}

CValueSelector::~CValueSelector() {
}

//初始化
bool CValueSelector::Init() {
	setContentsMargins(0, 0, 0, 0);
	setWindowFlags(Qt::FramelessWindowHint);
	//setAttribute(Qt::WA_TranslucentBackground);
	m_pAnimation = new(std::nothrow) QPropertyAnimation(this, "deviation");
	if (nullptr == m_pAnimation)
		return false;
	m_pAnimation->setDuration(250);
	m_pAnimation->setEasingCurve(QEasingCurve::OutQuad);

	m_palette.setBrush(QPalette::Window, QColor(0x1B1C1E));			//背景默认无
	m_palette.setColor(QPalette::Highlight, QColor(0xEA5200));		//高亮背景
	m_palette.setColor(QPalette::Text, Qt::white);					//文字颜色
	m_palette.setColor(QPalette::HighlightedText, Qt::white);		//高亮文字白色 (当前值)
	return true;
}

//设置值个数 显示个数
void CValueSelector::SetValueCount(uint8_t valNum) {
	if (0 != valNum)
		m_valCount = valNum;
}

//设置范围
void CValueSelector::SetRange(int32_t min, int32_t max) {
	m_minVal = min <= max ? min : max;
	m_maxVal = min <= max ? max : min;
	if (m_value < m_minVal)
		m_value = m_minVal;
	if (m_value > m_maxVal)
		m_value = m_maxVal;
	update();
}

//设置值
void CValueSelector::SetValue(int32_t val) {
	m_value = val;
	if (m_value < m_minVal)
		m_value = m_minVal;
	if (m_value > m_maxVal)
		m_value = m_maxVal;
	update();
}

//获取当前值
int32_t CValueSelector::Value() {
	return m_value;
}

//设置字体大小  
void CValueSelector::SetFontSize(uint8_t fontPix) {
	if (fontPix < 10)
		fontPix = 10;
	m_fontSize = fontPix;
	update();
}

//设置文字   字体最小10
void CValueSelector::SetTextList(const QStringList & tests) {
	m_textList = tests;
	update();
}

//设置Color
void CValueSelector::SetColors(const QColor & textCol, const QColor & textHCol, const QColor & bkgCol, const QColor & selectCol) {
	m_palette.setBrush(QPalette::Window, bkgCol);					//背景默认无
	m_palette.setColor(QPalette::Highlight, selectCol);				//高亮背景
	m_palette.setColor(QPalette::Text, textCol);					//文字颜色
	m_palette.setColor(QPalette::HighlightedText, textHCol);		//高亮文字 (当前值)
}

//设置值 后缀 如℃，KG, S
void CValueSelector::SetValueSuffix(const QString & suffix) {
	m_valSuffix = suffix;
}

void CValueSelector::setShowNum(uint8_t num) {
	m_showNum = num;
}

bool CValueSelector::event(QEvent *event) {
	if (event->type() == QEvent::MouseButtonPress) {
		QMouseEvent * mouseEnv = static_cast<QMouseEvent *>(event);
		if (Qt::LeftButton == mouseEnv->button()) {
			ProcMousePress(mouseEnv);
			//return true;
		}
	} else if (event->type() == QEvent::MouseMove) {
		QMouseEvent * mouseEnv = static_cast<QMouseEvent *>(event);
		ProcMouseMove(mouseEnv);
		//return true;
	} else if (event->type() == QEvent::MouseButtonRelease) {
		QMouseEvent * mouseEnv = static_cast<QMouseEvent *>(event);
		if (Qt::LeftButton == mouseEnv->button()) {
			//QPoint point = mouseEnv->pos();
			//if (-65535 >= point.x() || -65535 >= point.y())
			//	return true;
			ProcMouseRelease(mouseEnv);
			//return true;
		}
	}
	return QWidget::event(event);
}

void CValueSelector::ProcMousePress(QMouseEvent * e) {
	m_pAnimation->stop();
	m_bDragValid = true;
	if (Qt::Horizontal == m_orientation)
		m_pressPos = e->pos().x();
	else
		m_pressPos = e->pos().y();
}
void CValueSelector::ProcMouseMove(QMouseEvent * e) {
	if (!m_bDragValid)
		return;
	if (Qt::Horizontal == m_orientation) {
		//数值到边界时，阻止继续往对应方向移动
		if ((m_value == m_minVal && e->pos().x() >= m_pressPos) ||
			(m_value == m_maxVal && e->pos().x() <= m_pressPos))
			return;

		m_deviation = e->pos().x() - m_pressPos;
		//限制一次最多一格
		if (m_deviation > width() / m_valCount)
			m_deviation = width() / m_valCount;
		else if (m_deviation < -width() / m_valCount)
			m_deviation = -(width()) / m_valCount;
	} else {
		//数值到边界时，阻止继续往对应方向移动
		if ((m_value == m_minVal && e->pos().y() >= m_pressPos) ||
			(m_value == m_maxVal && e->pos().y() <= m_pressPos))
			return;

		m_deviation = e->pos().y() - m_pressPos;
		//限制一次最多一格
		if (m_deviation > height() / m_valCount)
			m_deviation = height() / m_valCount;
		else if (m_deviation < -height() / m_valCount)
			m_deviation = -(height()) / m_valCount;
	}
	update();
}
void CValueSelector::ProcMouseRelease(QMouseEvent * e) {
	if (m_bDragValid) {
		m_bDragValid = false;
		if (m_deviation)	//有偏移才启动动画纠正
			CorrectionAnimationStart();
	}

	if (m_valueBak != m_value) {	//值更改了 发信号
		emit ValueChanged(m_value);
		m_valueBak = m_value;
	}
}

//重绘事件
void CValueSelector::paintEvent(QPaintEvent *) {
	QPainter painter(this);
	painter.setRenderHint(QPainter::Antialiasing, true);

	PainterBackgorund(painter);			//绘制背景
	PainterSelectBackgorund(painter);	//绘制高亮背景

	int32_t lenth = width();
	if (Qt::Vertical == m_orientation)
		lenth = height();

	if (m_deviation >= lenth / m_valCount && m_value > m_minVal) {
		m_pressPos += lenth / m_valCount;
		m_deviation -= lenth / m_valCount;
		--m_value;
	}

	if (m_deviation <= -lenth / m_valCount && m_value < m_maxVal) {
		m_pressPos -= lenth / m_valCount;
		m_deviation += lenth / m_valCount;
		++m_value;
	}
	//绘制数值
	for (int16_t i = -(m_valCount / 2); i <= m_valCount / 2; ++i) {
		if (m_value + i < m_minVal || m_value + i > m_maxVal)
			continue;
		PainterVal(painter, m_value + i, m_deviation + lenth / m_valCount * i);
	}
}

//绘制值
void CValueSelector::PainterVal(QPainter &painter, int32_t num, int32_t deviation) {
	int32_t lenth = width();
	if (Qt::Vertical == m_orientation)
		lenth = height();

	//qreal scale = qreal(lenth * 2 - qAbs(deviation)) / (lenth * 2);
	double size = (qAbs(deviation) / (lenth / 2.0) * 0.5);
	if (size > 0.5)
		size = 0.5;
	QColor col;
	QString text = GetCurrentValText(num);
	if (m_value == num) {
		text += m_valSuffix;
		col = m_palette.color(QPalette::HighlightedText);
	} else
		col = m_palette.color(QPalette::Text);
	col.setAlpha(col.alpha() - col.alpha() * size);
	QFont font;
	font.setPixelSize(m_fontSize - m_fontSize * size);
	painter.setFont(font);
	painter.setPen(col);
	int32_t offset = lenth / 2 + deviation - lenth / m_valCount / 2;
	if (Qt::Vertical == m_orientation)
		painter.drawText(QRectF(0, offset, width(), height() / m_valCount), Qt::AlignCenter, text);
	else
		painter.drawText(QRectF(offset, 0, width() / m_valCount, height()), Qt::AlignCenter, text);

}

//更正动画开始
void CValueSelector::CorrectionAnimationStart() {
	int32_t lenth = width();
	if (Qt::Vertical == m_orientation)
		lenth = height();
	//将文字矫正到中心
	if (m_deviation > lenth / m_valCount / 2) {
		m_pAnimation->setStartValue(-(lenth / m_valCount - m_deviation));
		m_pAnimation->setEndValue(0);
		m_value--;
	} else if (m_deviation < -lenth / m_valCount / 2) {
		m_pAnimation->setStartValue(lenth / m_valCount + m_deviation);
		m_pAnimation->setEndValue(0);
		m_value++;
	} else {
		m_pAnimation->setStartValue(m_deviation);
		m_pAnimation->setEndValue(0);
	}
	m_pAnimation->start();
}

//获取偏移量
int32_t CValueSelector::ReadDeviation() {
	return m_deviation;
}

//设置偏移量
void CValueSelector::SetDeviation(int32_t n) {
	m_deviation = n;
	update();
}

//获取当前值索引的文字
const QString CValueSelector::GetCurrentValText(int32_t num) {
	int32_t valIdx = num - m_minVal;
	if (valIdx >= m_textList.size())
		return m_showNum != 0 ? QString("%1").arg(valIdx, m_showNum, 10, QLatin1Char('0')) : QString("%1").arg(num);
	return m_textList.at(valIdx);
}

//绘制背景
void CValueSelector::PainterBackgorund(QPainter & painter) {
	const QColor & bkgCol = m_palette.color(QPalette::Window);
	if (bkgCol == Qt::NoBrush)
		return;
	painter.save();
	painter.setPen(Qt::NoPen);
	painter.setBrush(bkgCol);
	painter.drawRect(rect());
	painter.restore();
}

//绘制选中背景
void CValueSelector::PainterSelectBackgorund(QPainter & painter) {
	const QColor & bkgCol = m_palette.color(QPalette::Highlight);
	if (bkgCol == Qt::NoBrush)
		return;
	painter.save();
	painter.setPen(Qt::NoPen);
	QRect selectRect;
	//QLinearGradient linearGradient;	//渐变支持
	if (Qt::Horizontal == m_orientation) {
		selectRect.setRect(width() / m_valCount * (m_valCount / 2), 0, width() / m_valCount, height());
		//linearGradient = QLinearGradient(selectRect.topLeft(), selectRect.bottomLeft());
	} else {
		selectRect.setRect(0, height() / m_valCount * (m_valCount / 2), width(), height() / m_valCount);
		//linearGradient = QLinearGradient(selectRect.topLeft(), selectRect.topRight());
	}
	/*QColor col = bkgCol;
	col.setAlpha(0);
	linearGradient.setColorAt(0.0, col);
	linearGradient.setColorAt(0.3, bkgCol);
	linearGradient.setColorAt(0.7, bkgCol);
	linearGradient.setColorAt(1.0, col);
	painter.setBrush(linearGradient);*/
	painter.setBrush(bkgCol);
	painter.drawRect(selectRect);
	painter.restore();
}

Qt之QDial选择器
m0_62599305的博客
06-21 1581
史上最强，最全面的QDial介绍！！！
Qt桌面应用开发 第五天（常用控件 自定义控件）
最新发布
m0_53349772的博客
11-18 1088
要求：选中“环境优雅“”时，输出“选择环境优雅”；取消“环境优雅“”时，输出“取消环境优雅”；半选“环境优雅“”时，输出“半选环境优雅”存储多个子窗口，每个抽屉可以设置图标和标题，并且对应一个子窗口，通过抽屉按钮可以实现各个子窗口显示的切换。注意：CheckBox通过stateChanged这个信号来判断按钮的选择状态，0未选中，1半选，2全选。堆栈窗口控件，只有一个子窗口是可见的，其他子窗口被隐藏，可通过切换显示不同的子窗口。要求：默认默认选择男的；选择女的之后，输出“选择女”滚动条，水平/垂直滚动条。
基于QT的数值滑动选择器
06-08
基于QT的数值滑动选择器，滑动过程选择数值以确定输入。
Qt开发-嵌入式里常用的滚动数字选择器
x150061的博客
02-13 2175
最近arm-linux环境设备机中应用软件需要做日期时间选择面板，要求做成滚动日期选择的样式如下图一，网上查找资料找到了一篇实现数字滚动选择的博客，对其进行修改补充实现了以下功能，本期只介绍数字滚动的实现，下期分享图一的实现。Qt 滚动选择学习_lg15273112290的博客-CSDN博客[参考链接](https://blog.csdn.net/BIG_C_GOD/article/details/52452631?ops_request_misc=%257B%2522request%255Fid%25..
QT数值显示控件全集
01-03
基于QT写的数值显示的控件，仪表盘等。附带所有的源码，在winxp下qt creator开发。
基于Qt自定义的滑动选择器
05-26
**基于Qt自定义的滑动选择器** 在软件开发中，UI界面的用户体验往往起着至关重要的作用。Qt是一个跨平台的应用程序开发框架，广泛应用于桌面、移动和嵌入式设备。它提供了一系列丰富的控件，帮助开发者创建美观且...
Qt自定义精美控件十套demo源码-续II
09-01
提供的十套自定义控件源码可以帮助初学者更好地理解和实践Qt自定义控件的开发。 1. **wavedata**: 这个示例可能涉及到了数据可视化，通过自定义控件显示波形数据。在Qt中，可以使用QGraphicsView和QGraphicsScene来...
QT中自定义控件的创建及使用带图详解（一）
qq_43792862的博客
07-04 1635
QT中自定义控件的创建及使用带图详解（一） 在使用QT时，其中已经包含了很多控件，功能丰富，但是在实际应用中肯定永远缺少那一个你最适合的控件，所以要来自己定义满足所需功能的控件。首先从最简单的开始，利用已有的控件进行组合 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 创建一个新的项目，要勾...
QT滚动数字 滚动选择器 滑动选择器
qq_41386330的博客
12-10 661
QT滚动数字 滚动选择器 滑动选择器 支持循环效果如下，没有做样式美化，参考的其他博文，站在巨人的肩膀上，做了一点改动，仅作为一个参考动态效果一个小demo。
Query+jRange数值范围选择控件
09-06
Query+jRange数值范围选择控件
QT数字滚动选择.zip
10-28
这是基于Qt实现的自定义滑动选择器，滑动选择器支持两种模式：水平模式和垂直模式，可自行设置。另外提供了接口可设置各类颜色、选择器值域等。https://mp.csdn.net/editor/html/109327406
qt滑动数值选择器tumbler.7z
04-06
qt滑动数值选择器tumbler.7zqt滑动数值选择器tumbler.7zqt滑动数值选择器tumbler.7z
qt刻度尺控件
03-21
开发环境：qt5.5+vs2013 此工程直接编译即可运行， 刻度尺控件，支持动画显示
【QT】Qt常用数值输入和显示控件
u011671745的博客
12-05 2780
Qt常用数值输入和显示控件介绍
UI组件：数值选择器（NumberPicker）
PYH8023的博客
11-14 1882
数值选择器用于让用户输入数值，用户即可通过键盘输入数值，又可通过拖动来选择数值。 该组件有如下三个常用方法： setMinValue(int minVal) : 设置该组件所支持的最小值。 setMaxValue(int maxVal) : 设置该组件所支持的最大值。 setValue(int value) : 设置该组件的当前值。
QT 做的数字上下滑动选择器
pengivy的博客
07-05 1151
#ifndef NUMBERWIDGET_H #define NUMBERWIDGET_H #include <QWidget> #include <QPainter> #include <QMouseEvent> #include "Public/public_function.h" class NumWidget : public QWidget { Q_OBJECT public: explicit NumWidget(QWidget *pa...
数据选择器
m0_52555753的博客
12-04 967
数字电路
【qt值输入控件-数值调节控件：QT控件QSpinBox和QDoubleSpinBox 】
weixin_45760295的博客
05-31 541
QT控件QSpinBox和QDoubleSpinBoxNotes共有属性非共有属性 Notes 在QWidget 层sizePolicy 在设置布局属性时要多注意，在布局中，此值会影响控件的大小,例如 上图设置在水平布局时，容器默认是左对齐 此时选择布局后，右侧控件的大小会无法锁定而开始自适应布局大小(一般会变成控件的最小size)。 QSpinBox 是整形数据，QDoubleSpinBox 是用于于处理浮点值 共有属性 两者都有两种槽信号，一种是QString的textChanged(QStri
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值