PathView ,顾名思义,沿着特定的路径显示 Model 内的数据。 Model 可以是 QML 内建的 ListModel 、 XmlListModel ,也可以是在 C++ 中实现的 QAbstractListModel 的派生类。
PathView 恐怕是 Qt Quick 提供的 Model-View 类库中最复杂也最灵活的一个了。
要使用一个 PathView ,至少需要设置 model 、 delegate 、 path 三个属性。model 、 delegate 如果你学习过 ListView 肯定已经接触过,这里不再细说。 path 是 PathView 的专有特性,它指定 PathView 用来放置 item 的路径。要使用 PathView ,先要了解 Path 。
版权所有 foruok ,如需转载请注明出处:作者 foruok ,博客 http://blog.csdn.net/foruok 。
Path
西安是十三朝古都,虽然尿骚味很重,还是值得一游。于是你从杭州的武陵广场出发,准备去看兵马俑。先打的去萧山机场,步行进入航站楼,过安检,坐飞机到咸阳机场,出站,乘机场大巴到火车站,然后坐游 5 公交到兵马俑……在这个过程中,换乘的中间点很多,相邻两个中间点之间的,就是路径段;多个路径段最终形成了从杭州武陵广场到西安临潼兵马俑之间的路径;武陵广场是起点,兵马俑是终点。
在 Qt 中 Path 就是直译为路径,一个路径是由多个路径元素组成的,从起点开始,首尾衔接,抵达终点。
Path 的属性 startX 、 startY 描述路径起点。 pathElements 属性是个列表,是默认属性,它保存组成路径的多个路径元素,常见的路径元素有 PathLine 、 PathQuad 、 PathCubic 、 PathArc 、 PathCurve 、 PathSvg 。路径上最后一个路径元素的终点就是整个路径的终点,如果终点与起点重合,那么 Path 的 closed 属性就为 true 。
路径元素除 PathSvg 外,都有 x 、 y 属性,以绝对坐标的形式指定本段路径的终点;而起点呢,就是前一个路径段的终点;第一个路径段的起点,就是 Path 的 startX 、 startY 所描述的整个路径的起点。另外还有 relativeX 、 relativeY 两个属性,以相对于起点的相对坐标的形式来指定终点。你还可以混合使用绝对坐标与相对坐标,比如使用 x 和 relativeY 来决定路径段的终点。
PathLine
Path {
startX: 0;
startY: 0;
PathLine {
x: root.width - 1;
y: root.height - 1;
}
}
PathQuad
在 Qt Quick 的 Path 主题中,提供了基于二次方贝塞尔曲线和三次方贝塞尔曲线的路径元素。
在我们使用 Canvas 进行 2D 绘图时, Context2D 对象的 quadraticCurveTo(real cpx, real cpy, real x, real y) 方法可以在路径中添加一条二次方贝塞尔曲线, bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y) 方法用来在路径中添加一条三次方贝塞尔曲线。
PathQuad 元素定义一条二次贝塞尔曲线作为路径段。它的起点为上一个路径元素的终点(或者路径的起点),终点由 x 、 y 或 relativeX 、 relativeY 定义,控制点由 controlX 、 controlY 或 relativeControlX 、 relativeControlY 来定义。
一个简单的二次方贝塞尔路径定义:
Path {
startX: 0;
startY: 0;
PathQuad {
x: root.width - 1;
y: root.height - 1;
controlX: 0;
controlY: root.height - 1;
}
}
在 Qt Quick 中, Path 虽然描述了一条路径,但它是不可见的,不够形象化。这里我们通过使用 Canvas 来绘制同样的曲线,以求大家看了可以有个直观的印象。上面的路径定义,对应 qml 代码:
import QtQuick 2.0
import QtQuick.Controls 1.1
Canvas {
width: 320;
height: 240;
onPaint: {
var ctx = getContext("2d");
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.quadraticCurveTo(0, height - 1, width