简介这份资源面向Qt开发者与移动端UI学习者提供一套模拟手机闹钟时间设定的滚动数字选择器实现解决触屏数值选择交互中滑动流畅性、视觉焦点与反馈机制的设计问题。压缩包共31个文件约1.89MB以cpp与h源码为主体配合ui界面文件、pro工程配置及makefile构建脚本另含编译产物与可执行程序便于直接运行对照。已有502人学习下载。代码围绕滑动事件回调、数字随中心点向外渐小、字号渐变、选中项颜色高亮等细节展开并涉及QPainter绘制、QPropertyAnimation动画与事件响应性能优化读者可从中获取滚动选择器的完整实现思路与可复用的交互控件写法适合作为Qt界面开发与自定义控件练习的参考案例。1. 闹钟时间设置界面的滚动选择器一个压缩包里的 Qt 交互实现第一次看到alarmText4.zip这个名字很容易把它当成某个闹钟程序的完整工程解压后才发现重点不在闹钟逻辑而在那个「设置时间」的交互控件上——一个用 Qt 手写的滚动选择器。它解决的是很具体的问题当你要在嵌入式屏、桌面工具或移动端设置一个时间系统自带的 QTimeEdit 太朴素而自己从零写一个滑动选择器又容易在惯性、吸附、循环滚动这些细节上翻车。这个包里的代码把滚动数字选择器、滑动选择器、时间设置效果三件事揉在一起适合正在做 Qt 界面、需要一套可复用滚动选择控件的开发者。下面按「它是什么 → 怎么跑 → 核心怎么实现 → 怎么改」的顺序拆开讲。2. 工程结构与运行环境先让滚动选择器在本地转起来2.1 目录里都有什么拿到压缩包后先别急着打开.pro或CMakeLists.txt编译花两分钟把目录扫一遍能省掉后面一半的报错。这类 Qt 滚动选择器 Demo 的典型结构大致如下不同版本可能略有出入以实际解压为准alarmText4/ ├── alarmText4.pro # qmake 工程文件 ├── main.cpp # 程序入口加载主窗口 ├── mainwindow.h/.cpp # 主界面放置滚动选择器 ├── mainwindow.ui # 界面布局若有 ├── widget/ │ ├── wheelwidget.h/.cpp # 滚动选择器核心控件 │ └── wheelitem.h/.cpp # 单个滚动项的数据封装 ├── res/ │ └── *.png # 选中框、背景、箭头等素材 └── README.md # 若有优先看编译说明判断哪个文件是核心有个简单办法搜paintEvent和mouseMoveEvent哪个类里同时出现这两个函数哪个就是滚动选择器的实现主体。mainwindow通常只负责把控件摆上去、接一下信号真正有技术含量的是wheelwidget这一类。2.2 编译运行的三条命令Qt 工程跑起来无非 qmake 或 CMake 两条路。如果目录里有.pro文件用 qmake 最省事# 进入工程目录 cd alarmText4 # 生成 MakefileQt5 用 qmakeQt6 用 qmake6 或 qmake-qt6 qmake alarmText4.pro # 编译-j4 按 CPU 核数调整 make -j4 # 运行Linux/macOS 直接执行Windows 下是 release/alarmText4.exe ./alarmText4如果只有CMakeLists.txt换成mkdir build cd build cmake .. -DCMAKE_PREFIX_PATH/path/to/Qt/5.15.2/gcc_64 cmake --build . -j4 ./alarmText4CMAKE_PREFIX_PATH指向你本机 Qt 的安装目录这是新手最容易漏的一步——不指定它cmake 会报Could not find a package configuration file provided by Qt5。Windows 上用 Qt Creator 打开.pro直接点绿色三角更省心它会自动配好 kit。2.3 依赖与版本注意这个控件只用到 QtCore、QtGui、QtWidgets 三个基础模块不涉及网络、数据库、多媒体所以依赖很轻。但有两个版本差异要提前知道项目Qt5 写法Qt6 变化鼠标滚轮事件QWheelEvent::delta()改为angleDelta().y()高 DPI 缩放需手动设AA_EnableHighDpiScaling默认开启随机数/容器旧接口可用部分接口废弃如果编译时报delta未声明基本就是 Qt6 环境跑了 Qt5 代码把event-delta()换成event-angleDelta().y()即可。这类滚动选择器在 Qt6 下还有一处容易忽略QWidget::paintEvent里用QPainter画文字时字体度量在缩放屏上会有半像素偏移导致选中项看起来「抖」后面避坑章节会细说。3. 滚动选择器核心实现从绘制、滑动到吸附的完整链路3.1 控件的数据模型为什么用「项列表 当前索引」而不是直接存数值滚动选择器看起来是在滚数字但实现上几乎都不会直接操作 int 值而是维护一个「项列表 当前选中索引」。原因很实际时间选择器里小时是 0–23、分钟是 0–59如果直接存数值滚动到边界时要么卡死要么得写一堆取模逻辑而用项列表循环滚动只是索引对长度取模绘制时按索引偏移算位置逻辑干净得多。// wheelwidget.h 核心成员 class WheelWidget : public QWidget { Q_OBJECT public: explicit WheelWidget(QWidget *parent nullptr); void setItems(const QStringList items); // 设置滚动项文本 int currentIndex() const { return m_currentIndex; } QString currentText() const; signals: void currentIndexChanged(int index); // 选中项变化时发出 private: QStringList m_items; // 所有可选项如 00,01,...,59 int m_currentIndex 0; // 当前选中项索引 int m_itemHeight 40; // 单项高度决定可视项数 qreal m_offset 0.0; // 像素级滚动偏移实现平滑滑动 qreal m_velocity 0.0; // 惯性速度松手后继续滑 QTimer m_animTimer; // 驱动惯性与吸附动画 };m_offset和m_velocity是这套实现的关键。m_currentIndex只记录「逻辑上选中第几项」而m_offset记录「视觉上滚了多少像素」两者分离后手指拖动时只改 offset松手后再把 offset 吸附回整数倍 itemHeight选中索引随之更新。这种「逻辑索引 像素偏移」的双层模型是几乎所有滑动选择器的通用做法理解了它后面绘制和事件处理就顺了。3.2 paintEvent只画可视区域内的项滚动选择器性能好不好全看paintEvent怎么写。常见翻车写法是把所有项都画一遍再靠裁剪遮住项一多就卡正确做法是先算出当前可视窗口覆盖了哪几项只画这几项。void WheelWidget::paintEvent(QPaintEvent *event) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); const int centerY height() / 2; // 选中项垂直中心 const int visibleCount height() / m_itemHeight 2; // 多画两项防边缘露白 // 根据 offset 反推当前应该从第几项开始画 int firstIndex m_currentIndex - visibleCount / 2 - qRound(m_offset / m_itemHeight); for (int i 0; i visibleCount; i) { int idx firstIndex i; if (m_items.isEmpty()) break; // 循环滚动索引对项数取模负数也要正确回绕 idx ((idx % m_items.size()) m_items.size()) % m_items.size(); // 计算该项相对中心的像素位置 qreal y centerY (i - visibleCount / 2) * m_itemHeight - std::fmod(m_offset, qreal(m_itemHeight)); // 距离中心越远透明度越低形成「滚轮」纵深感 qreal dist qAbs(y - centerY) / qreal(height() / 2); int alpha qBound(40, int(255 * (1.0 - dist * 0.8)), 255); painter.setPen(QColor(60, 60, 60, alpha)); painter.drawText(QRectF(0, y - m_itemHeight / 2.0, width(), m_itemHeight), Qt::AlignCenter, m_items.at(idx)); } // 选中框中间两条横线或一个高亮矩形 painter.setPen(QPen(QColor(0, 122, 204), 2)); painter.drawLine(0, centerY - m_itemHeight / 2, width(), centerY - m_itemHeight / 2); painter.drawLine(0, centerY m_itemHeight / 2, width(), centerY m_itemHeight / 2); }这段代码有三个参数值得改m_itemHeight决定单项高度改大项数变少、视觉更松alpha计算里的0.8控制边缘淡出强度调小则远处项更清晰visibleCount加 2 是为了防止快速滑动时边缘出现空白。std::fmod处理 offset 的小数部分保证滚动过程中项是连续移动而不是跳格。注意idx的回绕写法((idx % n) n) % nC 里负数取模结果仍为负直接idx % n在向上滚动时会得到负索引导致越界这是血泪经验。3.3 鼠标与触摸事件拖动、惯性、吸附三段式滚动选择器的手感八成取决于事件处理。完整链路是按下记录起点 → 移动时更新 offset 并记录速度 → 松手后按速度做惯性衰减 → 速度足够小后吸附到最近整数项。void WheelWidget::mousePressEvent(QMouseEvent *e) { m_lastPos e-pos(); m_velocity 0; m_animTimer.stop(); // 打断正在进行的惯性动画 } void WheelWidget::mouseMoveEvent(QMouseEvent *e) { int dy e-pos().y() - m_lastPos.y(); m_offset - dy; // 向上拖内容向上走 m_velocity -dy; // 粗略用位移当速度可加时间加权 m_lastPos e-pos(); update(); // 触发重绘 } void WheelWidget::mouseReleaseEvent(QMouseEvent *) { // 惯性阶段每 16ms 衰减一次速度 m_animTimer.start(16); } void WheelWidget::onAnimTick() { if (qAbs(m_velocity) 0.5) { m_offset m_velocity; m_velocity * 0.92; // 衰减系数越小停得越快 update(); } else { // 吸附阶段把 offset 对齐到 itemHeight 整数倍 int target qRound(m_offset / m_itemHeight) * m_itemHeight; m_offset (target - m_offset) * 0.3; // 缓动逼近 if (qAbs(target - m_offset) 0.5) { m_offset target; m_animTimer.stop(); // 同步逻辑索引并发出信号 int delta qRound(m_offset / m_itemHeight); m_currentIndex ((m_currentIndex - delta) % m_items.size() m_items.size()) % m_items.size(); m_offset 0; emit currentIndexChanged(m_currentIndex); } update(); } }0.92是惯性衰减系数调到 0.98 会滑很久像冰面调到 0.8 则一松手就停0.3是吸附缓动系数越大吸附越快但可能显得生硬。m_velocity这里直接用像素位移近似严格做法应该除以两次事件的时间差得到 px/ms否则高刷新率设备上滑动手感会偏快。触摸屏上还要额外处理QTouchEvent或启用Qt::WA_AcceptTouchEvents把 touch 点转成鼠标事件否则手指滑不动。3.4 时间选择器的组合三个 WheelWidget 拼出时分单个滚动选择器只是零件闹钟时间设置界面通常要「小时 分钟」两列并排中间用冒号分隔。组合方式很直接主窗口里放两个WheelWidget分别setItems成 0–23 和 0–59再用布局拼起来。// mainwindow.cpp 里组装时间选择器 auto *hourWheel new WheelWidget(this); auto *minWheel new WheelWidget(this); QStringList hours, minutes; for (int i 0; i 24; i) hours QString(%1).arg(i, 2, 10, QChar(0)); for (int i 0; i 60; i) minutes QString(%1).arg(i, 2, 10, QChar(0)); hourWheel-setItems(hours); minWheel-setItems(minutes); auto *colon new QLabel(:, this); colon-setAlignment(Qt::AlignCenter); auto *layout new QHBoxLayout; layout-addWidget(hourWheel); layout-addWidget(colon); layout-addWidget(minWheel); setLayout(layout); // 任一列变化时汇总成完整时间 connect(hourWheel, WheelWidget::currentIndexChanged, this, [](int h){ m_selectedHour h; }); connect(minWheel, WheelWidget::currentIndexChanged, this, [](int m){ m_selectedMinute m; });arg(i, 2, 10, QChar(0))的作用是补零成两位保证「07」而不是「7」视觉上宽度一致。两列宽度建议设成相同固定值否则数字宽度不同会导致冒号位置漂移。如果要做「上午/下午」或「秒」再加一列即可控件本身是通用的。4. 避坑与常见问题滚动选择器最容易翻车的五个地方4.1 滚动到边界时索引越界崩溃现象向上滚过第一项后程序直接崩调试器停在m_items.at(idx)。原因C 负数取模仍为负idx % size得到负索引QStringList::at不做边界检查。解决统一用((idx % n) n) % n回绕或在at前加qBound(0, idx, n-1)。我一般会在paintEvent开头断言m_items.size() 0空列表直接 return省得后面除零。4.2 高 DPI 屏上文字发虚、选中框错位现象在 4K 屏或系统缩放 150% 时滚动项文字模糊中间选中框和文字对不齐。原因paintEvent里用整数坐标画文字而m_offset是浮点缩放后半像素被截断。解决绘制文字用QRectF而非QRect并开启QPainter::TextAntialiasing选中框坐标也用qreal计算。另外在main.cpp里 Qt5 需显式QApplication::setAttribute(Qt::AA_EnableHighDpiScaling)Qt6 默认开启不用管。4.3 快速滑动后停不下来或直接跳过选中项现象手指快速一甩列表转好几圈才停或者一下跳过好几项。原因m_velocity没有上限且惯性阶段没有和吸附阶段衔接好。解决给速度加qBound(-maxV, v, maxV)限幅maxV取m_itemHeight * 3左右惯性衰减到阈值后立刻切吸附不要在惯性里直接改m_currentIndex否则信号会连发多次。4.4 鼠标滚轮和拖动冲突现象接上wheelEvent支持滚轮后拖动时偶尔跳格。原因滚轮事件和鼠标移动事件都改m_offset但滚轮是离散跳变拖动是连续偏移两者混用没做状态区分。解决滚轮事件里直接按angleDelta().y()/120换算成项数改m_currentIndex后重置m_offset 0并update()不要走惯性逻辑拖动期间用m_isDragging标志屏蔽滚轮。4.5 嵌入布局后控件高度被压缩只显示一项现象把WheelWidget放进QVBoxLayout后控件被压成一条只看得见中间一项。原因QWidget默认sizeHint很小布局按最小尺寸分配。解决重写sizeHint()返回QSize(120, m_itemHeight * 5)并setMinimumHeight(m_itemHeight * 3)或者在布局里给setStretch权重。这个坑很隐蔽因为控件单独跑没问题一进布局就变形。5. 二次开发改造把滚动选择器改成你自己的业务控件5.1 从「时间」泛化到任意枚举值这套控件最值钱的不是时间选择而是「任意字符串列表都能滚」。改造第一步是把setItems(QStringList)保留同时加一个带 value 的版本让显示文本和实际值解耦// 增加 value 映射显示 一月 但取值 1 void WheelWidget::setItems(const QVectorQPairQString, QVariant items) { m_items.clear(); m_values.clear(); for (const auto p : items) { m_items p.first; m_values p.second; } m_currentIndex 0; m_offset 0; update(); } QVariant WheelWidget::currentValue() const { if (m_currentIndex 0 || m_currentIndex m_values.size()) return {}; return m_values.at(m_currentIndex); }这样同一个控件既能做小时分钟也能做「低/中/高」档位、星期、月份甚至设备参数枚举。改造时注意currentIndexChanged信号语义要跟着调整——如果外部只关心 value可以再加一个currentValueChanged(QVariant)信号避免调用方每次自己查表。5.2 加循环/非循环开关与步长闹钟的小时通常要循环23 之后回 0但某些参数选择器到顶就该停。加一个m_wrapAround布尔在paintEvent回绕和索引更新处判断void WheelWidget::setWrapAround(bool enable) { m_wrapAround enable; } // 索引更新处 if (m_wrapAround) { m_currentIndex ((m_currentIndex - delta) % n n) % n; } else { m_currentIndex qBound(0, m_currentIndex - delta, n - 1); m_offset 0; // 非循环时到边界直接归零避免继续拖 }非循环模式下还要在mouseMoveEvent里限制m_offset范围否则用户能拖出空白区。步长比如分钟按 5 分钟一跳则在setItems时直接生成00,05,10...列表即可不必改控件内部逻辑这是「数据层解决、不污染控件」的思路。5.3 验证改造是否正确的三个动作改完别只看界面按这三步验第一把列表设成 1 项、2 项、0 项分别跑看会不会崩或画错第二快速甩动后立刻反向拖看惯性和吸附会不会打架第三在 100%、150%、200% 三档缩放下截图对比选中框和文字是否对齐。我一般还会在currentIndexChanged里打日志确认一次滑动只发一次信号而不是每帧都发——信号风暴是嵌入到复杂界面后卡顿的常见根因。5.4 一个容易忽略的性能习惯最后说个习惯问题。这类自绘控件在paintEvent里创建QPainter、QColor、QFont是常态但如果在循环里反复构造QFont或做字符串arg拼接项多时会有可感知的掉帧。我的做法是把字体、颜色提成成员变量在resizeEvent或setItems时初始化一次paintEvent里只做绘制。从那以后我每次写自绘控件都强制先问一句「这个对象能不能在构造时建好」再动手写循环。希望这套滚动选择器的拆解能帮你在下一个 Qt 界面里少走几段弯路。本文还有配套的精品资源点击获取
简介这份资源面向Qt开发者与移动端UI学习者提供一套模拟手机闹钟时间设定的滚动数字选择器实现解决触屏数值选择交互中滑动流畅性、视觉焦点与反馈机制的设计问题。压缩包共31个文件约1.89MB以cpp与h源码为主体配合ui界面文件、pro工程配置及makefile构建脚本另含编译产物与可执行程序便于直接运行对照。已有502人学习下载。代码围绕滑动事件回调、数字随中心点向外渐小、字号渐变、选中项颜色高亮等细节展开并涉及QPainter绘制、QPropertyAnimation动画与事件响应性能优化读者可从中获取滚动选择器的完整实现思路与可复用的交互控件写法适合作为Qt界面开发与自定义控件练习的参考案例。1. 闹钟时间设置界面的滚动选择器一个压缩包里的 Qt 交互实现第一次看到alarmText4.zip这个名字很容易把它当成某个闹钟程序的完整工程解压后才发现重点不在闹钟逻辑而在那个「设置时间」的交互控件上——一个用 Qt 手写的滚动选择器。它解决的是很具体的问题当你要在嵌入式屏、桌面工具或移动端设置一个时间系统自带的 QTimeEdit 太朴素而自己从零写一个滑动选择器又容易在惯性、吸附、循环滚动这些细节上翻车。这个包里的代码把滚动数字选择器、滑动选择器、时间设置效果三件事揉在一起适合正在做 Qt 界面、需要一套可复用滚动选择控件的开发者。下面按「它是什么 → 怎么跑 → 核心怎么实现 → 怎么改」的顺序拆开讲。2. 工程结构与运行环境先让滚动选择器在本地转起来2.1 目录里都有什么拿到压缩包后先别急着打开.pro或CMakeLists.txt编译花两分钟把目录扫一遍能省掉后面一半的报错。这类 Qt 滚动选择器 Demo 的典型结构大致如下不同版本可能略有出入以实际解压为准alarmText4/ ├── alarmText4.pro # qmake 工程文件 ├── main.cpp # 程序入口加载主窗口 ├── mainwindow.h/.cpp # 主界面放置滚动选择器 ├── mainwindow.ui # 界面布局若有 ├── widget/ │ ├── wheelwidget.h/.cpp # 滚动选择器核心控件 │ └── wheelitem.h/.cpp # 单个滚动项的数据封装 ├── res/ │ └── *.png # 选中框、背景、箭头等素材 └── README.md # 若有优先看编译说明判断哪个文件是核心有个简单办法搜paintEvent和mouseMoveEvent哪个类里同时出现这两个函数哪个就是滚动选择器的实现主体。mainwindow通常只负责把控件摆上去、接一下信号真正有技术含量的是wheelwidget这一类。2.2 编译运行的三条命令Qt 工程跑起来无非 qmake 或 CMake 两条路。如果目录里有.pro文件用 qmake 最省事# 进入工程目录 cd alarmText4 # 生成 MakefileQt5 用 qmakeQt6 用 qmake6 或 qmake-qt6 qmake alarmText4.pro # 编译-j4 按 CPU 核数调整 make -j4 # 运行Linux/macOS 直接执行Windows 下是 release/alarmText4.exe ./alarmText4如果只有CMakeLists.txt换成mkdir build cd build cmake .. -DCMAKE_PREFIX_PATH/path/to/Qt/5.15.2/gcc_64 cmake --build . -j4 ./alarmText4CMAKE_PREFIX_PATH指向你本机 Qt 的安装目录这是新手最容易漏的一步——不指定它cmake 会报Could not find a package configuration file provided by Qt5。Windows 上用 Qt Creator 打开.pro直接点绿色三角更省心它会自动配好 kit。2.3 依赖与版本注意这个控件只用到 QtCore、QtGui、QtWidgets 三个基础模块不涉及网络、数据库、多媒体所以依赖很轻。但有两个版本差异要提前知道项目Qt5 写法Qt6 变化鼠标滚轮事件QWheelEvent::delta()改为angleDelta().y()高 DPI 缩放需手动设AA_EnableHighDpiScaling默认开启随机数/容器旧接口可用部分接口废弃如果编译时报delta未声明基本就是 Qt6 环境跑了 Qt5 代码把event-delta()换成event-angleDelta().y()即可。这类滚动选择器在 Qt6 下还有一处容易忽略QWidget::paintEvent里用QPainter画文字时字体度量在缩放屏上会有半像素偏移导致选中项看起来「抖」后面避坑章节会细说。3. 滚动选择器核心实现从绘制、滑动到吸附的完整链路3.1 控件的数据模型为什么用「项列表 当前索引」而不是直接存数值滚动选择器看起来是在滚数字但实现上几乎都不会直接操作 int 值而是维护一个「项列表 当前选中索引」。原因很实际时间选择器里小时是 0–23、分钟是 0–59如果直接存数值滚动到边界时要么卡死要么得写一堆取模逻辑而用项列表循环滚动只是索引对长度取模绘制时按索引偏移算位置逻辑干净得多。// wheelwidget.h 核心成员 class WheelWidget : public QWidget { Q_OBJECT public: explicit WheelWidget(QWidget *parent nullptr); void setItems(const QStringList items); // 设置滚动项文本 int currentIndex() const { return m_currentIndex; } QString currentText() const; signals: void currentIndexChanged(int index); // 选中项变化时发出 private: QStringList m_items; // 所有可选项如 00,01,...,59 int m_currentIndex 0; // 当前选中项索引 int m_itemHeight 40; // 单项高度决定可视项数 qreal m_offset 0.0; // 像素级滚动偏移实现平滑滑动 qreal m_velocity 0.0; // 惯性速度松手后继续滑 QTimer m_animTimer; // 驱动惯性与吸附动画 };m_offset和m_velocity是这套实现的关键。m_currentIndex只记录「逻辑上选中第几项」而m_offset记录「视觉上滚了多少像素」两者分离后手指拖动时只改 offset松手后再把 offset 吸附回整数倍 itemHeight选中索引随之更新。这种「逻辑索引 像素偏移」的双层模型是几乎所有滑动选择器的通用做法理解了它后面绘制和事件处理就顺了。3.2 paintEvent只画可视区域内的项滚动选择器性能好不好全看paintEvent怎么写。常见翻车写法是把所有项都画一遍再靠裁剪遮住项一多就卡正确做法是先算出当前可视窗口覆盖了哪几项只画这几项。void WheelWidget::paintEvent(QPaintEvent *event) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); const int centerY height() / 2; // 选中项垂直中心 const int visibleCount height() / m_itemHeight 2; // 多画两项防边缘露白 // 根据 offset 反推当前应该从第几项开始画 int firstIndex m_currentIndex - visibleCount / 2 - qRound(m_offset / m_itemHeight); for (int i 0; i visibleCount; i) { int idx firstIndex i; if (m_items.isEmpty()) break; // 循环滚动索引对项数取模负数也要正确回绕 idx ((idx % m_items.size()) m_items.size()) % m_items.size(); // 计算该项相对中心的像素位置 qreal y centerY (i - visibleCount / 2) * m_itemHeight - std::fmod(m_offset, qreal(m_itemHeight)); // 距离中心越远透明度越低形成「滚轮」纵深感 qreal dist qAbs(y - centerY) / qreal(height() / 2); int alpha qBound(40, int(255 * (1.0 - dist * 0.8)), 255); painter.setPen(QColor(60, 60, 60, alpha)); painter.drawText(QRectF(0, y - m_itemHeight / 2.0, width(), m_itemHeight), Qt::AlignCenter, m_items.at(idx)); } // 选中框中间两条横线或一个高亮矩形 painter.setPen(QPen(QColor(0, 122, 204), 2)); painter.drawLine(0, centerY - m_itemHeight / 2, width(), centerY - m_itemHeight / 2); painter.drawLine(0, centerY m_itemHeight / 2, width(), centerY m_itemHeight / 2); }这段代码有三个参数值得改m_itemHeight决定单项高度改大项数变少、视觉更松alpha计算里的0.8控制边缘淡出强度调小则远处项更清晰visibleCount加 2 是为了防止快速滑动时边缘出现空白。std::fmod处理 offset 的小数部分保证滚动过程中项是连续移动而不是跳格。注意idx的回绕写法((idx % n) n) % nC 里负数取模结果仍为负直接idx % n在向上滚动时会得到负索引导致越界这是血泪经验。3.3 鼠标与触摸事件拖动、惯性、吸附三段式滚动选择器的手感八成取决于事件处理。完整链路是按下记录起点 → 移动时更新 offset 并记录速度 → 松手后按速度做惯性衰减 → 速度足够小后吸附到最近整数项。void WheelWidget::mousePressEvent(QMouseEvent *e) { m_lastPos e-pos(); m_velocity 0; m_animTimer.stop(); // 打断正在进行的惯性动画 } void WheelWidget::mouseMoveEvent(QMouseEvent *e) { int dy e-pos().y() - m_lastPos.y(); m_offset - dy; // 向上拖内容向上走 m_velocity -dy; // 粗略用位移当速度可加时间加权 m_lastPos e-pos(); update(); // 触发重绘 } void WheelWidget::mouseReleaseEvent(QMouseEvent *) { // 惯性阶段每 16ms 衰减一次速度 m_animTimer.start(16); } void WheelWidget::onAnimTick() { if (qAbs(m_velocity) 0.5) { m_offset m_velocity; m_velocity * 0.92; // 衰减系数越小停得越快 update(); } else { // 吸附阶段把 offset 对齐到 itemHeight 整数倍 int target qRound(m_offset / m_itemHeight) * m_itemHeight; m_offset (target - m_offset) * 0.3; // 缓动逼近 if (qAbs(target - m_offset) 0.5) { m_offset target; m_animTimer.stop(); // 同步逻辑索引并发出信号 int delta qRound(m_offset / m_itemHeight); m_currentIndex ((m_currentIndex - delta) % m_items.size() m_items.size()) % m_items.size(); m_offset 0; emit currentIndexChanged(m_currentIndex); } update(); } }0.92是惯性衰减系数调到 0.98 会滑很久像冰面调到 0.8 则一松手就停0.3是吸附缓动系数越大吸附越快但可能显得生硬。m_velocity这里直接用像素位移近似严格做法应该除以两次事件的时间差得到 px/ms否则高刷新率设备上滑动手感会偏快。触摸屏上还要额外处理QTouchEvent或启用Qt::WA_AcceptTouchEvents把 touch 点转成鼠标事件否则手指滑不动。3.4 时间选择器的组合三个 WheelWidget 拼出时分单个滚动选择器只是零件闹钟时间设置界面通常要「小时 分钟」两列并排中间用冒号分隔。组合方式很直接主窗口里放两个WheelWidget分别setItems成 0–23 和 0–59再用布局拼起来。// mainwindow.cpp 里组装时间选择器 auto *hourWheel new WheelWidget(this); auto *minWheel new WheelWidget(this); QStringList hours, minutes; for (int i 0; i 24; i) hours QString(%1).arg(i, 2, 10, QChar(0)); for (int i 0; i 60; i) minutes QString(%1).arg(i, 2, 10, QChar(0)); hourWheel-setItems(hours); minWheel-setItems(minutes); auto *colon new QLabel(:, this); colon-setAlignment(Qt::AlignCenter); auto *layout new QHBoxLayout; layout-addWidget(hourWheel); layout-addWidget(colon); layout-addWidget(minWheel); setLayout(layout); // 任一列变化时汇总成完整时间 connect(hourWheel, WheelWidget::currentIndexChanged, this, [](int h){ m_selectedHour h; }); connect(minWheel, WheelWidget::currentIndexChanged, this, [](int m){ m_selectedMinute m; });arg(i, 2, 10, QChar(0))的作用是补零成两位保证「07」而不是「7」视觉上宽度一致。两列宽度建议设成相同固定值否则数字宽度不同会导致冒号位置漂移。如果要做「上午/下午」或「秒」再加一列即可控件本身是通用的。4. 避坑与常见问题滚动选择器最容易翻车的五个地方4.1 滚动到边界时索引越界崩溃现象向上滚过第一项后程序直接崩调试器停在m_items.at(idx)。原因C 负数取模仍为负idx % size得到负索引QStringList::at不做边界检查。解决统一用((idx % n) n) % n回绕或在at前加qBound(0, idx, n-1)。我一般会在paintEvent开头断言m_items.size() 0空列表直接 return省得后面除零。4.2 高 DPI 屏上文字发虚、选中框错位现象在 4K 屏或系统缩放 150% 时滚动项文字模糊中间选中框和文字对不齐。原因paintEvent里用整数坐标画文字而m_offset是浮点缩放后半像素被截断。解决绘制文字用QRectF而非QRect并开启QPainter::TextAntialiasing选中框坐标也用qreal计算。另外在main.cpp里 Qt5 需显式QApplication::setAttribute(Qt::AA_EnableHighDpiScaling)Qt6 默认开启不用管。4.3 快速滑动后停不下来或直接跳过选中项现象手指快速一甩列表转好几圈才停或者一下跳过好几项。原因m_velocity没有上限且惯性阶段没有和吸附阶段衔接好。解决给速度加qBound(-maxV, v, maxV)限幅maxV取m_itemHeight * 3左右惯性衰减到阈值后立刻切吸附不要在惯性里直接改m_currentIndex否则信号会连发多次。4.4 鼠标滚轮和拖动冲突现象接上wheelEvent支持滚轮后拖动时偶尔跳格。原因滚轮事件和鼠标移动事件都改m_offset但滚轮是离散跳变拖动是连续偏移两者混用没做状态区分。解决滚轮事件里直接按angleDelta().y()/120换算成项数改m_currentIndex后重置m_offset 0并update()不要走惯性逻辑拖动期间用m_isDragging标志屏蔽滚轮。4.5 嵌入布局后控件高度被压缩只显示一项现象把WheelWidget放进QVBoxLayout后控件被压成一条只看得见中间一项。原因QWidget默认sizeHint很小布局按最小尺寸分配。解决重写sizeHint()返回QSize(120, m_itemHeight * 5)并setMinimumHeight(m_itemHeight * 3)或者在布局里给setStretch权重。这个坑很隐蔽因为控件单独跑没问题一进布局就变形。5. 二次开发改造把滚动选择器改成你自己的业务控件5.1 从「时间」泛化到任意枚举值这套控件最值钱的不是时间选择而是「任意字符串列表都能滚」。改造第一步是把setItems(QStringList)保留同时加一个带 value 的版本让显示文本和实际值解耦// 增加 value 映射显示 一月 但取值 1 void WheelWidget::setItems(const QVectorQPairQString, QVariant items) { m_items.clear(); m_values.clear(); for (const auto p : items) { m_items p.first; m_values p.second; } m_currentIndex 0; m_offset 0; update(); } QVariant WheelWidget::currentValue() const { if (m_currentIndex 0 || m_currentIndex m_values.size()) return {}; return m_values.at(m_currentIndex); }这样同一个控件既能做小时分钟也能做「低/中/高」档位、星期、月份甚至设备参数枚举。改造时注意currentIndexChanged信号语义要跟着调整——如果外部只关心 value可以再加一个currentValueChanged(QVariant)信号避免调用方每次自己查表。5.2 加循环/非循环开关与步长闹钟的小时通常要循环23 之后回 0但某些参数选择器到顶就该停。加一个m_wrapAround布尔在paintEvent回绕和索引更新处判断void WheelWidget::setWrapAround(bool enable) { m_wrapAround enable; } // 索引更新处 if (m_wrapAround) { m_currentIndex ((m_currentIndex - delta) % n n) % n; } else { m_currentIndex qBound(0, m_currentIndex - delta, n - 1); m_offset 0; // 非循环时到边界直接归零避免继续拖 }非循环模式下还要在mouseMoveEvent里限制m_offset范围否则用户能拖出空白区。步长比如分钟按 5 分钟一跳则在setItems时直接生成00,05,10...列表即可不必改控件内部逻辑这是「数据层解决、不污染控件」的思路。5.3 验证改造是否正确的三个动作改完别只看界面按这三步验第一把列表设成 1 项、2 项、0 项分别跑看会不会崩或画错第二快速甩动后立刻反向拖看惯性和吸附会不会打架第三在 100%、150%、200% 三档缩放下截图对比选中框和文字是否对齐。我一般还会在currentIndexChanged里打日志确认一次滑动只发一次信号而不是每帧都发——信号风暴是嵌入到复杂界面后卡顿的常见根因。5.4 一个容易忽略的性能习惯最后说个习惯问题。这类自绘控件在paintEvent里创建QPainter、QColor、QFont是常态但如果在循环里反复构造QFont或做字符串arg拼接项多时会有可感知的掉帧。我的做法是把字体、颜色提成成员变量在resizeEvent或setItems时初始化一次paintEvent里只做绘制。从那以后我每次写自绘控件都强制先问一句「这个对象能不能在构造时建好」再动手写循环。希望这套滚动选择器的拆解能帮你在下一个 Qt 界面里少走几段弯路。本文还有配套的精品资源点击获取
