PathView QML Type

在路径上列出模型提供的项目。更多

Import Statement: import QtQuick
Inherits:

Item

属性

附属物业

信号

方法

详细说明

PathView 可显示从内置 QML 类型(如ListModelXmlListModel )创建的模型数据,或从QAbstractListModel 继承的 C++ 定义的自定义模型类数据。

视图有一个model 和一个delegate ,前者定义要显示的数据,后者定义数据的显示方式。delegate 是为path 上的每个项目实例化的。可以通过滑动项目使其沿路径移动。

例如,如果在一个文件ContactModel.qml 中定义了这样一个简单的列表模型:

import QtQuick

ListModel {
    ListElement {
        name: "Bill Jones"
        icon: "pics/qtlogo.png"
    }
    ListElement {
        name: "Jane Doe"
        icon: "pics/qtlogo.png"
    }
    ListElement {
        name: "John Smith"
        icon: "pics/qtlogo.png"
    }
}

这些数据可以用 PathView 表示,如下所示:

import QtQuick

Rectangle {
    width: 240; height: 200

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

    PathView {
        anchors.fill: parent
        model: ContactModel {}
        delegate: delegate
        path: Path {
            startX: 120; startY: 100
            PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
            PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
        }
    }
}

(请注意,上述示例使用PathAttribute 来缩放和修改项目旋转时的不透明度。这些附加代码可参见PathAttribute 文档)。

PathView 不会自动处理键盘导航。这是因为用于导航的按键取决于路径的形状。添加导航功能非常简单,只需将focus 设置为true 并调用decrementCurrentIndex() 或incrementCurrentIndex() 即可,例如使用左右箭头键导航:

PathView {
    // ...
    focus: true
    Keys.onLeftPressed: decrementCurrentIndex()
    Keys.onRightPressed: incrementCurrentIndex()
}

路径视图本身就是一个焦点范围(详见 Qt Quick 中的键盘焦点)。

委托是根据需要实例化的,可以随时销毁。绝不应在委托中存储状态。

PathView 为委托的根项附加了许多属性,例如PathView.isCurrentItem 。在下面的示例中,根委托项可以直接访问该附加属性,即PathView.isCurrentItem ,而子nameText 对象必须引用该属性,即wrapper.PathView.isCurrentItem

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

请注意,视图不会自动启用剪辑。如果视图没有被其他项目或屏幕剪切,则有必要设置clip: true,以便很好地剪切视图外的项目。

另请参阅 Path,QML 数据模型,ListView,GridView, 和Qt Quick 示例 - 视图

属性文档

highlightRangeMode : enumeration

preferredHighlightBegin : real

preferredHighlightEnd : real

这些属性设置了视图中高亮显示(当前项目)的首选范围。首选值必须在01 的范围内。

highlightRangeMode 的有效值为

常量说明
PathView.NoHighlightRange不应用范围:高亮显示将在视图中自由移动。
PathView.ApplyRange视图会尝试将高光保持在范围内,但在路径两端或由于鼠标交互作用,高光可能会超出范围。
PathView.StrictlyEnforceRange高亮显示永远不会超出范围。这意味着如果键盘或鼠标操作导致高亮显示超出范围,当前项目将发生变化。

默认值是PathView.StrictlyEnforceRange

定义高亮范围是影响视图移动时当前项目最终位置的正确方法。例如,如果您希望当前选中的项目位于路径的中间,那么请将高亮范围设置为 0.5,0.5,并将highlightRangeMode 设置为PathView.StrictlyEnforceRange。这样,当路径滚动时,当前选中的项目将是位于该位置的项目。这也适用于当前选定项发生变化时--它会滚动到首选高亮范围内。此外,无论是否存在高亮显示,当前项目索引的行为都会发生。

注意: 有效范围要求preferredHighlightEnd 大于或等于preferredHighlightBegin


cacheItemCount : int

该属性保留了在路径外缓存的最大项目数。

例如,如果PathView 的模型包含 20 个项目,pathItemCount 为 10,cacheItemCount 为 4,则最多将创建 14 个项目,其中 10 个在路径上可见,4 个为不可见的缓存项目。

