QML类型：PathView

最新推荐文章于 2024-09-02 11:50:46 发布

友善啊，朋友

最新推荐文章于 2024-09-02 11:50:46 发布

阅读量2.1k

点赞数

分类专栏： # Qt Quick模型视图委托文章标签： qml

本文链接：https://blog.csdn.net/kenfan1647/article/details/120835849

版权

Qt Quick模型视图委托专栏收录该内容

17 篇文章 32 订阅

订阅专栏

一、描述

PathView继承自 Item，用于显示来自内置 QML 类型（如 ListModel 和 XmlListModel）或从 QAbstractListModel 继承的 C++ 中定义的自定义模型类创建的模型的数据。

为路径上的每个项目实例化委托。可以轻弹项目以沿路径移动它们。

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    id:root
    visible: true
    width: 640
    height: 480

    Rectangle
    {
        anchors.fill: parent
        Component
        {
            id: delegate
            Column
            {
                id: wrapper
                opacity: PathView.isCurrentItem ? 1 : 0.5
                Image
                {
                    anchors.horizontalCenter: nameText.horizontalCenter
                    width: 64; height: 64
                    source: icon
                }
                Text
                {
                    id: nameText
                    text: name
                    font.pointSize: 16
                }
            }
        }

        PathView
        {
            anchors.fill: parent
            model: ListModel
            {
                ListElement
                {
                    name: "张三"
                    icon: "qrc:/www.jpg"
                }
                ListElement
                {
                    name: "李四"
                    icon: "qrc:/www.jpg"
                }
                ListElement
                {
                    name: "王五"
                    icon: "qrc:/www.jpg"
                }
            }

            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 }
            }
        }
    }
}

PathView 不会自动处理键盘导航。这是因为用于导航的键将取决于路径的形状。通过将 focus 设置为 true 并调用 decrementCurrentIndex() 或 incrementCurrentIndex() 可以简单地添加导航。

使用左右方向键进行导航：

            focus: true
            Keys.onLeftPressed: decrementCurrentIndex()
            Keys.onRightPressed: incrementCurrentIndex()

PathView 不会自动启用裁剪。如果视图没有被另一个项目或屏幕裁剪，则有必要设置 clip: true 以便很好地裁剪视图外的项目。

二、属性成员

1、cacheItemCount : int

路径外缓存的最大项目数。

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

委托中的对象和绑定越少，滚动视图的速度就越快。设置 cacheItemCount 只会推迟由缓慢加载委托引起的问题，它不是这种情况的解决方案。

2、dragMargin : real

此属性保存与启动鼠标拖动的路径的最大距离。

默认情况下，只能通过单击项目来拖动路径。如果dragMargin 大于零，则可以通过在路径的dragMargin 像素内单击来启动拖动。

3、dragging : bool

当前是否正在由于用户拖动视图而移动。

4、flickDeceleration : real

轻弹减速的速率。默认值为 100。

5、flicking : bool

当前是否正在由于用户轻弹视图而移动。

6、interactive : bool

用户不能拖动或轻弹非交互式的 PathView。

此属性对于暂时禁用轻弹很有用。这允许与 PathView 的子项进行特殊交互。

7、maximumFlickVelocity : real

此属性保存用户可以以像素/秒为单位轻弹视图的近似最大速度。默认值取决于平台。

8、movementDirection : enumeration

此属性确定设置当前索引时项目移动的方向。

PathView.Shortest：默认值，项目向需要最少移动的方向移动，可以是负的或正的。
PathView.Negative：项目向后移动到目的地。
PathView.Positive：项目朝着目的地前进。

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

9、moving : bool

此属性保存视图当前是否由于用户拖动或轻弹视图而移动。

10、offset : real

指定项目沿路径距离其初始位置的距离。范围从 0 到模型中的项目数。

11、path : Path

用于布置项目的路径。

12、pathItemCount : int

此属性保存路径上可见的项目数。将此值设置为 undefined 将显示路径上的所有项目。

三、属性成员

1、PathView.isCurrentItem : bool

此委托是否当前项目。它附加到委托的每个实例。此属性可用于调整当前项目的外观。

    Component 
    {
        id: delegate
        Column 
        {
            id: wrapper
            opacity: PathView.isCurrentItem ? 1 : 0.5
            Image 
            {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: icon
            }
            Text 
            {
                id: nameText
                text: name
                font.pointSize: 16
            }
        }
    }

2、PathView.onPath : bool