剖析 QML 视图简单易学（qml 画图）-移动开发-知优网

本文介绍的是QML视图，如果你了解QML，那么本文就好理解了，不了解的话，那么本文将会给你详细的介绍！

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

一、ListView列表视图。

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

我们先看下面的例子：

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

2、我们更改代码如下：

importQt4.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//可以获得焦点，这样就可以响应键盘了 
} 
}

运行效果如下：

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

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

效果如下：

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

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} 
} 
} 
}