QT笔记——QSlider滑动条滚轮事件和点击鼠标位置事件问题

已于 2022-12-07 09:42:44 修改
阅读量3.3k 收藏 6
点赞数 4
分类专栏： QT 文章标签： qt ui 开发语言
于 2022-12-06 23:52:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lion_cxq/article/details/128212132
版权

需求：我们需要对一个滑动条 滚轮事件 和 点击到滑动条的位置 实时显示
问题：其中在做的时候遇到了很多的问题，一开始感觉很简单，现在将这些问题记录下来

ui图：
在这里插入图片描述
在这里插入图片描述

问题1：处理QSlider 滚轮事件的时候
这里有很大的问题，但是不知道原因，为什么会出现这样的原因，网上也没搜索到相关的内容

问题描述：我们在打印我们的滑动条的值的时候显示不正确
为了更加清楚显示值的变化，我加了值的显示(这个是测试需要，方便写笔记查看)

bool SliderWidget::eventFilter(QObject* watched, QEvent* event)
{
	if (ui.slider == watched)
	{
		if (event->type() == QEvent::Wheel)
		{
			QWheelEvent* wheelEvent = static_cast<QWheelEvent*>(event);
			ui.lineEdit1->setText(QString::number(m_index1));
			ui.lineEdit2->setText(QString::number(ui.slider->value()));
			ui.lineEdit3->setText(QString::number(ui.slider->sliderPosition()));
		}
	}
	return QWidget::eventFilter(watched, event);
}

不知道各位有没有看出这个滑动条的值出现了什么错误：
在这里插入图片描述
错误1：当我在向右滑动的时候，滑到最右边的时候，我再向滑动时，滑动条的值是在第10条分割线，上面显示的值： 10 ，实际应该的值：9
错误2：当我继续在向左滑动时，滑动条对应的值 都 对应不上了，上面显示的值 都比原来减少了1
错误3：当我滑动到最左边的时候，我 操控滑动条 从右 再 向左 ， 上面的 值竟然从1-》2-》1，实际应该为 2-》1-》0

我的解决办法是：因为刻度总共有11个，通过滑动条 向前 向后 来改变index 的值

bool SliderWidget::eventFilter(QObject* watched, QEvent* event)
{
	if (ui.slider == watched)
	{
		if (event->type() == QEvent::Wheel)
		{
			//滚轮向前 
			if (wheelEvent->delta() > 0)
			{
				if (m_index1 >= 10)
				{
					m_index1 = 10;
				}
				else if (m_index1 < 10)
				{
					m_index1 += 1;
				}
			}
			else if (wheelEvent->delta() < 0)
			{
				if (m_index1 <= 0)
				{
					m_index1 = 0;
				}
				else if (m_index1 > 0)
				{
					m_index1 -= 1;
				}
			}
			
			//获取滑动条的值
			ui.lineEdit1->setText(QString::number(m_index1));
		}
	}
	return QWidget::eventFilter(watched, event);
}

结果如下：此时我获取的index 值时正确的，因为另外两个参数不是我需要的
在这里插入图片描述
问题2：处理QSlider 点击位置事件的时候
问题描述：我发现QSlider点击最后一个刻度的时候，非常的困难，基本上不可能到最后一个刻度(只通过点击的形式，不通过滑动条滚动的形式)

bool SliderWidget::eventFilter(QObject* watched, QEvent* event)
{
	if (ui.slider == watched)
	{
		if (event->type() == QEvent::MouseButtonRelease)
		{
			//根据鼠标点击的位置 来设置滑动条的 位置
			QMouseEvent* mouseEvent = static_cast<QMouseEvent*>(event);
			if (mouseEvent->button() == Qt::LeftButton)
			{ 
				int curValue = ui.slider->maximum() - ui.slider->minimum();
				int curPos = ui.slider->minimum() + curValue * (static_cast<double>(mouseEvent->x()) / ui.slider->width());

				ui.slider->setValue(curPos);
			}
		}
	}
	return QWidget::eventFilter(watched, event);
}

效果如下：我们发现 点击最后一个确实非常的困难
在这里插入图片描述
解决办法：

bool SliderWidget::eventFilter(QObject* watched, QEvent* event)
{
	if (ui.slider == watched)
	{
		if (event->type() == QEvent::MouseButtonRelease)
		{
			//根据鼠标点击的位置 来设置滑动条的 位置
			QMouseEvent* mouseEvent = static_cast<QMouseEvent*>(event);
			if (mouseEvent->button() == Qt::LeftButton)
			{ 
				int value = QStyle::sliderValueFromPosition(ui.slider->minimum(), ui.slider->maximum(), mouseEvent->pos().x(), ui.slider->width());
				ui.slider->setValue(value);
			}
		}
	}
	return QWidget::eventFilter(watched, event);
}

