QML Tumbler组件合集【追加示例：水平滚动选择器】

目录1. 引言2. 演示效果3. 代码说明3.1 水平滚动选择器 (TumblerHorizontal.qml)4. 技术要点4.1 PathView 实现水平 Tumbler 的核心原理4.2 优化技巧5. 工程下载1. 引言本文是 QML Tumbler 组件合集 的补充篇专门介绍水平方向滚动的选择器实现。原生 QML Tumbler 组件仅支持垂直方向滚动但在很多移动端和大屏应用场景中水平滚动选择器能提供更好的用户体验尤其适合城市选择、分类切换、选项卡等横向排列的选择场景。本文将使用 Qt Quick Controls 中的 PathView 组件实现一个效果优雅的水平滚动选择器具备选中项放大高亮、平滑滚动动画和实时选中反馈等特性。2. 演示效果水平滚动选择器效果如下水平方向滚动支持左右拖动滚动惯性效果流畅自然选中项高亮中间选中项字体放大、颜色为红色、加粗显示渐变效果两侧选项随着距离中间的距离逐渐缩小、透明度降低半透明背景高亮中间选中区域有红色半透明圆角背景实时反馈底部实时显示当前选中的城市名称3. 代码说明3.1 水平滚动选择器 (TumblerHorizontal.qml)代码实现import QtQuick import QtQuick.Controls BaseRect { width: 515 height: 250 Column { anchors.fill: parent anchors.margins: 15 spacing: 15 Text { text: 水平方向滚动 font.pointSize: 13 } PathView { id: pathView width: parent.width height: parent.height * 0.65 model: [北京, 上海, 广州, 深圳, 杭州, 成都, 武汉, 南京, 西安, 重庆] currentIndex: 2 pathItemCount: 7 preferredHighlightBegin: 0.5 preferredHighlightEnd: 0.5 highlightRangeMode: PathView.StrictlyEnforceRange dragMargin: pathView.width / 2 path: Path { startX: 0 startY: pathView.height / 2 PathAttribute { name: itemScale; value: 0.6 } PathAttribute { name: itemOpacity; value: 0.3 } PathLine { x: pathView.width / 2; y: pathView.height / 2 } PathAttribute { name: itemScale; value: 1.0 } PathAttribute { name: itemOpacity; value: 1.0 } PathLine { x: pathView.width; y: pathView.height / 2 } PathAttribute { name: itemScale; value: 0.6 } PathAttribute { name: itemOpacity; value: 0.3 } } delegate: Text { width: 80 height: pathView.height text: modelData font.pixelSize: 14 PathView.itemScale * 6 color: PathView.isCurrentItem ? #e91e63 : #333 font.bold: PathView.isCurrentItem horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter opacity: PathView.itemOpacity scale: PathView.itemScale } Rectangle { width: 80 height: parent.height * 0.55 radius: 8 color: #e91e63 opacity: 0.12 x: parent.width / 2 - width / 2 y: parent.height / 2 - height / 2 } } Text { anchors.horizontalCenter: parent.horizontalCenter text: 当前选择: pathView.model[pathView.currentIndex] font.pointSize: 12 color: #e91e63 } } }关键说明使用 PathView 组件实现水平滚动解决原生 Tumbler 仅支持垂直滚动的限制通过 Path 和 PathAttribute 定义项目在路径上不同位置的缩放比例和透明度中间位置 itemScale 为 1.0原始大小两端为 0.6缩小 40%中间位置 itemOpacity 为 1.0完全不透明两端为 0.3半透明自定义 delegate 根据 PathView.itemScale 和 PathView.itemOpacity 属性动态调整样式选中项颜色为红色 #e91e63 并加粗未选中项为深灰色 #333中间添加红色半透明高亮矩形固定在中间位置提升选中视觉反馈底部实时显示当前选中的值使用 pathView.model[pathView.currentIndex] 获取选中项数据4. 技术要点4.1 PathView 实现水平 Tumbler 的核心原理1. 基础属性配置path定义项目滚动的路径这里使用直线 PathLine 实现水平路径PathAttribute定义路径上不同位置的属性值实现平滑过渡效果currentIndex当前选中项的索引pathItemCount同时可见的项目数量preferredHighlightBegin/End设置选中项在路径上的位置为 0.5中间highlightRangeMode: PathView.StrictlyEnforceRange强制选中项始终保持在中间位置2. 属性访问方式在 delegate 中通过PathView.属性名访问 PathAttribute 定义的属性通过PathView.isCurrentItem判断当前 delegate 是否为选中项通过pathView.currentIndex获取或设置当前选中的索引3. 与垂直 Tumbler 的区别特性垂直 Tumbler水平 PathView 实现滚动方向垂直水平实现组件TumblerPathView样式控制Tumbler.displacementPathAttribute 自定义属性适用场景时间、日期选择等城市、分类、选项切换等4.2 优化技巧1. 性能优化合理设置 pathItemCount避免同时加载过多项目delegate 避免过于复杂的布局和动画效果确保滚动流畅大量数据时考虑使用动态加载或分页机制2. 交互优化设置合适的 dragMargin提升触摸和鼠标拖动的灵敏度选中项使用明显的视觉区分放大、变色、背景高亮提供文本反馈显示当前选中值提升用户体验3. 样式定制可以修改 PathAttribute 的值调整缩放和透明度的渐变幅度可以修改 Path 路径实现弧形、圆形等特殊滚动效果可以自定义 delegate 实现图片、复杂布局等展示效果5. 工程下载本文补充的水平滚动选择器已加入原示例工程包含完整的代码和运行环境。下载链接QML Tumbler 组件合集