QML XML模型（A Model from XML）

code_shenbing

已于 2023-05-13 11:51:45 修改

阅读量667

点赞数

分类专栏： QML 文章标签： xml c++ qt QML 前端

于 2023-05-04 17:20:42 首次发布

本文链接：https://blog.csdn.net/XiaoWang_csdn/article/details/130491294

版权

QML 专栏收录该内容

41 篇文章

订阅专栏

QML是一种面向对象、跨平台的脚本语言，常用于描述用户界面和交互逻辑。它适用于移动、桌面和Web应用开发，提供XML语法和自定义组件功能。通过XmlListModel，QML能解析XML数据并展示，如从RSS流中提取图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 QML介绍

二 QML的使用场合

三实例演示

一 QML介绍

QML是Qt Quick的缩写，它是一种新型的、面向对象的、跨平台的脚本语言，可以用来描述用户界面或应用程序的交互逻辑。QML可以在Qt应用程序中使用，也可以在其他JavaScript应用程序中使用。

QML使用XML语法来描述应用程序的用户界面，其中包括各种组件、布局、控件和事件处理程序等。这种语言非常易于学习和使用，因为它具有简单的语法、清晰的结构和易于理解的类型系统。此外，QML还支持自定义组件和自定义控件，使开发人员能够根据需要灵活地设计和重构用户界面。

QML可以帮助开发人员快速构建原生桌面应用程序、移动应用程序和Web应用程序等。由于它是Qt框架的一部分，因此可以利用Qt提供的丰富功能和工具，如Qt Creator、Qt Widgets等。因此，使用QML可以大大提高开发效率和应用程序的质量。

二 QML的使用场合

QML是一种用于描述应用程序用户界面的声明式编程语言，主要应用于移动应用程序、桌面应用程序和Web应用程序等领域。以下是QML主要应用场景：

移动应用程序：QML可以帮助开发人员快速构建原生移动应用程序，如游戏、音乐播放器、地图应用等。由于QML可以将用户界面分解为一个个小的元素，并且可以对这些元素进行美化和自定义，因此非常适合构建移动应用程序。
桌面应用程序：QML可以用于开发桌面应用程序，如窗口管理器、文本编辑器、数据分析工具等。QML可以将界面分解为各个小的部件，并且可以使用Qt提供的各种组件和工具来构建高效的桌面应用程序。
Web应用程序：QML可以用于开发Web应用程序，如网页浏览器、表单验证器、媒体播放器等。由于QML可以将界面分解为小的元素，并且可以使用JavaScript来操作这些元素，因此非常适合构建Web应用程序。

QML是一种非常灵活和易于使用的编程语言，可以帮助开发人员快速构建高效的用户界面，并且可以在不同的应用程序领域中使用。

三实例演示

由于XML是一种常见的数据格式，QML提供了XmlListModel元素来包装XML数据。这个元素能够获取本地或者网络上的XML数据，然后通过XPath解析这些数据。

下面这个例子展示了从RSS流中获取图片，源属性（source）引用了一个网络地址，这个数据会自动下载。

当数据下载完成后，它会被加工作为模型的子项。查询属性（query）是一个XPath代理的基础查询，用来创建模型项。在这个例子中，这个路径是/rss/channel/item，所以，在一个模型子项创建后，每一个子项的标签，都包含了一个频道标签，包含一个RSS标签。

每一个模型项，一些规则需要被提取，由XmlRole元素来代理。每一个规则都需要一个名称，这样代理才能够通过属性绑定来访问。每个这样的属性的值都通过XPath查询来确定。例如标题属性（title）符合title/string()查询，返回内容中在之间的值。

图像源属性（imageSource）更加有趣，因为它不仅仅是从XML中提取字符串，也需要加载它。在流数据的支持下，每个子项包含了一个图片。使用XPath的函数substring-after与substring-before，可以提取本地的图片资源。这样imageSource属性就可以直接被作为一个Image元素的source属性使用。

1.import QtQuick 2.0
2.import QtQuick.XmlListModel 2.0
3.
4.Item {
5.    width: 300
6.    height: 480
7.
8.    Component {
9.        id: imageDelegate
10.
11.        Item {
12.            width: listView.width
13.            height: 400
14.
15.        Column {
16.                Text {
17.                    text: title
18.                }
19.
20.                Image {
21.                    source: imageSource
22.                }
23.            }
24.        }
25.    }
26.
27.    XmlListModel {
28.        id: imageModel
29.
30.        source: "http://feeds.nationalgeographic.com/ng/photography/photo-of-the-day/"
31.        query: "/rss/channel/item"
32.
33.        XmlRole { name: "title"; query: "title/string()" }
34.        XmlRole { name: "imageSource"; query: "substring-before(substring-after(description/string(), 'img src=\"'), '\"')" }
35.    }
36.
37.    ListView {
38.        id: listView
39.
40.        anchors.fill: parent
41.
42.        model: imageModel
43.        delegate: imageDelegate
44.    }
45.}