本页内容

PathAttribute QML Type

指定如何在路径(Path)中的指定位置设置一个属性。更多内容...

Import Statement: import QtQuick

属性

详细说明

PathAttribute 对象允许为路径上的各个点指定由名称和值组成的属性。这些属性作为附加属性(Attached Properties)提供给委托。路径上任意特定点处的属性值,是通过该点所绑定的 PathAttributes 进行插值计算得出的。

下面的示例展示了一条路径,路径顶部的项目缩放比例为 30%、不透明度为 50%,而路径底部的项目缩放比例为 100%、不透明度为 100%。请注意,此处使用了PathView.iconScale 和PathView.iconOpacity 附加属性来设置委托对象的缩放比例和不透明度。

PathView 中显示了三个 Qt 徽标项目,其名称分别为:顶部有两个小而模糊的“John Smith”和“Jane Doe”,中间有一个大而清晰的“Bill Jones”。

import QtQuick

Rectangle {
    width: 240; height: 200

    Component {
        id: delegate
        Item {
            width: 80; height: 80
            scale: PathView.iconScale
            opacity: PathView.iconOpacity
            Column {
                Image { anchors.horizontalCenter: nameText.horizontalCenter; width: 64; height: 64; source: icon }
                Text { id: nameText; text: name; font.pointSize: 16 }
            }
        }
    }

    PathView {
        anchors.fill: parent
        model: ContactModel {}
        delegate: delegate
        path: Path {
            startX: 120; startY: 100
            PathAttribute { name: "iconScale"; value: 1.0 }
            PathAttribute { name: "iconOpacity"; value: 1.0 }
            PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
            PathAttribute { name: "iconScale"; value: 0.3 }
            PathAttribute { name: "iconOpacity"; value: 0.5 }
            PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
        }
    }
}

(有关上文 ContactModel 中使用的 ContactModel.qml 的规范,请参阅PathView 文档。)

另请参阅 Path 。

属性文档

name : string

该属性保存待修改属性的名称。

该属性将作为PathView.<name>提供给委托。

请注意,允许使用现有的 Item 属性名称(例如“opacity”)作为属性名。这是因为路径属性会添加一个新的附加属性,该属性绝不会与现有属性发生冲突。

value : real

该属性存储该属性的值。

指定的值可用于影响路径上项目的视觉外观。例如,以下路径指定了一个名为itemRotation 的属性,该属性在路径起始处的值为0,在路径结束处的值为 90。

Path {
    startX: 0
    startY: 0
    PathAttribute { name: "itemRotation"; value: 0 }
    PathLine { x: 100; y: 100 }
    PathAttribute { name: "itemRotation"; value: 90 }
}

在我们的委托中,我们可以将rotation属性绑定到为该属性创建的附加属性 PathView.itemRotation上。

Rectangle {
    width: 10; height: 10
    rotation: PathView.itemRotation
}

随着每个项目沿路径定位,它将相应地被旋转:路径起始处的项目不会被旋转,路径末端的项目将旋转 90 度,而位于路径中点的项目将旋转 45 度。

© 2026 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.