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

最新推荐文章于 2025-09-28 23:19:07 发布

原创最新推荐文章于 2025-09-28 23:19:07 发布 · 9.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#list #listview #delegates #image #xml #mvc

Qml 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在QML中使用MVC模式构建数据展示应用程序。重点讲解了三种视图组件：ListView、GridView和PathView，并通过一个新浪微博图片列表的例子展示了如何结合XmlListModel和自定义代理组件实现数据绑定。

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