qml----Model/View入门(四)XmlListModel

  除了常规的从代码中交互数据外,还有一种直接从XML文件中读取数据的方式,那就是XmlListModel。它从XML数据中创建一个只读的model。要使用XmlListModel,需要添加

import QtQuick.XmlListModel 2.0 来引入相应的模块

  那这个XmlListModel怎么操作数据呢,这要用到XPath表达式。什么?还让我学新的东西?这QML套路好深。。。

  XPth中,有7中类型的数据,只要学会了这7中类型的数据,你就可以召唤出神龙了。这当然是假的Zz--,分别是元素、属性、文本、命令空间、处理指令、注释以及根结点。学过qt中  的xml文件操作的其实都懂。我们先来一小段xml尝尝鲜

  在上面的截图中,<videos>是根结点,也称作是文档节点, <attr tag='导演'>詹妮弗.李</attr>是元素节点,tag='评分'是属性节点。而在XPath中,节点是沿着路径选择的。下图中给出了常用的路径表达式

就以上面我们给出的xml文档为例,来解释下路径表达式的用法

  除此之外,还能够在【】中嵌入条件语句,用来过滤某些条件。如下所示

 

说完了XPath,让我们来看看真正的XmlListModel吧。先来看它都有哪些属性

source    它指定了使用xml文档的位置,既可是网络位置也可以是本地地址

xml    保存用于当前model的XML字符串,这些字符串应是utf8编码的。如果同时指定了xml和source,那么xml生效

roles    它是一个存储role的list

progress   表示xml文档的下载进度,从0.0到1.0.如果是本地的xml文档,progress会在读取数据时立即变成1.0.当完成下载后,xmllistmodel开始加载文档,此时可以通过status来                        获取状态

status     表示model的当前状态,有XmlListModel.Ready、XmlListModel.Loading、XmlListModel.Error等。如果出错,可以通过errorString()获取出错信息

 

下面我们进入实战,先来段完整的xml数据。博客不能上传附件,只好写在这里面了

<?xml version="1.0" encoding="UTF-8"?>

-<videos>


-<video date="2013-11-19" name="冰雪奇缘">

<attr tag="导演">詹妮弗·李</attr>

<attr tag="演员">伊迪娜·门泽尔 / 克里斯汀·贝尔</attr>

<attr tag="评分">9.2</attr>

<attr tag="简介">在四面环海、风景如画的阿伦达王国,生活着两位可爱美丽的小公主,艾莎和安娜。艾莎天生具有制造冰雪的能...</attr>

<poster img="http://g3.ykimg.com/0516000052D779CD67583960490A8E1A"/>

<page link="http://v.youku.com/v_show/id_XNjk1ODc2NDMy.html"/>

<playtimes tag="播放次数">12184709</playtimes>

</video>


-<video date="2004-12-23" name="功夫">

<attr tag="导演">周星驰</attr>

<attr tag="演员">周星驰 / 元秋 / 元华 / 林子聪 / 梁小龙 / 陈国坤</attr>

<attr tag="评分">7.0</attr>

<attr tag="简介">1940年代的上海,自小受尽欺辱的街头混混阿星(周星驰 饰)为了能出人头地,可谓窥见机会的缝隙就往...</attr>

<poster img="http://g1.ykimg.com/0516000051BAD11A67583912FF0277C1"/>

<page link="http://v.qq.com/cover/u/uiq0rxuywu508qr.html"/>

<playtimes tag="播放次数">4012749</playtimes>

</video>


-<video date="2013-02-10" name="西游·降魔篇">

<attr tag="导演">周星驰</attr>

<attr tag="演员">舒淇 / 文章 / 黄渤 / 李尚正 / 陈炳强 / 周秀娜</attr>

<attr tag="评分">8.1</attr>

<attr tag="简介">大唐年间妖魔横行,一小渔村因为饱受鱼妖之害请来道士(冯勉恒 饰)除妖,年轻驱魔人陈玄奘(文章 饰)...</attr>

<poster img="http://g2.ykimg.com/0516000051B436EB67583928E30DCCDD"/>

<page link="http://v.youku.com/v_show/id_XNTI2Mzg4NjAw.html"/>

<playtimes tag="播放次数">25421498</playtimes>

</video>


-<video date="2013-06-27" name="小时代">

<attr tag="导演">郭敬明</attr>