在这里插入图片描述
问题3：因为我的需求是 两个按钮共享一个滑动条，但是 两个 滑动条 有自己对应的index，此时我们就需要设置点击到自己的按钮的时候，设置index值

bool SliderWidget::eventFilter(QObject* watched, QEvent* event)
{
	if (ui.slider == watched)
	{
		if (event->type() == QEvent::Wheel)
		{
			//滚轮向前 
			if (wheelEvent->delta() > 0)
			{
				if (m_index1 >= 10)
				{
					m_index1 = 10;
				}
				else if (m_index1 < 10)
				{
					m_index1 += 1;
				}
			}
			else if (wheelEvent->delta() < 0)
			{
				if (m_index1 <= 0)
				{
					m_index1 = 0;
				}
				else if (m_index1 > 0)
				{
					m_index1 -= 1;
				}
			}
			
			//获取滑动条的值
			ui.lineEdit1->setText(QString::number(m_index1));
			qDebug() << "m_index:" << m_index1;
			//既然获取到了正确的m_index1 ，那么我们直接设置值应该没有问题吧(下面两种形式都不行，滑动条滑动的时候 会错乱，导致我们的index 错乱)	
			ui.slider->setValue((int)m_index1);
			//ui.slider->setSliderPosition(m_index);
		}
	}
	return QWidget::eventFilter(watched, event);
}

void SliderWidget::on_btn1_clicked()
{
	ui.slider->setValue(m_index1);
}

看一下下面的动图，很明显的就发现了问题
在这里插入图片描述
错误1：此时打乱了 我们原本正确的对应滑动条 的index 值，现在获取也不正确了
错误2：我们发现向前滑动一次 然后 向后 滑动一次 ，或者相反；滑动条的值 竟然跳了 2 个间隔，但是我在ui设置的时候只有1个间隔，这是肯定错误的，获取的值肯定是不正确的

解决办法：我就尝试不在事件过滤器里做操作，我在滑动条的ValueChanged事件中做操作

	connect(ui.slider, &QSlider::valueChanged, this, [=](int value) {
		ui.slider->setValue(value);
	
		if (ui.btn1->isChecked())
		{
			m_index1 = ui.slider->value();
			ui.lineEdit1->setText(QString::number(m_index1));
			qDebug() << "m_index1:" << m_index1;
		}
		else if (ui.btn2->isChecked())
		{
			m_index2 = ui.slider->value();
			ui.lineEdit1->setText(QString::number(m_index2));
			qDebug() << "m_index2:" << m_index2;
		}
		
	});

在这里插入图片描述
完整代码：
.h文件

#pragma once

#include <QWidget>
#include "ui_SliderWidget.h"
#include <QWheelEvent>
#include <QDebug>
#include <QPoint>
#include <QStyle>
#include <QSlider>

class SliderWidget : public QWidget
{
	Q_OBJECT

public:
	SliderWidget(QWidget* parent = Q_NULLPTR);
	~SliderWidget();

private:
	bool eventFilter(QObject* watched, QEvent* event);

public slots:
	void on_btn1_clicked();
	void on_btn2_clicked();

private:
	Ui::SliderWidgetClass ui;
	quint8 m_index1 = 5;
	quint8 m_index2 = 5;
};

.cpp文件

#include "SliderWidget.h"

SliderWidget::SliderWidget(QWidget* parent)
	: QWidget(parent)
{
	ui.setupUi(this);

	ui.slider->installEventFilter(this);
	connect(ui.slider, &QSlider::valueChanged, this, [=](int value) {
		ui.slider->setValue(value);
	
		if (ui.btn1->isChecked())
		{
			m_index1 = ui.slider->value();
			ui.lineEdit1->setText(QString::number(m_index1));
		}
		else if (ui.btn2->isChecked())
		{
			m_index2 = ui.slider->value();
			ui.lineEdit1->setText(QString::number(m_index2));
		}
		
	});
}

SliderWidget::~SliderWidget()
{
}

