Qml中ListView用法

一、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:”<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竖直显示。

ListView的delegate有两种方式。

第一种方式：直接定义delegate。

ListView {

        id: listView1        

        delegate: Item {            

            Rectangle {

                id:cellRect

                anchors.fill: parent

                border.width: 1

                border.color: "#5f5858"

                Text {

                    id:itemText

                    text: name

                    anchors.verticalCenter: parent.verticalCenter

                }

            }

        }

        model: ListModel {

            id:testModel

            ListElement {

                name: "成都"

            }

        }

    }

其它地方使用：

 testModel.clear();

testModel.append({"name":"北京"});

testModel.append({"name":"上海"});

第二种方式：

将delegate定义成组件，在ListView中加用其id。

ListView {

        id: listView1        

        delegate: appDelegate//引用组件

        model: ListModel {

            id:testModel

            ListElement {

                name: "成都"

            }

        }

    }

//组件定义，在原有Item基础上加在Component {id: appDelegate...}

Component {

        id: appDelegate

        Item {            

            Rectangle {

                id:cellRect

                anchors.fill: parent

                border.width: 1

                border.color: "#5f5858"

                Text {

                    id:itemText

                    text: name

                    anchors.verticalCenter: parent.verticalCenter

                }

            }

        }

    }

其它地方使用：

 testModel.clear();

testModel.append({"name":"北京"});

testModel.append({"name":"上海"});