核心内容摘要
Houdini VEX实战：5个Attribute Wrangle高效技巧让你告别HScript
Flickable 是实现可滚动交互区域的核心控件广泛用于需要展示超出可视区域内容的场景如列表、长文本、图片画廊等。
Flickable 核心定位Flickable 本质是一个“视口”Viewport通过维护内容区域Content Item与可视区域Viewport的相对位置contentX/contentY实现内容的滚动。
其核心能力包括支持触摸/鼠标拖拽滚动Flick 效果惯性滚动释放后继续滑动并逐渐减速边界反弹滚动到边缘时的弹性效果可编程控制滚动位置动画或瞬时跳转。
核心属性与工作机制
内容尺寸与位置控制Flickable 滚动的本质是调整contentX水平偏移和contentY垂直偏移前提是明确内容区域的尺寸contentWidth/contentHeight。
属性说明contentWidth内容区域的宽度默认等于子元素总宽度需显式设置以允许水平滚动。
contentHeight内容区域的高度默认等于子元素总高度需显式设置以允许垂直滚动。
contentX内容区域相对于可视区域的水平偏移范围0~contentWidth - width。
contentY内容区域相对于可视区域的垂直偏移范围0~contentHeight - height。
width/height可视区域视口的尺寸继承自 Item默认由父容器决定。
注意若未显式设置contentWidth/contentHeightFlickable 会自动计算子元素的总尺寸类似Item的隐式尺寸但复杂布局如动态生成内容需手动设置以避免滚动异常。
滚动方向与交互控制属性说明flickableDirection允许的滚动方向枚举值-Flickable.AutoFlickDirection默认自动检测-Flickable.HorizontalFlick仅水平-Flickable.VerticalFlick仅垂直-Flickable.HorizontalAndVerticalFlick双向-Flickable.NoFlick禁止滚动interactive是否允许用户交互拖拽/惯性滚动默认true。
设为false时仅支持程序控制。
boundsBehavior滚动到边界时的行为枚举值-Flickable.StopAtBounds停止在边界-Flickable.DragOverBounds允许拖拽超出边界释放后回弹-Flickable.DragAndOvershootBounds默认允许拖拽超出并保留偏移需配合maximumOvershootmaximumFlickVelocity最大惯性滚动速度像素/秒默认2500嵌入式设备可适当降低以优化性能。
滚动动画与手感调优属性说明pressDelay按下后延迟多久开始滚动毫秒默认0用于区分点击与拖拽如列表项点击。
wheelEnabled是否允许鼠标滚轮滚动默认true嵌入式设备无鼠标时可关闭。
flickDeceleration惯性滚动减速度像素/秒²默认1500值越大减速越快手感更“硬”。
reboundDuration边界回弹动画时长毫秒默认400嵌入式设备可缩短至200提升响应。
关键信号与函数Flickable 提供丰富的信号用于监听滚动状态以及函数用于程序化控制滚动
核心信号flickStarted()开始惯性滚动时触发如快速拖拽后释放。
flickEnded()惯性滚动结束时触发速度降为0。
movementStarted()用户开始拖拽时触发区别于flickStarted包含慢速拖拽。
movementEnded()用户结束拖拽时触发无论是否触发惯性滚动。
contentXChanged()/contentYChanged()内容偏移变化时触发可用于同步其他UI状态。
控制函数flick(xVelocity, yVelocity)以指定速度启动惯性滚动单位像素/秒。
cancelFlick()立即停止当前惯性滚动。
ensureVisible(item, xmargin, ymargin)滚动到使目标item可见带边距常用于列表定位。
positionViewAtBeginning()/positionViewAtEnd()滚动到内容起始/末尾。
实战从基础到进阶用法
基础示例简单滚动区域import QtQuick
15 import QtQuick.Window
15 Window { width: 300; height: 200; visible: true Flickable { anchors.fill: parent contentWidth: column.width; contentHeight: column.height // 显式设置内容尺寸 clip: true // 裁剪超出可视区域的内容必开否则内容溢出 Column { // 内容区域子元素 id: column spacing: 10 Repeater { model: 20 Rectangle { width: 280; height: 40 color: index % 2 ? lightblue : lightgreen Text { text: Item index; anchors.centerIn: parent } } } } } }关键点必须设置contentWidth/contentHeight或通过子元素隐式尺寸clip: true确保内容不会溢出可视区域嵌入式设备避免绘制冗余内容子元素如Column作为内容载体其尺寸决定滚动范围。
进阶双向滚动边界反弹Flickable { width: 300; height: 200 contentWidth: img.width; contentHeight: img.height // 图片尺寸决定滚动范围 flickableDirection: Flickable.HorizontalAndVerticalFlick // 双向滚动 boundsBehavior: Flickable.DragOverBounds // 允许拖拽超出边界并回弹 reboundDuration: 300 // 回弹动画缩短至300ms嵌入式优化 Image { id: img source: large_image.jpg // 大尺寸图片超出视口 smooth: true // 缩放时平滑渲染嵌入式GPU加速 } }
程序化控制滚动如自动翻页Flickable { id: flick width: 300; height: 200 contentWidth: 900; contentHeight: 600 // 3x3网格内容 clip: true Grid { columns: 3; spacing: 5 Repeater { model: 9; Rectangle { width: 90; height: 60; color: Qt.rgba(Math.random(), Math.random(), Math.random(),
} } } // 自动滚动到下一页每3秒 Timer { interval: 3000; running: true; repeat: true onTriggered: { var targetX (flick.contentX flick.width) % (flick.contentWidth - flick.width) flick.contentX targetX // 瞬时跳转无动画 // 或使用动画 // anim.start() } } NumberAnimation { id: anim target: flick property: contentX to: (flick.contentX flick.width) % (flick.contentWidth - flick.width) duration: 500; easing.type: Easing.InOutQuad } }
嵌入式场景优化技巧在嵌入式设备中Flickable 需重点优化性能与功耗减少重绘开销设置clip: true避免绘制不可见内容对静态内容启用cache: trueQML
15 支持预渲染内容到离屏缓冲避免在滚动区域内使用复杂 Shader 或透明效果。
控制滚动流畅度降低maximumFlickVelocity如设为1500和flickDeceleration如1000减少GPU计算量对动态内容如实时视频流使用Loader延迟加载避免一次性渲染所有子元素。
与派生类 ScrollView 的区别Qt 提供了ScrollView作为 Flickable 的封装默认添加滚动条ScrollBar适合快速开发。
但 Flickable 更灵活ScrollView强制添加滚动条可通过ScrollBar.horizontal.policy: Qt.ScrollBarAlwaysOff隐藏Flickable 可直接嵌入复杂布局如作为ListView的代理内容而ScrollView更适合独立滚动区域。
总结Flickable 是 Qt Quick 中实现滚动交互的基石掌握其属性与机制后可灵活应对嵌入式设备的界面需求如泛广电监视器的多源预览、菜单导航。
结合性能优化技巧如裁剪、缓存、简化内容能在资源受限的环境中保持流畅体验。
惠州西湖