QtableView点击滑动设计

article/2025/10/23 9:23:59

效果
在这里插入图片描述

头文件:

#ifndef CustomScroll_H
#define CustomScroll_H#include <QObject>
#include <QWidget>
#include <QTimer>
#include <QTableView>
#include <QPropertyAnimation>
#include <QDateTime>class CustomScroll : public QWidget
{Q_OBJECT
#define SHOW_ROWS 10    //表格固定显示的行数
#define SCROL_WIDTH 10     //滚动条宽度
#define SCROL_CLOLOR QColor(150,150,150,140)
#define SCROL_SHOW_TIME 2000typedef enum tagLuiScrollMouseDragInfo {MOUSE_RELEASE = 0,          //鼠标离开MOUSE_PRESS = 1,            //按下MOUSE_PRESS_MOVE = 2,       //按下+移动MOUSE_RELEASE_MOVE = 3      //鼠标 离开 并 滑动}LUI_Scroll_Mouse_Drag_INFO_E;LUI_Scroll_Mouse_Drag_INFO_E m_dragFlag;public:explicit CustomScroll(QTableView* table,QWidget *parent = NULL);public slots:void scrollTimeOut();
private:bool eventFilter(QObject *obj, QEvent *evt);QTimer m_scrollTimer;       //用于控制右侧滚动条的显示QTableView *m_table;        //构造函数传入的表格指针QScrollBar *m_scrollBar;    //指向表格滚动条QPropertyAnimation *animation;  //属性动画,使用动画驱动表格滑动int  m_selectRow;int  m_srcollH;
};#endif // CustomScroll_H

cpp文件