bool SliderWidget::eventFilter(QObject* watched, QEvent* event)
{
	if (ui.slider == watched)
	{
		if (event->type() == QEvent::MouseButtonRelease)
		{
			//根据鼠标点击的位置 来设置滑动条的 位置
			QMouseEvent* mouseEvent = static_cast<QMouseEvent*>(event);
			if (mouseEvent->button() == Qt::LeftButton)
			{ 
				//int nDur = ui.slider->maximum() - ui.slider->minimum();
				//int nPos = ui.slider->minimum() + nDur * (static_cast<double>(mouseEvent->x()) / ui.slider->width());
				int value = QStyle::sliderValueFromPosition(ui.slider->minimum(), ui.slider->maximum(), mouseEvent->pos().x(), ui.slider->width());
				ui.slider->setValue(value);

				//m_index1 = value;
				//qDebug() << "m_index:" << m_index1;
				//qDebug() << "value:" << ui.slider->value();
				//qDebug() << "nPos:" << nPos;

				//m_index = value + 1;
				设定滑动条位置
				ui.slider->setValue(value);

				qDebug()<< "position:" << ui.slider->sliderPosition();
				qDebug() << "value:" << ui.slider->value();
				m_index = ui.slider->value();
				//ui.slider->setSliderPosition(value);
				//qDebug() << "m_index:" << m_index;
				//qDebug() << "positition:" << ui.slider->sliderPosition();
				//qDebug() << "value:" << ui.slider->value();

				//获取当前点击位置,得到的这个鼠标坐标是相对于当前QSlider的坐标
				//int currentX = mouseEvent->pos().x();
				//
				//qDebug() <<"currentX:" << currentX;
				获取当前点击的位置占整个Slider的百分比
				//double per = currentX * 1.0 / ui.slider->width();
				//qDebug() <<"width:" << ui.slider->width();
				利用算得的百分比得到具体数字
				//int value = per * (ui.slider->maximum() - ui.slider->minimum()) + ui.slider->minimum();
				//
				//if (value <= 0)
				//{
				// value = 0;
				//}
				//else if (value >= 10)
				//{
				// value = 10;
				//}
				//qDebug() << value;
				//m_index = value;
				//ui.slider->setValue(value);

			}
		}
		else if (event->type() == QEvent::Wheel)
		{
			QWheelEvent* wheelEvent = static_cast<QWheelEvent*>(event);
			//static int index = 5;
			//滚轮向前 
			if (wheelEvent->delta() > 0)
			{
				if (ui.btn1->isChecked())
				{
					if (m_index1 >= 10)
					{
						m_index1 = 10;
					}
					else if (m_index1 < 10)
					{
						m_index1 += 1;
					}
				}
				else if (ui.btn2->isChecked())
				{
					if (m_index2 >= 10)
					{
						m_index2 = 10;
					}
					else if (m_index2 < 10)
					{
						m_index2 += 1;
					}
				}

			}
			else if (wheelEvent->delta() < 0)
			{
				if (ui.btn1->isChecked())
				{
					if (m_index1 <= 0)
					{
						m_index1 = 0;
					}
					else if (m_index1 > 0)
					{
						m_index1 -= 1;
					}
				}
				else if (ui.btn2->isChecked())
				{
					if (m_index2 <= 0)
					{
						m_index2 = 0;
					}
					else if (m_index2 > 0)
					{
						m_index2 -= 1;
					}
				}

			}
			if (ui.btn1->isChecked())
			{
				ui.lineEdit1->setText(QString::number(m_index1));
			}
			else if (ui.btn2->isChecked())
			{
				ui.lineEdit1->setText(QString::number(m_index2));
			}

			//m_index1 = ui.slider->sliderPosition();
			//ui.lineEdit2->setText(QString::number(ui.slider->value()));
			//ui.lineEdit3->setText(QString::number(ui.slider->sliderPosition()));
			//qDebug() << "m_index:" << m_index1;
			//qDebug() << "value:" << ui.slider->value();
			//qDebug() << "position:" << ui.slider->sliderPosition();
			
			//ui.slider->setValue((int)m_index1);
			//qDebug() << "value:" << ui.slider->value();
			//qDebug() << "value:" << ui.slider->value();
			//ui.slider->setSliderPosition(m_index);
			//qDebug() << ui.slider->sliderPosition();

		}
	}

	return QWidget::eventFilter(watched, event);
}

void SliderWidget::on_btn1_clicked()
{
	ui.slider->setValue(m_index1);
}

void SliderWidget::on_btn2_clicked()
{
	ui.slider->setValue(m_index2);
}

参考博客：
QSlider设置滚动块定位到鼠标点击的地方
Qt之QSlider介绍(属性设置、信号、实现滑块移动到鼠标点击位置)
Qt滑动条解决点击和拖动问题

