使用Qml创建各种list（一）---创建一个简单图片列表

在QML视图使用MVC模式构成Model View Delegate来显示中，同时系统也提供了三种视图方式：

ListView列表视图、GridView网格视图和PathView路径视图。

这三种视图都是继承自Flickable ，所以它们都有Flickable效果，同时这些视图都自动实现了动力滚动和弹簧效果。当然你也可以在这几种View的基础上扩展写出来自己的View。

 

使用MVC模式，因为视图只管显示，它不存储数据，所以我们不会简单的将数据直接放到视图中。而是将数据存放在Model中View也只作为显示数据，他们两者之间通过Delegates来设置Model中的数据怎样在View中显示。

 

XmlListModel使用只读模式XPath表达式在 XML 文档中对元素和属性进行遍历。XPath 是很高级 XML 应用的基础，是一门在 XML 文档中查找信息的语言，同时用于在 XML 文档中通过元素和属性进行导航。

 

下面我们使用新浪微博Api就实现一个简单图片列表的例子

 

import Qt 4.7 Rectangle { width: 360 height: 640 color: "steelblue" XmlListModel { id: listModel source: "http://api.t.sina.com.cn/statuses/public_timeline.xml?source=1565057858&count=20" query: "/statuses/status" namespaceDeclarations: "declare namespace media=/"http://search.yahoo.com/mrss//";" XmlRole { name: "profile_image_url"; query: 'user/profile_image_url/string()' } } Component { id: listDelegate Image { source: profile_image_url } } ListView { id: view anchors.fill: parent model: listModel delegate: listDelegate } }