Qt学习之路287模型视图高级

PathView是QtQuick中最强大的视图，同时也是最复杂的。PathView允许创建一种更灵活的视图。在这种视图中，数据项并不是方方正正，而是可以沿着任意路径布局。沿着同一布局路径，数据项的属性可以被更详细的设置，例如缩放、透明度等。

使用PathView首先需要定义一个代理和一个路径。除此之外，PathView还可以设置很多其它属性，其中最普遍的是pathItemCount，用于设置可视数据项的数目；preferredHighlightBegin、preferredHighlightEnd和highlightRangeMode可以设置高亮的范围，也就是沿着路径上面的当前可以被显示的数据项。

在深入了解高亮范围之前，我们必须首先了解path属性。path接受一个Path元素，用于定义PathView中的代理所需要的路径。该路径使用startX和startY属性，结合PathLine、PathQuad、PathCubic等路径元素进行定义。这些元素可以结合起来形成一个二维路径。

一旦路径定义完成，我们可以使用PathPercent和PathAttribute元素进行调整。这些元素用于两个路径元素之间，更好的控制路径和路径上面的代理。PathPercent控制两个元素之间的路径部分有多大。它控制了路径上面代理的分布，这些代理按照其定义的百分比进行分布。

PathAttribute元素同PathPercent同样放置在元素之间。该元素允许沿路径插入一些属性值。这些属性值附加到代理上面，可用于任何能够使用的属性。

下面的例子演示了如何利用PathView实现卡片的弹入。这里使用了一些技巧来达到这一目的。它的路径包含三个PathLine元素。通过PathPercent元素，中间的元素可以正好位于中央位置，并且能够留有充足的空间，以避免被别的元素遮挡。元素的旋转、大小缩放和Z轴都是由PathAttribute进行控制。除了定义路径，我们还设置了PathView的pathItemCount属性。该属性用于指定路径所期望的元素个数。最后，代理中的PathView.onPath使用preferredHighlightBegin和preferredHighlightEnd属性控制代理的可见性。

PathView{anchors.fill:parentdelegate:flipCardDelegatemodel:path:Path{startX:root.width/2startY:0PathAttribute{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:}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:16preferredHighlightBegin:0.5preferredHighlightEnd:0.5}

代理直接使用了通过PathAttribute元素附加的itemZ、itemAngle和itemScale属性。需要注意的是，被附加到代理的属性只能在wrapper中使用。因此，我们又定义了一个rotX属性，以便在内部的Rotation元素中使用。另一点需要注意的是附件属性PathView.onPath的使用。通常我们会将这个属性绑定到可视化属性，这样允许PathView保留非可见元素，以便进行缓存。如果不这样设置，不可见元素可能会由于界面裁剪等原因被销毁，因为PathView比ListView和GridView要灵活得多，所以为提高性能，一般会使用这种绑定实现缓存。

Component{id:flipCardDelegateBlueBox{id:wrapperwidth:64height:64antialiasing:truegradient:Gradient{GradientStop{position:0.0;color:"#2ed5fa"}GradientStop{position:1.0;color:"#ec"}}visible:PathView.onPathscale:PathView.itemScalez:PathView.itemZpropertyvariantrotX:PathView.itemAngletransform:Rotation{axis{x:1;y:0;z:0}angle:wrapper.rotX;origin{x:32;y:32;}}text:index}}

示例运行结果如下：

完成PathView中图片和一些复杂元素的变换之后，通常会进行一定的性能优化，比如，将Image元素的smooth属性绑定到PathView.view.moving附加属性。这意味着在移动时，图片质量会稍有下降，静止时恢复正常。在视图移动时，很少有用户会在意图片的清晰度，因此，这样的妥协一般是可以接受的。

XML是一种非常常见的数据格式，QML提供了XmlListModel元素支持将XML数据转换为模型。XmlListModel可以加载本地或远程的XML文档，使用XPath表达式处理数据。

下面的例子给出了如何从RSS获取图片。source属性指向了一个远程地址，其数据会被自动下载下来。

importQtQuick2.0importQtQuick.XmlListModel2.0Background{width:height:Component{id:imageDelegateBox{width:listView.widthheight:color:#Column{Text{text:titlecolor:#e0e0e0}Image{width:listView.widthheight:fillMode:Image.PreserveAspectCropsource:imageSource}}}}XmlListModel{id:imageModelsource:"