QML Book 第六章 模型、视图及代理 4

6.5 视图知识进阶

6.5.1 PathView

PathView 元素是 Qt Quick 中最强大的，也是最复杂的视图。它可以创建一个视图，其中项目沿任意路径布置。沿着相同的路径，可以详细地控制尺度，不透明度等更多的属性。

使用 PathView 时，必须定义一个代理和一个路径。 除此之外，PathView 本身可以通过一系列属性进行自定义。 最常见的是 pathItemCount，一次控制可见项目的数量，高亮范围控制属性 preferredHighlightBegin，preferredHighlightEnd 和 highlightRangeMode，控制沿着当前项目的路径显示的位置。

在深入了解高亮范围控制属性之前，我们必须先看一下 path 属性。 path 属性希望在 PathView 正在滚动时定义代理遵循的路径的 Path 元素。该路径使用与路径元素（如 PathLine，PathQuad 和 PathCubic）组合的 startX 和 startY 属性来定义。 这些元素连接在一起以形成二维路径。

当定义了路径时，可以使用 PathPercent 和 PathAttribute 元素进一步调整路径。这些放置在路径元素之间，并为路径和代理提供了更精细的粒度控制。PathPercent 控制在每个元素之间覆盖的路径的一部分的大小。反过来，这样做可以控制沿途的代理分布，因为它们按比例分配到进度的百分比。

PathView 的 preferredHighlightBegin 和 preferredHighlightEnd 属性是进入视图的位置属性。他们都期望在 0 和 1 之间的范围内的小数值。预期结束位置也将或多或少等于预期的起始位置。将这两个属性设置为例如 0.5，当前项目将显示在该路径的百分之五十的位置。

在 Path 中，PathAttribute 元素放置在元素之间，就像 PathPercent 元素一样。它们允许您指定沿路径插值的属性值。这些属性附加到代理，并可用于控制任何可想到的属性。

pathview-coverview

下面的示例演示了如何使用 PathView 元素创建用户可以翻转的卡片的视图。它采取了一些技巧来做到这一点。路径由三个 PathLine 元素组成。使用 PathPercent 元素，中心元素正好居中，并提供足够的空间，不被其他元素遮挡。使用 PathAttribute 元素，可以控制旋转，大小和 z 值等属性。

除路径之外，PathView 的 pathItemCount 属性已设置。这样可以控制路径上的可视元素密度。 preferredHighlightBegin、preferredHighlightEnd 和 PathView.onPath 用于控制代理的可见性。

    PathView {
        anchors.fill: parent

        delegate: flipCardDelegate
        model: 100

        path: Path {
            startX: root.width/2
            startY: 0

            PathAttribute { name: "itemZ"; value: 0 }
            PathAttribute { name: "itemAngle"; value: -90.0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
            PathLine { x: root.width/2; y: root.height*0.4; }
            PathPercent { value: 0.48; }
            PathLine { x: root.width/2; y: root.height*0.5; }
            PathAttribute { name: "itemAngle"; value: 0.0; }
            PathAttribute { name: "itemScale"; value: 1.0; }
            PathAttribute { name: "itemZ"; value: 100 }
            PathLine { x: root.width/2; y: root.height*0.6; }
            PathPercent { value: 0.52; }
            PathLine { x: root.width/2; y: root.height; }
            PathAttribute { name: "itemAngle"; value: 90.0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
            PathAttribute { name: "itemZ"; value: 0 }
        }

        pathItemCount: 16

        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
    }

下面显示的代理利用了 PathAttribute 元素中附加的属性 itemZ，itemAngle 和itemScale。值得注意的是，代理的附加属性只能从 wrapper 中获得。因此，rotX 属性被定义为能够从 Rotation 元素内访问该值。

PathView 值得注意的另一个细节是使用附加的 PathView.onPath 属性。将可见性绑定到此是常见的做法，因为这允许 PathView 为隐藏目的保留不可见的元素。通常不能通过裁剪来处理这个问题，因为 PathView 的项目代理放置得比 ListView 或 GridView 视图的项目代理更自由。

    Component {
        id: flipCardDelegate

        BlueBox {
            id: wrapper

            width: 64
            height: 64
            antialiasing: true

            gradient: Gradient {
                GradientStop { position: 0.0; color: "#2ed5fa" }
                GradientStop { position: 1.0; color: "#2467ec" }
            }


            visible: PathView.onPath

            scale: PathView.itemScale
            z: PathView.itemZ

            property variant rotX: PathView.itemAngle
            transform: Rotation {
                axis { x: 1; y: 0; z: 0 }
                angle: wrapper.rotX;
                origin { x: 32; y: 32; }
            }
            text: index
        }
    }

当在 PathView 中转换图像或其他复杂元素时，常用的性能优化技巧是将 Image 元素的平滑（smooth）属性绑定到附加属性 PathView.view.moving。 这意味着图像在移动时不那么平滑漂亮，但在静止时使图像平滑。 当视图处于运动状态时，无需花费处理能力来使图像平滑，因为用户将无法看到这一点。

6.5.2 从 XML 获取模型数据

由于 XML 是无处不在的数据格式，QML 提供了将 XML 数据作为模型的 XmlListModel 元素。该元素可以从本地或远程获取 XML 数据，然后使用 XPath 表达式处理数据。

下面的例子演示从 RSS 流中获取图像。源属性是指通过 HTTP 的删除位置，数据自动下载。

xmllistmodel-images

当数据被下载时，它被处理成模型项目和角色。query 属性是表示创建模型项目的基本查询的 XPath。在此示例中，路径为 /rss/channel/item，因此对于 RSS 标签内的通道标签内的每个项目标签，都会创建一个模型项目。

对于每个模型项目，都会提取多个角色。这些由 XmlRole 元素表示。给每个角色一个名称，代表可以通过附加的属性访问。通过每个角色的 XPath 查询来确定每个这样的属性的实际值。例如，title 属性对应于 title/string() 查询，返回