缓存委托是异步创建的,允许在多个帧中创建,并减少跳帧的可能性。

注意: 设置此属性并不能代替创建有效的委托。它可以提高滚动行为的流畅性,但会增加内存使用量。委托中的对象和绑定越少,视图滚动的速度就越快。重要的是要认识到,设置 cacheItemCount 只能延缓加载速度慢的委托所导致的问题,并不能解决这种情况。

另请参阅 pathItemCount


count : int [read-only]

此属性保存模型中的项目数。


currentIndex : int

该属性保存当前项目的索引。


currentItem : Item [read-only]

该属性保存视图中的当前项目。


delegate : Component

委托提供了一个模板,定义了视图实例化的每个项目。索引作为可访问的index 属性公开。根据数据模型的类型,模型的属性也是可用的。

当指定pathItemCount 时,委托中对象和绑定的数量会直接影响视图的闪烁性能。如果可能,请将正常显示委托时不需要的功能放在Loader 中,以便在需要时加载其他组件。

请注意,PathView 将根据委托中根项目的大小来布局项目。

下面是一个委托示例:

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

dragMargin : real

该属性保留了启动鼠标拖动的路径的最大距离。

默认情况下,只有单击项目才能拖动路径。如果 dragMargin 大于零,则在路径的 dragMargin 像素范围内单击即可启动拖动。


dragging : bool [read-only]

此属性显示当前视图是否因用户拖动而移动。


flickDeceleration : real

该属性设置了弹动减速的速度。

默认值为 100。


flicking : bool [read-only]

该属性显示当前视图是否因用户弹动而移动。


highlight : Component

该属性显示用作高亮显示的组件。

将为每个视图创建一个高亮组件实例。生成的组件实例的几何形状将由视图管理,以便与当前项目保持一致。

下面的示例演示了如何制作一个简单的突出显示。请注意PathView.onPath attached 属性的使用,以确保从路径上弹开时隐藏高亮显示。

Component {
    Rectangle {
        visible: PathView.onPath
        // ...
    }
}

另请参阅 highlightItemhighlightRangeMode


highlightItem : Item [read-only]

highlightItem 在 组件中创建的高亮显示项。highlight

另请参阅 highlight


highlightMoveDuration : int

该属性保存高亮显示委托的移动动画持续时间。

如果highlightRangeMode 是 StrictlyEnforceRange,那么该属性将决定项目沿路径移动的速度。

持续时间的默认值为 300ms。


interactive : bool

用户不能拖动或滑动非交互式的PathView

该属性可用于暂时禁用弹动功能。这允许与PathView 的子项进行特殊交互。


maximumFlickVelocity : real

该属性是用户弹动视图的大约最大速度,单位为像素/秒。

默认值取决于平台。


model : model

该属性包含为视图提供数据的模型。

模型提供一组数据,用于为视图创建项目。对于大型或动态数据集,模型通常由 C++ 模型对象提供。也可使用ListModel 类型直接在 QML 中创建模型。

注意: 更改模型会将偏移量和currentIndex 重置为 0。

另请参阅 数据模型


movementDirection : enumeration

此属性决定设置当前索引时项目移动的方向。可能的值有

常量说明
PathView.Shortest(默认值)项目向需要最少移动的方向移动,可以是NegativePositive
PathView.Negative项目向后向目的地移动。
PathView.Positive物品朝目的地向前移动。

例如,假设模型中有 5 个条目,currentIndex0 。如果currentIndex 设置为2

  • Positive 移动方向的顺序如下:0, 1, 2
  • Negative 移动方向将导致以下顺序:0, 5, 4, 3, 2
  • Shortest 移动方向与Positive 移动方向的顺序相同。

注意: 此属性不会影响incrementCurrentIndex() 和decrementCurrentIndex() 的移动。


moving : bool [read-only]

该属性表示视图当前是否因用户拖动或滑动而移动。


offset : real

偏移量指定项目从初始位置沿路径移动的距离。这是一个实数,范围从0 到模型中的项目计数。


path : Path

该属性保存用于布局项目的路径。更多信息请参阅Path 文档。


pathItemCount : int

