三十八、QML视图.docVIP

在QML中提供了三种视图方式：ListView列表视图、GridView网格视图和PathView路径视图。这三种视图都是继承自Flickable ，所以它们都有Flickable效果。下面我们简单介绍一下ListView和PathView。 一、ListView列表视图。 如果你了解Qt的模型视图结构，那么这一节的内容就很好理解了，如果你没接触过，也没关系，因为它其实很简单。在Qt中我们要想利用视图显示一些数据，并不是将这些数据直接放到视图中的，因为视图只管显示，它不存储数据。我们的数据要放在数据模型中。但是数据模型中只是存放数据，它并不涉及数据的显示方式。所以，我们还要用一个叫做代理的东东来设置数据模型中的数据怎样在视图中显示。那么就构成了下面的关系。 我们先看下面的例子： 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:”bName:/b”+name} Text{text:”bNumber:/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竖直显示。 二、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 PathQua