当前位置：首页 > news >正文

QML 滑动与翻转效果（Flickable与Flipable）

news 来源：原创 2025/6/1 12:56:19

引言

Qt Quick 框架提供的 Flickable 与 Flipable 组件，为开发者提供了一套完备的动态界面解决方案。Flickable 组件内置的惯性滚动、边界反弹与内容裁剪机制，能够精准复现原生触控设备的操作手感；而 Flipable 组件则通过可定制的旋转轴心与过渡动画，实现了三维空间变换效果。接下来，本文将通过两个具体实现案例，说明如何使用这2个组件。

核心组件解析

以下列出示例中用到的属性。

Flickable基础属性

属性名称	类型	说明
contentWidth	real	可滚动内容的总宽度
contentHeight	real	可滚动内容的总高度
boundsBehavior	enum	边界回弹策略（DragAndOvershootBounds/StopAtBounds）
clip	bool	内容裁剪开关

Flipable核心特性

特性名称	作用描述
front属性	定义正面显示的QML组件
back属性	定义背面显示的QML组件
transform属性	实现3D变换的效果组合

示例解析

示例1：可滑动列表（FlickableDemo）

import QtQuick
import QtQuick.ControlsRectangle {width: 400height: 400Flickable {id: flickanchors.fill: parentcontentWidth: column.widthcontentHeight: column.heightclip: true  // 裁剪超出区域的内容// 边界回弹效果boundsBehavior: Flickable.DragAndOvershootBounds//boundsBehavior: Flickable.StopAtBounds// 内容区域Column {id: columnspacing: 20width: flick.widthRepeater {model: 20Rectangle {width: column.width - 20height: 50color: index % 2 ? "darkCyan" : "cyan"border.color: "gray"Text {anchors.centerIn: parenttext: "项目 " + (index + 1)font.pixelSize: 20}}}}// 滚动条指示器ScrollBar.vertical: ScrollBar {policy: ScrollBar.AsNeeded}}
}

代码说明：

这段代码整体实现了一个具有垂直滚动功能的列表界面，通过 Flickable 实现了触摸或鼠标拖动滚动，以及边界回弹等效果，利用 Repeater 生成了多个带有编号和交替颜色的矩形项，并通过滚动条来辅助用户查看所有内容。

Flickable 容器：

contentWidth 和 contentHeight 分别设置为 column 的宽度和高度，这是因为 Flickable 内部放置了一个 Column 布局，其内容的大小由 Column 决定，这样可以让 Flickable 根据内容的大小来确定可滚动的范围。
clip: true 表示裁剪超出 Flickable 边界的内容，防止内容在滚动时显示在 Flickable 的外部区域。
boundsBehavior 属性设置为 Flickable.DragAndOvershootBounds，允许用户在滚动时可以拖拽内容超出边界，并在释放后内容会回弹到边界内，而注释掉的 Flickable.StopAtBounds 选项则是会在滚动到边界时直接停止，没有回弹效果。

Repeater 生成内容：

model: 20 —> 它会根据这个数字重复生成 20 个相同的子元素。

运行效果：

请添加图片描述

示例2：可翻转卡片（FlipableCard）

import QtQuickRectangle {width: 400height: 400Flipable {id: flipablewidth: 300height: 300anchors.centerIn: parentproperty bool flipped: falsefront: Image {source: "qrc:/images/card_front.png"anchors.fill: parent}back: Image {source: "qrc:/images/card_back.png"anchors.fill: parent}transform: [Rotation {id: rotationorigin.x: flipable.width/2origin.y: flipable.height/2axis.x: 0; axis.y: 1; axis.z: 0angle: 0}]states: State {name: "back"when: flipable.flippedPropertyChanges { target: rotation; angle: 180 }}transitions: Transition {SequentialAnimation {NumberAnimation {target: rotationproperty: "angle"duration: 1000easing.type: Easing.InOutQuad}ScriptAction {script: console.log("翻转完成")}}}MouseArea {anchors.fill: parentonClicked: flipable.flipped = !flipable.flipped}}
}

代码说明：

这段代码实现了一个翻转动画效果，通过点击卡片可以使其在正面和背面之间翻转切换，在需要展示双面信息（附带切换效果）的界面中非常实用。（卡片资源通过通义千问生成）

Flipable 元素：

property bool flipped: 用于控制卡片是否处于翻转状态，当其值为 true 时，卡片会翻转到背面显示；为 false 时，显示正面。

front 和 back 属性：

front 属性关联了一个 Image 元素，表示卡片的正面；而back 属性关联了卡片的背面。

transform 属性：

定义了一个 Rotation 对象，用于控制卡片的翻转动画。
origin.x 和 origin.y 分别设置为 flipable.width/2 和 flipable.height/2，表示旋转的原点是 Flipable 元素的中心点。
axis.x: 0; axis.y: 1; axis.z: 0 表示旋转轴为 Y 轴，这样卡片会沿着垂直方向进行翻转，类似于常见的卡片翻转效果。

states 属性：

定义了一个状态对象，用于描述卡片翻转后的状态。
when: flipable.flipped 指定当 Flipable 元素的 “flipped” 属性为 true 时，进入这个状态。
PropertyChanges 元素用于在状态切换时改变 Rotation 对象的 “angle” 属性值，将其设置为 180 度，从而实现卡片的翻转效果，使背面朝上。

transitions 属性：