<attr tag="演员">杨幂 / 郭采洁 / 郭碧婷 / 谢依霖 / 柯震东 / 凤小岳</attr>

<attr tag="评分">8.9</attr>

<attr tag="简介">这是一个梦想闪耀的时代,一个理想冷却的时代;这是最坏的时代,这也是最好的时代,这是我们的小时代。在...</attr>

<poster img="http://g1.ykimg.com/0516000051F22C1C67583931E8015597"/>

<page link="http://v.youku.com/v_show/id_XNTg3NjkzMzIw.html"/>

<playtimes tag="播放次数">99075808</playtimes>

</video>


-<video date="1987-07-18" name="倩女幽魂">

<attr tag="导演">程小东</attr>

<attr tag="演员">张国荣 / 王祖贤 / 午马</attr>

<attr tag="评分">8.1</attr>

<attr tag="简介">书生宁采臣(张国荣 饰)收账不成,无处可归,遂夜宿鬼寺兰若寺,遇上侠士燕赤霞(午马 饰),二人成为...</attr>

<poster img="http://g2.ykimg.com/051600004FC32F0797927377D9052FBF"/>

<page link="http://v.youku.com/v_show/id_XMjE0ODk3MjUy.html"/>

<playtimes tag="播放次数">1579516</playtimes>

</video>


-<video date="2011-08-19" name="那些年,我们一起追的女孩">

<attr tag="导演">九把刀</attr>

<attr tag="演员">柯震东 / 陈妍希 / 郝邵文</attr>

<attr tag="评分">8.5</attr>

<attr tag="简介">青春是一场大雨。即使感冒了,还盼望回头再淋它一次。人生就是不停的战斗,在还没有获得女神青睐时,左手...</attr>

<poster img="http://g3.ykimg.com/05160000531420D26758391C5C08485A"/>

<page link="http://v.qq.com/cover/t/tu0bpgju3a1xno6.html"/>

<playtimes tag="播放次数">3807121</playtimes>

</video>


-<video date="2010-12-16" name="让子弹飞">

<attr tag="导演">姜文</attr>

<attr tag="演员">姜文 / 周润发 / 葛优 / 刘嘉玲 / 姜武 / 廖凡</attr>

<attr tag="评分">6.5</attr>

<attr tag="简介">民国年间,花钱捐得县长的马邦德(葛优 饰)携妻(刘嘉玲 饰)及随从走马上任。途经南国某地,遭劫匪张...</attr>

<poster img="http://g4.ykimg.com/0516000051D6790367583906900BD83A"/>

<page link="http://www.tudou.com/albumplay/tITGXsK5esA/qT91WpuU5x4.html"/>

<playtimes tag="播放次数">33461391</playtimes>

</video>


-<video date="2005-06-07" name="史密斯夫妇">

<attr tag="导演">道格·里曼</attr>

<attr tag="演员">布拉德·皮特 / 安吉丽娜·朱莉 / 文斯·沃恩</attr>

<attr tag="评分">8.1</attr>

<attr tag="简介">约翰(布拉德·皮特 饰)和简(安吉丽娜·朱莉 饰)已经结婚了7年多,生活就像淡水般无味。婚姻就像坟...</attr>

<poster img="http://g3.ykimg.com/05160000521D8C1267583916D1059B45"/>

<page link="http://v.youku.com/v_show/id_XNjU4NDc1MjU2.html"/>

<playtimes tag="播放次数">469458</playtimes>

</video>


-<video date="2001-06-23" name="猫狗大战">

<attr tag="导演">劳伦斯·哥特曼</attr>

<attr tag="演员">杰夫·高布伦 / 伊丽莎白·帕金斯</attr>

<attr tag="评分">7.7</attr>

<attr tag="简介">猫狗自古就水火不容,这部动画更是将它们卷入一场势不两立的战斗当中。在这里,猫是最邪恶不过的动物,它...</attr>

<poster img="http://g1.ykimg.com/0516000052B3D5796758394C6404ECDC"/>

<page link="http://v.youku.com/v_show/id_XNTkzMTM0MTg4.html"/>

<playtimes tag="播放次数">531499</playtimes>

</video>


-<video date="1994-06-23" name="阿甘正传">

<attr tag="导演">罗伯特·泽米吉斯</attr>

<attr tag="演员">汤姆·汉克斯 / 罗宾·怀特 / 加里·西尼斯</attr>