#include "customscroll.h"
#include <QMouseEvent>
#include <QDebug>
#include <QApplication>
#include <QPainter>
#include <QTableWidget>
#include <QHeaderView>
#include <QScrollBar>
#include <QAbstractAnimation>CustomScroll::CustomScroll(QTableView* table,QWidget *parent) :QWidget(parent),m_dragFlag(MOUSE_RELEASE)
{setAttribute(Qt::WA_TranslucentBackground);m_scrollBar = table->verticalScrollBar();m_scrollBar->hide();connect(m_scrollBar,&QScrollBar::sliderPressed,[=](){ m_scrollTimer.stop(); });           //按下滚动条connect(m_scrollBar,&QScrollBar::sliderMoved,[=](){ m_scrollTimer.stop(); });connect(m_scrollBar,&QScrollBar::sliderReleased,[=](){ m_scrollTimer.start(SCROL_SHOW_TIME); });     //松开滚动条animation = new QPropertyAnimation(m_scrollBar,"value",this);       //创建动画对象connect(animation,&QPropertyAnimation::finished,[=](){          //动画结束后启动定时器准备隐藏滚动条m_scrollTimer.start(SCROL_SHOW_TIME);});connect(&m_scrollTimer,SIGNAL(timeout()),this,SLOT(scrollTimeOut()));m_table = table;m_table->viewport()->installEventFilter(this);  //安装事件过滤器m_table->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);this->resize(SCROL_WIDTH,m_table->height());this->move(0,5);            //将滑动条移至最右侧this->raise();      //置顶父窗口m_srcollH  = m_table->height();
}void CustomScroll::scrollTimeOut()
{m_scrollBar->hide();m_dragFlag = MOUSE_RELEASE;
}bool CustomScroll::eventFilter(QObject *obj, QEvent *evt)
{static int pressPoint_y   = 0;      //记录按下位置static int dragPoint_y    = -1;     //拖动位置static qint64 pressMSec ;           //记录按下的时间点int scrollV_max = m_scrollBar->maximum ();int scrollV_min = m_scrollBar->minimum ();QMouseEvent *mouse =  dynamic_cast<QMouseEvent *>(evt);if(mouse){//=================== 按下 ===========================if( mouse->type() ==QEvent::MouseButtonPress){m_scrollTimer.stop();m_scrollBar->show();pressMSec = QDateTime::currentDateTime().toMSecsSinceEpoch();     //记录按下的时间dragPoint_y  = mouse->pos().y();               //当前坐标pressPoint_y = dragPoint_y;                      //按下的位置animation->stop();m_selectRow = m_table->indexAt(mouse->pos()).row();    //选择当前行m_dragFlag = MOUSE_PRESS;}//======================= 只点击了一下屏幕,未移动 =============================else if(mouse->type() == QEvent::MouseButtonRelease && m_dragFlag == MOUSE_PRESS){m_dragFlag = MOUSE_RELEASE;m_scrollTimer.start(SCROL_SHOW_TIME);  //2S后取消滑动条显示m_scrollBar->show();}//==================== 鼠标移动 ==============================else if((m_dragFlag!= MOUSE_RELEASE) && mouse->type() == QEvent::MouseMove){if(m_dragFlag == MOUSE_PRESS)     //鼠标按下到现在的滑动状态,即表示首次滑动{if(qAbs(dragPoint_y - mouse->pos().y()) < 5)   //判断移动阀值,避免误操作return true;else{m_dragFlag = MOUSE_PRESS_MOVE;           //转为移动状态m_table->clearSelection();               //已经移动了,所以取消之前的选择dragPoint_y = mouse->pos().y();          //获取当前坐标return true;}}int moveValue = (dragPoint_y - mouse->pos().y()) + m_scrollBar->value(); //移动值 + 滚动条当前值 = 滑动到的位置dragPoint_y = mouse->pos().y();m_table->clearSelection();if(scrollV_min > moveValue) moveValue = scrollV_min;    //添加位置限制if(moveValue > scrollV_max) moveValue = scrollV_max;m_scrollBar->setValue(moveValue);   //表格显示到对应位置}//======================= 从按下滑动状态 到现在 鼠标松开,惯性滑动 =============================else if(m_dragFlag == MOUSE_PRESS_MOVE && mouse->type() == QEvent::MouseButtonRelease){dragPoint_y = -1;int releasePoint_y = mouse->pos().y();int ms= QDateTime::currentDateTime().toMSecsSinceEpoch()-pressMSec;int Pixel_per_second=qAbs(releasePoint_y - pressPoint_y)*1000/ms;       //计算每秒像素点if(Pixel_per_second < 300 || qAbs(releasePoint_y - pressPoint_y) < 45){m_dragFlag = MOUSE_RELEASE;return true;}else{int moveValue;if(ms > 1000)      //滑动的时间不能超过1s{m_dragFlag = MOUSE_RELEASE;return true;}//计算滑动得到的位置if(releasePoint_y - pressPoint_y > 0)     //向下滑动{moveValue = m_scrollBar->value() - Pixel_per_second*0.2*(300/ms);   //滑动时间越长,moveValue值越小,因为不是快速滑动if(moveValue < scrollV_min)moveValue = scrollV_min;}else{moveValue = m_scrollBar->value() + Pixel_per_second*0.2*(300/ms);if(moveValue > scrollV_max)moveValue = scrollV_max;}m_table->clearSelection();//滑动松开后惯性滑动动画animation->setDuration(2000-ms);animation->setEndValue(moveValue);animation->setEasingCurve(QEasingCurve::OutQuart);animation->start();m_dragFlag = MOUSE_RELEASE_MOVE;    //鼠标松开,惯性滑动状态}}}return QWidget::eventFilter(obj,evt);
}

使用方法

    CustomScroll *tableMove;tableMove = new CustomScroll(ui->tableView,this);

qtableView初始化建议

    ui->tableView->verticalHeader()->setVisible(false);     //隐藏序号列ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows); //设置点击选择方式,行、列、单元格ui->tableView->setSelectionMode(QAbstractItemView::MultiSelection); //设置可选择条目数ui->tableView->setEditTriggers(QAbstractItemView::NoEditTriggers);  //内容不可编辑ui->tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Fixed);   //设置表头不可拖动ui->tableView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff); //去掉水平滚动条//ui->tableView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff); //去掉垂直滚动条

