剖析 QML 视图简单易学-qml教程

QML视图是本文要介绍的内容，在QML中提供了三种视图方式：ListView列表视图、GridView网格视图和PathView路径视图。这三种视图都是继承自Flickable ，所以它们都有Flickable效果。下面我们简单介绍一下ListView和PathView。

一、ListView列表视图。

如果你了解Qt的模型视图结构，那么这一节的内容就很好理解了，如果你没接触过，也没关系，因为它其实很简单。在Qt中我们要想利用视图显示一些数据，并不是将这些数据直接放到视图中的，因为视图只管显示，它不存储数据。我们的数据要放在数据模型中。但是数据模型中只是存放数据，它并不涉及数据的显示方式。所以，我们还要用一个叫做代理的东东来设置数据模型中的数据怎样在视图中显示。那么就构成了下面的关系。

QML 视图

我们先看下面的例子：

1、新建一个Qt QML Application工程，命名为“myView”。

2、我们更改代码如下：

import Qt 4.6  
Rectangle {  
width:200;height:200  
ListModel{  //数据模型  
id:listModel  
ListElement{name:”Tom”;number:”001″}  
ListElement{name:”John”;number:”002″}  
ListElement{name:”Sum”;number:”003″}  
}  
Component{     //代理  
id:delegate  
Item{ id:wrapper; width:200; height:40  
Column{  
x:5; y:5  
Text{text:”<b>Name:</b>”+name}  
Text{text:”<b>Number:</b>”+number}  
}  
}  
}  
Component{   //高亮条  
id:highlight  
Rectangle{color:”lightsteelblue”;radius:5}  
}  
ListView{  //视图  
width:parent.width; height:parent.height  
model:listModel  //关联数据模型  
delegate:delegate  //关联代理  
highlight:highlight  //关联高亮条  
focus:true  //可以获得焦点，这样就可以响应键盘了  
}  
}

运行效果如下：

QML 视图

我们可以拖动整个列表，而且可以使用键盘的方向键来选择列表中的项目。

在这个程序中，我们先设置了数据模型，在其中加入了一些数据。然后设置了代理，在代理中我们设置了要怎样显示我们的数据。***，我们在视图中关联了数据模型和代理，将数据显示出来了。这里为了达到更好的显示效果，我们使用了一个高亮条。其中的代理和高亮条都可以使用Component{}组件来实现。

3.我们可以对视图做一些设置。

我们可以设置keyNavigationWraps:true 使到达***一个项目后重新返回***个项目。

我们可以设置orientation:ListView.Horizontal使列表水平显示。这时你拖动列表，发现了吧，它可以自动移动到下一条，这就是Flickable的作用。默认的是ListView.Vertical竖直显示。

#p#

二、PathView路径视图

1.什么是路径视图，我们先来看一个例子。

Rectangle {  
width:300;height:300;  
ListModel{  //数据模型  
id:listModel  
ListElement{icon:”01.gif”}  
ListElement{icon:”02.gif”}  
ListElement{icon:”03.gif”}  
ListElement{icon:”04.gif”}  
}  
Component{     //代理  
id:delegate  
Item{ id:wrapper; width:50; height:50  
Column{  
Image {source:icon;width:50;height:50}  
}  
}  
}  
PathView{  //路径视图  
anchors.fill:parent; model:listModel; delegate:delegate  
path:Path{startX:120;startY:200  
PathQuad{x:120;y:25;controlX:260;controlY:125}  
PathQuad{x:120;y:200;controlX:-20;controlY:125}  
}  
}  
}

效果如下：

QML 视图

你可以拖动一个图标查看效果，是的，所有图标的转起来了。这就是路径视图。我们在程序中，设置了一个路径，如上面的：

path:Path{startX:120;startY:200  
PathQuad{x:120;y:25;controlX:260;controlY:125}  
PathQuad{x:120;y:200;controlX:-20;controlY:125}  
}

它们确定了一个椭圆形，所有的项目都在这个路径上，当拖动一个项目，所有的项目都会在路径上移动。

2、关于Path

在QML中提供了三种Path。PathLine直线，PathQuad二次贝塞尔曲线，PathCubic三次贝塞尔曲线。你可以在帮助中查看它们的使用，这里不再进行过多介绍。

3、路径属性。

我们可以通过路径属性PathAttribute ，来设置不同路径上不同位置的项目。

例如我们更改上面的程序：

Component{     //代理  
id:delegate  
Item{ id:wrapper; width:50; height:50  
scale:PathView.scale; opacity:PathView.opacity  
Column{  
Image {source:icon;width:50;height:50}  
}  
}  
}  
PathView{  
anchors.fill:parent; model:listModel; delegate:delegate  
path:Path{startX:120;startY:200  
PathAttribute{name:”scale”;value:1.0}  
PathAttribute{name:”opacity”;value:1.0}  
PathQuad{x:120;y:25;controlX:260;controlY:125}  
PathAttribute{name:”scale”;value:0.5}  
PathAttribute{name:”opacity”;value:0.5}  
PathQuad{x:120;y:200;controlX:-20;controlY:125}  
}  
}  
}

效果如下：

QML 视图

我们在Path中设置了路径属性，使得在不同点的图片具有不同的效果，这里设置了缩放和不透明度两个属性。我们只需设置开始点和结束点两个点的属性，这样就会在整个路径上进行线性插值。这一节介绍了两个视图，还有一个GridView网格视图，它的操作是相似的，在这里就不再进行介绍了。

本文章原创于 www.yafeilinux.com

小结：剖析 QML 视图的内容介绍完了，希望本篇文章对你有所帮助！更多内容请参考编辑推荐！

剖析 QML 视图 简单易学

剖析 QML 视图简单易学