<attr tag="评分">6.9</attr>

<attr tag="简介">阿甘(汤姆·汉克斯 饰)于二战结束后不久出生在美国南方阿拉巴马州一个闭塞的小镇,他先天弱智,智商只...</attr>

<poster img="http://g2.ykimg.com/0516000053548ED267379F510C0061FA"/>

<page link="http://my.tv.sohu.com/us/72736066/24772766.shtml"/>

<playtimes tag="播放次数">731805</playtimes>

</video>


-<video date="2014-02-12" name="美女与野兽">

<attr tag="导演">克里斯多夫·甘斯</attr>

<attr tag="演员">蕾雅·赛杜 / 文森·卡索 / 安德烈·杜索里埃</attr>

<attr tag="评分">7.1</attr>

<attr tag="简介">《美女与野兽》的故事讲述的是某一村庄的商人,有六个孩子,其中小女儿贝儿(蕾雅·赛杜 饰)最为纯洁美...</attr>

<poster img="http://g1.ykimg.com/051600005278998D6758395342087EBB"/>

<page link="http://www.funshion.com/vplay/m-111634.e-1"/>

<playtimes tag="播放次数">33015</playtimes>

</video>

</videos>
View Code

 运行的效果图如下所示

  代码如下:

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.XmlListModel 2.0

Rectangle {
    width: 360
    height: 400
    color: "#EEEEEE"

    Component{
        id: vedioModel

        XmlListModel{
            id: xmlModel
            source: "videos.xml"
            query: "/videos/video"
            XmlRole{ name: "name"; query: "@name/string()"; }
            XmlRole{ name: "date"; query: "@date/string()"; }
            XmlRole{ name: "img"; query: "poster/@img/string()"; }
            XmlRole{ name: "director_tag"; query: "attr[1]/@tag/string()"; }
            XmlRole{ name: "director"; query: "attr[1]/string()"; }
            XmlRole{ name: "actor_tag"; query: "attr[2]/@tag/string()"; }
            XmlRole{ name: "actor"; query: "attr[2]/string()"; }
            XmlRole{ name: "rating"; query: "attr[3]/number()"; }
            XmlRole{ name: "desc"; query: "attr[4]/string()"; }
            XmlRole{ name: "playtimes"; query: "playtimes/number()"; }
        }
    }//vedioModel is end

    Component{
        id: vedioDelegate

        Item {
            id: wrapper
            width: parent.width
            height: 120
            MouseArea{
                anchors.fill: parent
                onClicked: wrapper.ListView.view.currentIndex = index
            }

            Image {
                id: poster
                width: 80
                height: 120
                anchors.left: parent.left
                anchors.top : parent.top
                source: img
                fillMode: Image.PreserveAspectFit
            }

            ColumnLayout{
                anchors.left: poster.right
                anchors.leftMargin: 4
                anchors.right: wrapper.right
                anchors.top: poster.top
                height: parent.height
                spacing: 2
                Text {
                    Layout.fillWidth: true
                    text: "<b>" + name + "</b>(" + rating + "," + playtimes + ")"
                    color: wrapper.ListView.isCurrentItem ? "blue" : "black"
                    font.pixelSize: 18
                    elide: Text.ElideRight
                }

                Text{
                    Layout.fillWidth: true
                    text: date
                    color: wrapper.ListView.isCurrentItem ? "blue" : "black"
                    font.pixelSize: 18
                    elide: Text.ElideRight
                }

                Text{
                    Layout.fillWidth: true
                    text: director_tag + ": <font color=\"#0000aa\">" + director + "</font>"
                    color: wrapper.ListView.isCurrentItem ? "blue" : "black"
                    font.pixelSize: 18
                    elide: Text.ElideRight
                }

                Text{
                    Layout.fillWidth: true
                    text: actor_tag + ":<font color=\"#0000aa\">" + director + "</font>"
                    color: wrapper.ListView.isCurrentItem ? "blue" : "black"
                    font.pixelSize: 18
                    elide: Text.ElideRight
                }

                Text {
                    text: actor_tag + ": <font color=\"#0000aa\">" + actor + "</font>";
                    Layout.fillWidth: true;
                    color: wrapper.ListView.isCurrentItem ? "blue" : "black";
                    font.pixelSize: 18;
                    elide: Text.ElideRight;
                }

                Text{
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    text: desc
                    color: wrapper.ListView.isCurrentItem ? "blue" : "black"
                    font.pixelSize: 16
                    wrapMode: Text.Wrap
                    maximumLineCount: 2
                    elide: Text.ElideRight
                }
            }
        }
    }//vedioDelegate is end

    ListView{
        id: listView
        anchors.fill: parent
        spacing: 4
        delegate: vedioDelegate
        model: vedioModel.createObject(listView)
        focus: true
        highlight: Rectangle{
            color: "lightblue"
            width: parent.width
        }
    }
}
View Code

 