建议滚动条样式

    //设置纵向滚动条样式ui->tableView->verticalScrollBar()->setStyleSheet("QScrollBar{""background:white;"//背景色"width:20px;""QScrollBar::sub-line{background:transparent;}"   //向上箭头样式"QScrollBar::add-line{background:transparent;}"   //向下箭头样式"}""QScrollBar::handle{" //滑块样式"background:#d0d0d0; ""border:2px solid transparent;""border-radius:10px;""hover{background:#d0d0d0;}""}""QScrollBar::handle:vertical:hover{background:#a0a0a0;}" //鼠标触及滑块样式-滑块颜色);

http://chatgpt.dhexx.cn/article/bWcaVbUy.shtml

相关文章

QTableView样式表实战

1.案例 隔行颜色、选中颜色、标题样式、表格内容样式、表格边角样式 2.qss代码 /*设置表格整体样式*/ QTableView{outline:none; /*设置选中单元格不显示虚线框*/border:0px solid #FFFFFF;background-color:#FFFFFF; } /*设置表格标题样式*/ QHeaderView::section {padding:…

QT(3)-QTableView

QTableView 0 相关文章1 说明2 常用函数2.1 clearSpans2.2 setSpan2.3 columnAt2.4 rowAt2.5 columnSpan2.6 rowSpan2.7 columnViewportPosition2.8 rowViewportPosition2.9 列宽、行高2.9.1 columnWidth2.9.2 rowHeight2.9.3 setColumnWidth2.9.4 setRowHeight2.9.5 resizeCol…

QTableView复选框

QTableView复选框&#xff0c;支持未选中、部分选中、全选三种状态 参考博文&#xff08;若有侵权&#xff0c;联系删除&#xff09; https://blog.csdn.net/liang19890820/article/details/50718340https://blog.csdn.net/qq_44257811/article/details/120266599 效果图&am…

Qt QTableView QStandardItemModel用法

QStandardItemModel 是标准的以项数据&#xff08;item data&#xff09;为基础的标准数据模型类&#xff0c;通常与 QTableView 组合成 Model/View 结构&#xff0c;实现通用的二维数据的管理功能。 本节介绍 QStandardltemModel 的使用&#xff0c;主要用到以下 3 个类&#…

pyqt QTableView详细用法

QTableView是表格视图&#xff0c;可以像excel一样的显示数据&#xff0c;如下图&#xff1a; 详细代码&#xff1a; from PyQt5.QtWidgets import * from PyQt5.QtGui import * import sysclass TableView(QWidget):def __init__(self, argNone):super(TableView, self).__in…

QT QTableView(基于QStandardItemModel用法)操作详解

文章目录 前言关于QStandardItemModel上下翻页实例代码讲解 前言 前面详细介绍过QTableWidget的用法&#xff0c;今天想一次性把QTable系列写完&#xff0c;也就是QTabelview的使用&#xff0c;我发现使用QTableWidget如果频繁的clean&#xff0c;然后又set&#xff0c;会很卡…

Qt QTableView样式设置

Qt QTableView样式设置 显示效果 QSS设置 选中设置&#xff1a; 1 2 3 4 5 QTableView::item:selected { background:rgb(0,0,100); color:white; } 表头设置&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 QHeaderView::section:first { b…

Qt QTableView详解

一.常用接口 1.设置model&#xff0c;添加model数据 model new QStandardItemModel(this);model->setHorizontalHeaderLabels(QStringList()<<"姓名"<<"性别"<<"年龄");QStandardItem *item00 new QStandardItem("…

QTableView常用设置

QTableView的设置比较复杂&#xff0c;做项目的时候总是搞忘&#xff0c;以本文记录一下它的样式、布局等设置方式。 目录 1、设置item布局1.1、平均铺满1.2、最后一项铺满 2、交替背景色2.1、行交替2.2、项交替 3、去掉选中虚线4、去掉网格线5、设置选中方式5.1、选中单个项目…

qt中Qtableview的用法

QTableView常用于实现数据的表格显示。下面我们如何按步骤实现学生信息表格&#xff1a; 一 添加表头 //准备数据模型 QStandardItemModel *student_model new QStandardItemModel(); student_model->setHorizontalHeaderItem(0, new QStandardItem(QObject::tr(&…

Qt深入浅出(十五)QTableView

QTableView ​ 表格视图控件QTableView&#xff0c;需要和QStandardItemModel, 配套使用&#xff0c;这套框架是基于MVC设计模式设计的&#xff0c;M(Model)是QStandardItemModel数据模型&#xff0c;不能单独显示出来。V(view)是指QTableView视图&#xff0c;要来显示数据模型…

Qt QTableView

TableView 表格视图控件QTableView&#xff0c;需要和QStandardItemModel, 配套使用&#xff0c;这套框架是基于MVC设计模式设计的&#xff0c;M(Model)是QStandardItemModel数据模型&#xff0c; 不能单独显示出来。V(view)是指QTableView视图&#xff0c;要来显示数据模型&…

QT QtableView操作详解

本文实现了使用QtableView控件来显示数据&#xff0c;数据源使用txt文本作为数据源&#xff0c;使用了QStandardItemModel作为数据模型来实现了对TableView空间的初始化&#xff0c;和对txt数据源的增删改查功能。 QT QtableView操作详解目录 1. 项目结构&软件界面 2. m…

QTableView使用方法小结

本文总结了QTableView常用方法&#xff0c;包括常规的数据显示、表头设置、字体和颜色设置、行列的高宽&#xff0c;显示格式设置等&#xff0c;还有一套分页算法&#xff0c;在QTableView表格里插入QLineEdit、QPushButton、QCheckBox等控件&#xff0c;常用的qss设置&#xf…

Qt之QTableView的简单使用(含源码+注释)

文章目录 一、QTableView操作示例图二、QTableView&#xff08;个人理解&#xff09;三、源码CMainWindow.hCMainWindow.cpp 四、拓展&#xff1a;代理的使用总结相关文章 一、QTableView操作示例图 下图为QTableView简单使用示例图&#xff0c;其中包含设置、获取、新建item等…

QTableView 基本使用

一、简介 表格视图控件 QTableView&#xff0c;需要和 QStandardItemModel 配套使用&#xff0c;这套框架是基于 MVC 设计模式设计的&#xff0c;M(Model) 是 QStandardItemModel 数据模型不能单独显示出来。V(view) 是指 QTableView 视图&#xff0c;要来显示数据模型&#x…

QTableView详细使用说明

QTableView详细使用说明 创建QTableView表格标题设置表格的标题获取表格的标题 数据操作插入数据删除数据 属性设置设置表格的对齐方式设置表格的宽高设置表格的线属性 自定义菜单eventFilter方法重载eventFilter()启用事件监听实现事件过滤函数 设置菜单属性方法设置属性关联信…

web前端新手面试指南:自我介绍

面试时注意&#xff1a;自我介绍不能太长&#xff0c;也不能过短&#xff0c;3分钟左右最合适&#xff0c;尤其做为web前端技术方面的面试&#xff0c;更加要说到点上&#xff0c;我依次从学习方面、项目实践、未来规划这三个方面写下web前端面试的自我介绍。 您好&#xff0c;…

Web前端面试自我介绍对话技巧注意事项

大家在学会了web前端技术后&#xff0c;当然是要准备找一个适合自己的web前端工作了&#xff0c;那么面试环节是必不可少的&#xff0c;有一个良好的自我介绍表述&#xff0c;在HR心中也能加分不少&#xff0c;接下来小编就为大家介绍一下Web前端面试自我介绍对话技巧注意事项。…

前端面试自我介绍的技巧都有哪些?

前端面试自我介绍的技巧都有哪些? 在前端面试自我介绍的时候&#xff0c;可能会遇到两种情况&#xff1a;允许主动和不允许主动&#xff01; 允许主动的情况下&#xff0c;前端程序员应该详细的介绍自己技能树&#xff0c;结合工作经历&#xff0c;展示给面试官自己对项目和…