该属性表示在同一时间路径上可见的项目数。

将 pathItemCount 设置为未定义,将显示路径上的所有项目。


snapMode : enumeration

此属性决定项目在拖动或轻移后的沉降方式。可能的值有

常数说明
PathView.NoSnap(默认)项目沿路径的任何位置停止。
PathView.SnapToItem项目与preferredHighlightBegin 对齐。
PathView.SnapOneItem在松开按键时,项目与最靠近preferredHighlightBegin 的项目之间的距离不超过一个项目。这种模式特别适用于一次移动一个页面。

snapMode currentIndex要在移动视图时更新 ,请将 设置为 (默认为 )。currentIndex highlightRangeMode PathView.StrictlyEnforceRange PathView

另请参阅 highlightRangeMode


附加属性文档

PathView.isCurrentItem : bool [read-only]

如果此委托是当前项目,则此附加属性为 true;否则为 false。

它附加到委托的每个实例。

此属性可用于调整当前项目的外观。

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

PathView.onPath : bool [read-only]

此附加属性可确定项目当前是否在路径上。

如果已设置pathItemCount ,则可能会出现某些项目已被实例化,但不被视为当前在路径上的情况。例如,这些项目通常会被设置为不可见:

Component {
    Rectangle {
        visible: PathView.onPath
        // ...
    }
}

它附加到委托的每个实例。


PathView.view : PathView [read-only]

此附加属性包含管理此委托实例的视图。

它附加到委托的每个实例。


信号文档

dragEnded()

该信号在用户停止拖动视图时发出。

如果在松开触摸/鼠标按钮时拖动的速度足够大,则会开始弹动。

注: 相应的处理程序是onDragEnded


dragStarted()

当用户交互导致视图开始被拖动时,将发出该信号。

注: 相应的处理程序是onDragStarted


flickEnded()

当视图因弹动而停止移动时,将发出该信号。

注: 相应的处理程序是onFlickEnded


flickStarted()

该信号在视图被弹动时发出。当鼠标或触控被释放时,视图仍在运动,此时视图开始弹动。

注: 相应的处理程序是onFlickStarted


movementEnded()

当视图因用户交互而停止移动时,会发出该信号。如果产生了滑动,则一旦滑动停止,就会发出该信号。如果未生成弹动,则在用户停止拖动(即释放鼠标或触摸)时发出此信号。

注: 相应的处理程序是onMovementEnded


movementStarted()

当视图因用户交互而开始移动时,将发出该信号。

注: 相应的处理程序是onMovementStarted


方法文档

decrementCurrentIndex()

减小当前索引。

注意:方法只能在组件完成后调用。


incrementCurrentIndex()

递增当前索引。

注意:方法只能在组件完成后调用。


intindexAt(realx, realy)

返回包含点x 的项目索引,y (以内容坐标表示)。如果在指定的点上没有项目,则返回-1。

注意:方法只能在组件完成后调用。


Item itemAt(real x, real y)

Returns the item containing the pointx,y in content coordinates.如果在指定的点上没有项目,则返回 null。

注意:方法只能在组件完成后调用。


Item itemAtIndex(int index)

返回index 的项目。如果该索引没有项目,例如因为尚未创建,或因为已从可见区域平移并从缓存中删除,则返回 null。

注意:此方法只能在组件完成后调用。也不应存储返回值,因为如果视图释放了该项目,一旦控件离开调用范围,返回值就会变为空值。


positionViewAtIndex(int index, PositionMode mode)

定位视图,使index 位于mode 指定的位置:

常量说明
PathView.Beginning将项目定位在路径的起点。
PathView.Center将项目定位在路径的中心。
PathView.End将项目定位在路径的末端。
PathView.Contain确保项目位于路径上。
PathView.SnapPosition将项目定位在preferredHighlightBegin 上。该模式仅在highlightRangeMode 为 StrictlyEnforceRange 或通过snapMode 启用抢拍时有效。

注意:方法只能在组件完成后调用。要在启动时定位视图,应通过 Component.onCompleted 调用此方法。例如,在结束时定位视图:

Component.onCompleted: positionViewAtIndex(count - 1, PathView.End)

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.