qml PathView详解

1、概述

PathView 是 Qt Quick 中一个非常强大的视图组件，它基于一个 Path 来展示视图项（如 Item、Rectangle 等）。PathView 可以让你按照定义的路径动态地显示多个元素，并且支持动画、滑动等功能。这个视图控件的最大特点是能够通过路径控制子项的布局和动画效果，通常用于实现一些沿路径运动的效果，例如轮播图、路径动画、数据可视化中的流动效果等。

2、重要属性

PathView 的常用属性主要包括以下几项：

model (ListModel 或 ItemModel):
- 用于定义 PathView 中显示的内容模型。每个模型项将作为视图的一个子项渲染。
path (Path):
- 定义了视图项的移动路径。可以通过 QML 的 Path 元素定义一个复杂的路径，路径上将会显示视图项。
delegate (Item):
- 用于定义视图中每个单独项的外观。通常是一个 Rectangle、Image 或自定义 Item。
currentIndex (int):
- 当前显示项的索引。默认值为 -1，表示没有项被选中。
currentItem (Item):
- 当前显示的项（根据 currentIndex 确定）。
preferredWidth (real):
- 设置视图的首选宽度。
preferredHeight (real):
- 设置视图的首选高度。
orientation (enum):
- 设置路径的布局方向。可选值有 Horizontal、Vertical。
cacheMode (enum):
- 设置路径视图的缓存模式。它的值可以是 NoCache（不缓存）或者 ItemCache（缓存视图项）。缓存模式能在需要时提高性能。
pathSubSegment (real):
- 用于控制路径的子段动画效果，即每次动画更新时路径的部分。

3、重要方法

以下是 PathView 的一些常用方法：

moveTo (int index):
- 将视图的当前项移动到指定的索引位置。
next:
- 移动到下一个视图项。如果当前项已经是最后一个，则会回到第一个。
previous:
- 移动到前一个视图项。如果当前项已经是第一个，则会回到最后一个。
ensureVisible (int index):
- 确保视图项在路径中可见。如果指定的项在视图范围外，则自动滚动到该项。
reset:
- 重置路径视图项的位置。通常与动画配合使用，用于重新开始视图项的路径动画。

4、重要信号

PathView 有多个信号，用于通知外部事件发生，以下是一些常用的信号：

currentIndexChanged (int index):
- 当当前项的索引发生变化时发出该信号。
currentItemChanged (Item item):
- 当当前项发生变化时发出该信号。
flickableAreaChanged (FlickableArea area):
- 当视图的滚动区域发生变化时发出该信号。
positionChanged (real x, real y):
- 当路径视图项的位置信息发生变化时发出该信号。通常在动画或交互过程中触发。
countChanged (int count):
- 当模型中项的数量发生变化时发出该信号。

5、常用枚举类型

Orientation:
- Horizontal：表示路径视图是水平排列的。
- Vertical：表示路径视图是垂直排列的。
CacheMode:
- NoCache：不缓存路径视图项，适用于少量元素。
- ItemCache：缓存路径视图项，适用于大量元素，能提高性能。

import QtQuick 2.14
import QtQuick.Window 2.12
import QtQuick.Controls 2.14ApplicationWindow {visible: truewidth: 640height: 480title: qsTr("PathView Example")color: "black"PathView {id: pathViewanchors.fill: parentmodel: ListModel {ListElement { text: "Item 1"; color: "red" }ListElement { text: "Item 2"; color: "green" }ListElement { text: "Item 3"; color: "blue" }// 更多元素...}delegate: Rectangle {width: pathView.width * 0.3height: pathView.height * 0.3color: model.colorborder.color: "white"Text {anchors.centerIn: parentfont.pointSize: 24text: model.text}}path: Path {startX: pathView.width / 2startY: pathView.heightPathCubic {x: pathView.width / 2y: 0control1X: pathView.widthcontrol1Y: pathView.height / 2control2X: 0control2Y: pathView.height / 2}}preferredHighlightBegin: 0.3preferredHighlightEnd: 0.7pathItemCount: 5flickDeceleration: 200// 假设有一个高亮组件highlight: Rectangle {width: 60height: 60color: "yellow"radius: 10}}
}