转载于:https://www.cnblogs.com/SaveDictator/p/8193889.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: QML-QianWindow-V1版本界面是一款用户界面设计程序,它为开发人员提供了大量可自定义的UI组件,使得开发者可以轻松地创建美观、直观且易于使用的界面。QML-QianWindow-V1版本界面具有界面美观,易用性强以及可扩展性强的特点。该程序提供了多种UI组件如窗口、按钮、文本框、下拉框、进度条等等。每个组件都可以基于开发需求进行个性化设计,提高了程序的可读性和可维护性。 QML-QianWindow-V1版本界面的窗口设计功能令人称赞。用户可以定制窗口的样式、位置和大小等属性,使其符合自己的需求。同时,该程序支持类似IOS与Android风格的Tab、Panel、Dialog等视图控件,让应用的界面更具丰富性和交互性,提升用户体验。 此外,QML-QianWindow-V1版本界面可让用户通过实用的数据模型,快速地创建和管理表格和列表,包括多行、多列的表格和单选或多选列表,使得用户可以方便地处理大量数据。 总之,QML-QianWindow-V1版本界面通过提供易用性和可扩展性强的UI组件来简化界面设计过程,使得开发人员可以迅速开发出优秀的桌面应用程序界面,以满足用户高品质的界面需求。 ### 回答2: QML-Qianwindow-v1版本是一款基于QML语言开发的桌面应用程序,其主要特点是界面设计美观、简单易用,适用于多种应用场景。 该软件的主界面包含五个主要区域:侧边栏、消息中心、主视图、小部件和设置菜单。 侧边栏主要用于导航,其中包含主要的应用程序和功能,使用户可以轻松地进入不同的模块。 消息中心用于显示来自其他应用程序的通知,例如电子邮件或要完成的任务。 主视图是QML-Qianwindow-v1的核心区域,其中包含常见的功能和工具,例如打开的文件、书签和搜索栏。 小部件区域用于显示用户选择的小部件,例如天气预报和日历。 设置菜单区域包含应用程序的设置菜单,用户可以在此处更改应用程序的选项、主题和常规设置。 总体来说,QML-Qianwindow-v1版本的界面设计非常简洁,用户友好,易于使用。它增强了用户的生产力和效率,为用户提供了一种令人愉悦的使用体验。 ### 回答3: QML-QianWindow-v1是一种基于Qt QML开发的简单易用的窗口界面库。其设计风格简洁明了,适用于各种桌面应用开发。 该库主要由三个部分组成:Title Bar、Main Body和Sidebar。其中,Title Bar是窗口的标题栏,可以自定义标题、图标、按钮、菜单等。Main Body是页面的主体内容,可以显示各种控件、窗口和布局。Sidebar是侧边栏,可以显示常用的菜单、工具、快捷方式等。 在QML-QianWindow-v1中,可以使用QianWindow来创建窗口。QianWindow提供了常用的窗口操作方法,例如最小化、最大化、关闭等。同时,该库还提供了很多常用的QML组件,例如按钮、文本框、下拉框、列表框等,这些组件可以方便快捷地进行页面设计。此外,在QML-QianWindow-v1中还支持自定义样式,可以根据需要修改组件的颜色、形状、大小等。 QML-QianWindow-v1的界面设计风格简洁明了,同时具有一定的美观度。尤其是Title Bar部分的设计非常灵活,可以根据需要自由定制。Main Body部分支持多种布局方式,可以满足不同页面设计的需求。Sidebar部分则提供了丰富的快捷操作方式,提高了用户的使用效率。 总的来说,QML-QianWindow-v1是一款非常实用的界面库,可以方便快捷地进行桌面应用开发。无论是初学者还是有经验的开发者,都可以轻松使用该库进行界面设计。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值