lion_cxq
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt 之 QSlider (滑条) 介绍非常详细
热爱数据库的小胖
10-26 2571
QSlider 详解
qt界面中禁用某个控件的鼠标滑轮事件
Littlehero_121的博客
11-26 4914
主要思想就是：当进入滑轮的滚动事件的时候，就禁用该控件，而进入鼠标点击事件的时候，就将这个控件进行激活 如：spinBox控件，鼠标的过滤事件可以参考博客：https://blog.csdn.net/Littlehero_121/article/details/101376240 在.h文件中： bool eventFilter(QObject *target, QEvent *eve...
QT——QSlider实现，QT滑动控件的使用
最新发布
NS_ice的博客
05-29 1429
QT——QSlider实现，QT滑动控件的使用，QAbstractSlider类的使用。调节滑块到指定位置后，发生一个触发事件，在这个触发事件中，我们获取最后的值，然后进行处理操作。 滑动滑动条使值发生变化，只要最后停下的时候触发信号量执行槽函数。获取滑动块最后停下的值并执行槽函数。滑动块槽函数互动一下多次触发怎么办。sliderMoved，sliderPressed，sliderReleased，valueChanged，actionTriggered，rangeChanged使用
QT小项目（一）鼠标的事件
QtHalcon
02-07 1028
这个例子要实现的效果是： 可以在界面上按着鼠标左键来拖动窗口 双击鼠标左键来使其全屏 按着鼠标右键则使指针变为一个自定义的图片 而使用滚轮则可以放大或者缩小编辑器中的内容 鼠标按下事件： void Widget::mousePressEvent(QMouseEvent *event) // 鼠标按下事件 { if(event-&gt;button() == Qt::LeftBu...
【Qt】滚动条QScroolBar实现滚屏功能
热门推荐
shihoongbo的博客
08-05 2万+
环境：Qt5.3 编译器：Qt Creator 功能：Qt滚屏功能
Qt学习总结之QSlider、QDial
qq_27726087的博客
08-24 2418
滑块控件小结
QT 自定义滑动条（上方有实时方框显示数值，且带有刻度值）
guorong520的博客
06-15 1万+
一、效果图 二、原理 （1）LectureCorrectBoxSliderForm：方形框显示、刻度点以及刻度值。 （2）LectureCorrectSliderForm：继承QSlider 注：不能放在一个类中，否则方形框无法显示到最左边刻度点的正上方。 三、示例代码 LectureCorrectBoxSliderForm.h #ifndef LECTURECORRECTBOXSLIDERFORM_H #define LECTURECORRECTBOXSLIDERFORM_H #include &lt
Python Qt GUI设计：QSlider滑动条类（基础篇—16）
不脱发的程序猿
10-21 2万+
QSlider控件提供了一个垂直或水平的滑动条，滑动条是一个用于控制有界值的典型控件，它允许用户沿水平或垂直方向在某一范围内移动滑块，并将滑块所在的位置转换成一个合法范围内的整数值。
Qt/C++ QSlider解决点击不能到该位置问题
小乌龟的博客
05-26 4332
方法一：可以继承重写一个QSlider 方法二：1.instaneventfiliter(this);slider安装一个事件过滤器               2.在eventfilter(QObject *，QEvent*)中拦截它,很简单吧 例子： slider=new QSlider(this); slider->installEventFilter(this
Qt界面：滑动条的实现
weixin_44650358的博客
02-24 3197
功能：在窗体内放置一个滑动条slider、一个spin box增减小控件，一个设置中间值的按钮，一个将当前值通过qQebug打印到编译器上。使用弹簧和布局使界面更美观。 效果： Widget.h文件： #pragma once #include <QtWidgets/QWidget> #include<QSlider> //滑动条头文件 #include<QSpinBox> //增减控件头文件 #include<QBoxLayout> //界面布局头文
Qt工作笔记-重写滚轮事件，实现界面的增加、减少（放大、缩小）
IT1995的博客
12-19 7511
只要关注一点： 滚轮事件里面有一个QWheelEvent 当他的y值大于0的时候，说明是往前滚； y小于0说明是往后滚   程序运行截图如下： 源码如下： widget.h #ifndef WIDGET_H #define WIDGET_H #include &lt;QWidget&gt; namespace Ui { class Widget; } class Wid...
Qt自定义带游标的slider，在滑块正上方显示当前值
草上爬的博客
07-20 2万+
首先自定义QSlider的子类MyCustomSlider，如下所示。 mycustomslider.h #ifndef MYCUSTOMSLIDER_H #define MYCUSTOMSLIDER_H #include #include #include class MyCustomSlider : public QSlider { public: MyCustomSlide
Qt QSlider点击和拖动
愿成冬天里一阵温暖的南风~~
11-09 1万+
终于有时间写点东西了~~自从毕业到现在仅仅4个月我却在两个公司上过班了。才做了不到两个月的工作辞掉了，为了自己的兴趣，在这里鼓励有强烈追求的人勇敢的做自己想做的事，做自己喜欢的工作！ 来到一个新公司，老大要求用qt还有opengl做一个yuv播放器，完全没接触过这些，不过经过自己的努力在半个多月还是弄出来了~问题众多，下面就Qt的QSlider遇到的问题来讲讲希望对新手有点帮助！ 在Qt中Qs
QT中slider控件的基本用法
qq_47520825的博客
04-07 4112
QSlider是滑动条控件，最常见的应用就是视频播放器中的进度条。QSlider允许用户通过鼠标进行拖动、点击(需要重写mousePressEvent事件实现)，下面将从这几个方面对QSlider进行介绍: 1、QT的基本属性设置 QSlider继承自QAbstractSlider，它的绝大多数属性都是从QAbstractSlider继承而来的。下面开始进行介绍: 最大最小值设置 void setMaximum(int) /*设置最大值*/ void setMinxium(int) /*设置最小
【Qt】QSlider点击定位的提高使用度的实现
Zpx’s
06-14 748
Qt自带的滑动条QSlider和Android中自带的滑动条控件相比实在是具有天壤之别，此处使用eventFilter事件过滤器来完成一个鼠标点击滑动条滑块定位的细节功能。 代码段： ​ bool Device::eventFilter(QObject *obj, QEvent *event) //slider滑块根据鼠标位置 { if(obj==pSlider_l)...
UGUI_02_补充之_Slider的使用_添加slider组件方式（通过滑动滑动条控制Value值、制作血条详细过程）
谁为拨动染血的时空苍穹
08-06 731
1、添加slider组件方式：血条的制作; 2、过程： 2.1、血条制作Image层，将Slider的Fill Rect设置为Image（2），并将interactabler勾选上，咱们通过程序来控制血条血量。 2.2、Image (1)层制作，放到image层下面，背景设置为黑色。镶嵌在image里面 2.3、image（2）层制作 image（2）层将image Type设置为Filled方式...
QSlider
虾球
11-05 231
QListWidget 1.基本属性 2.插入和或其选中的内容 3.遍历和排序 4.插入其他控件和编辑 QListWidget属性 1.selectionMode 单选多选 2.flow从上到下还是从左到右 3.gridSize每一行的宽高 4.iconSize 图标的宽高 QListWidget插入数据 QListWidgetItem *newItem = new QListWidgetItem; newItem->setText(itemText); listWidget->insertI
QT qss 自定义QSlider滑动条，QSlider滑块圆形，圆形滑块边框阴影
09-27
您好！感谢您的提问！ 要自定义QSlider的滑动条，可以使用Qt样式表（QSS）。以下是一个示例代码，演示如何将QSlider的滑动条和边框样式定制为圆形和阴影效果： ```python # -*- coding: utf-8 -*- from PyQt5.QtWidgets import QApplication, QWidget, QSlider from PyQt5.QtGui import QPainter from PyQt5.QtCore import Qt class MySlider(QSlider): def __init__(self, parent=None): super().__init__(parent) self.setStyleSheet(''' QSlider::groove:horizontal { border: none; height: 4px; background-color: rgba(255, 255, 255, 150); border-radius: 2px; } QSlider::sub-page:horizontal { background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 rgba(255, 255, 255, 200), stop: 1 rgba(255, 255, 255, 0)); border-radius: 2px; } QSlider::handle:horizontal { width: 10px; margin-top: -3px; margin-bottom: -3px; border-radius: 5px; background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #f6f7fa, stop:1 #dadbde); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } QSlider::handle:horizontal:hover { background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #dadbde, stop:1 #f6f7fa); } QSlider::handle:horizontal:pressed { background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #dadbde, stop:1 #f6f7fa); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35); } ''') def paintEvent(self, event): painter = QPainter(self) painter.setRenderHint(QPainter.Antialiasing) painter.translate(0, self.height() / 2) painter.setPen(Qt.NoPen) # Draw border shadow = QtGui.QRadialGradient(0, 0, 60, 0, 0) shadow.setColorAt(0, QtGui.QColor(0, 0, 0, 50)) shadow.setColorAt(1, QtGui.QColor(0, 0, 0, 0)) painter.setBrush(QtGui.QBrush(shadow)) painter.drawEllipse(-32, -32, self.width() + 64, self.width() + 64) # Draw circle painter.setBrush(QtGui.QColor(255, 255, 255)) painter.drawEllipse(self.rect().adjusted(20, 20, -20, -20)) # Draw slider handle self.drawSliderHandle
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值