QML学习笔记-对QML基本认识

首先是QML与Qt Quick的关系;

这就相当于C++与Qt的关系;

只是一个语言和框架的关系


从Qt 5.1开始,Qt Quick引入了一组界面控件,使用这些控件可以更简单地创建传统桌面应用。这些控件包含在QtQuick Controls模块中,包括窗口部件、各种视图、按钮等。从Qt 5.7开始,加入了一个Qt Quick Controls 2模块,与前者不同,它主要终于创建手机或嵌入式应用界面


Qt 5增加了QML这种应用程序开发方式。由于QML的简洁性,QML和Qt Quick 2更适合快速开发动态界面程序。
有理由相信,在未来越来越多的程序都会使用这种全新的开发模式。相比而言,QML更能适应现代界面的要求。
Windows 8 Modern UI这样的崭新用户界面并不能简单地加入到现有的QWidget基础架构中。存在于智能电话和
平板设备的那种富含动画效果的界面大行其道,同样也是QWidget这种为大量以静态图形为主要显示单元的用户界
面而设计的组件所不擅长的。QML和Qt Quick的出现就是为了解决这些问题。


Qt 5的QWidget及其子类是开发桌面应用的核心,我们仍然能够像Qt 4时那样编写程序。现阶段新生的QML和QtQuick远不如QWidget那样拥有丰富的开发组件,尤其缺乏复杂的企业级应用程序所必须的树等控件。这就决定了至少在现阶段,真正大型的桌面程序依旧只能选择QWidget为主,QML和Qt Quick为辅的开发模式。


下面来看一个例子:

源码如下:

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.XmlListModel 2.0
import QtQuick.Controls 2.1

Window {
    id:window;
    property string detial:"";
    visible:true;
    width:340;
    height:480;
    Image{
        source:"qrc:/images/home.png";
        anchors.fill: parent;
    }

    XmlListModel{
        id:model;
        source:"qrc:/test.xml";
        query:"/rss/channel/item";
        XmlRole{
            name:"title";
            query:"title/string()";
        }
        XmlRole{
            name:"description";
            query:"description/string()";
        }
    }

    ListView{
        id:listView;
        width:parent.width;
        height:parent.height;
        model:model;
        delegate: Item{
            width:parent.width;
            height:window.height/10;
            Text{
                text:title;
                color:"white";
                anchors.left: parent.left;
                anchors.leftMargin: 30;
                anchors.verticalCenter: parent.verticalCenter;
            }
            Image{
                source:"qrc:/images/mainLine.png";
                anchors.bottom: parent.bottom;
                anchors.bottomMargin: 5;
            }
            Image{
                source:"qrc:/images/listArrow.png";
                anchors.right: parent.right;
                anchors.rightMargin: 30;
                anchors.verticalCenter: parent.verticalCenter;
            }
            MouseArea{
                anchors.fill: parent;
                onClicked:{
                    detial=description;
                    stack.push(mainView)
                }
            }
        }
    }

    StackView{
        id:stack;
        anchors.fill: parent;
        initialItem: listView;
    }
    Component{
        id:mainView;
        Item{
            ToolButton{
                id:toolBtn;
                contentItem:Image{
                    fillMode: Image.pad;
                    horizontalAlignment: Image.AlignHCenter;
                    verticalAlignment: Image.AlignVCenter;
                    source:"qrc:/images/back.png";
                }
                onClicked: stack.pop();
            }

            Label{
                text:detial;
                color:"white";
                anchors.margins: 20;
                anchors.top:toolBtn.bottom;
                anchors.left: parent.left;
                anchors.right: parent.right;
                verticalAlignment: Label.AlignVCenter;
                wrapMode: Label.Wrap;
                lineHeight: 2;
            }
        }
    }
}

程序运行截图如下:



XML文件格式如下:



  
    电影新闻-Mtime时光网
    时光网(Mtime.com)电影新闻
    http://feed.mtime.com/movienews.rss
    Fri, 14 Jul 2017 06:29:37 GMT
    http://backend.userland.com/rss
    
      山崎贤人《齐木楠雄的灾难》发预告
      麻生周一人气漫画《齐木楠雄的灾难》改编的真人电影今日发布预告,弥漫着满满的中二风,更有雷人的5毛钱科幻特效场面。目前来看,人物形象还原度较高。
      http://news.mtime.com/2017/07/14/1571357.html
      Fri, 14 Jul 2017 03:42:57 GMT
    
    
      《极盗车神》中国版定档预告曝光
      《僵尸肖恩》导演埃德加·赖特的口碑新作《极盗车神》将于8月25日与内地观众见面,一款中国定档海报与定制预告片今日曝光,六大主演酷炫集结,开启狂飙极盗之旅。
      http://news.mtime.com/2017/07/14/1571355.html
      Fri, 14 Jul 2017 03:09:48 GMT
    
    
      孙悟空只爱过这一个女人
      这首歌曲命名为《紫》,与倪妮饰演的阿紫有千丝万缕的联系。
      http://news.mtime.com/2017/07/14/1571354.html
      Fri, 14 Jul 2017 02:53:52 GMT
    
    
      刘德华&让雷诺《侠盗联盟》双雄对决
      让·雷诺饰演的皮埃尔对刘德华饰演的张丹始终心怀戒备,在张丹出狱后依然对他严密监视。在得知张丹计划盗取天价珠宝“盖亚”后,皮埃尔找来宝物鉴定师Amber组成联盟,横跨欧洲追捕张丹。
      http://news.mtime.com/2017/07/14/1571352.html
      Fri, 14 Jul 2017 02:32:16 GMT
    
    
      《引爆者》曝"铁汉柔情"人物海报
      《引爆者》曝"铁汉柔情"版人物关系海报,段奕宏分别与其他三位主演同框出镜。段奕宏和余男首次合作演绎一对苦命鸳鸯,携爱逃亡不离不弃,两人在戏外互怼不停,开起彼此的玩笑更是“毫不留情”。
      http://news.mtime.com/2017/07/14/1571350.html
      Fri, 14 Jul 2017 02:24:37 GMT
    
    
      诺兰新片《敦刻尔克》伦敦首映
      昨晚,《敦刻尔克》在伦敦举行首映礼,众位主创到场助阵。
      http://news.mtime.com/2017/07/14/1571351.html
      Fri, 14 Jul 2017 02:23:37 GMT
    
    
      《悟空传》上映首日击败"小黄人"
      霸屏一周的《神偷奶爸3》终于被国产电影请下票房日冠军宝座,《悟空传》上映首日破1亿登顶票房冠军。
      http://news.mtime.com/2017/07/14/1571344.html
      Fri, 14 Jul 2017 02:17:47 GMT
    
    
      北野武《极恶非道3》发正式预告
      北野武要将《极恶非道》系列中全员恶人的极端暗黑画风进行到底。在这里,没有丝毫人情味可言,只要利益、金钱、暴力。
      http://news.mtime.com/2017/07/14/1571349.html
      Fri, 14 Jul 2017 02:04:29 GMT
    
    
      《十万个冷笑话2》曝最强“站”队海报
      宙斯、女娲、奥丁、拉四位天神作为幕后操控者集结亮相,小金刚、雅典娜、河神、雷神托尔则各持武器站成“1字型”,一场宇宙大战即将开启。
      http://news.mtime.com/2017/07/14/1571347.html
      Fri, 14 Jul 2017 01:57:09 GMT
    
    
      《鲛珠传》动作特辑高燃上线
      《鲛珠传》将于8月11日上映,动作特辑高燃上线,主演王大陆、张天爱两人首次挑战打戏,在金牌动作指导谷轩昭的耐心指导下,他们虽然在片场被摔打不停,却都坚持亲身上阵,十分敬业。
      http://news.mtime.com/2017/07/14/1571346.html
      Fri, 14 Jul 2017 01:51:16 GMT
    
    
      DC大作《正义联盟》新剧照曝光
      新剧照中超人还是没有出现。不过蝙蝠侠、神奇女侠和闪电侠看起来状态都不错。
      http://news.mtime.com/2017/07/14/1571345.html
      Fri, 14 Jul 2017 01:44:15 GMT
    
    
      《蝙蝠侠》导演:我放弃了大本的剧本
      《蝙蝠侠》是马特·里夫斯第一部漫改电影,他此前曾说要把它拍出“希区柯克式”的感觉。
      http://news.mtime.com/2017/07/14/1571342.html
      Fri, 14 Jul 2017 01:03:21 GMT
    
    
      "至暗时刻"正式预告片中神还原丘吉尔
      焦点影业发布了《至暗时刻》的首支正式预告片,加里·奥德曼饰演的是英国最著名的首相之一——温斯顿·丘吉尔。
      http://news.mtime.com/2017/07/14/1571339.html
      Thu, 13 Jul 2017 23:41:00 GMT
    
    
      《悟空传》导演&原著作者专访
      郭子健是在为《西游降魔篇》收集资料时读到了《悟空传》,“虽然不是我写的,但是我总觉得好像自己的作品一样。那个时候就觉得我好想把这个小说拍出来。”
      http://news.mtime.com/2017/07/14/1571338.html
      Thu, 13 Jul 2017 23:07:25 GMT
    
    
      喜剧《羞羞的铁拳》造就“艾玛疼”组合
      《羞羞的铁拳》中,艾伦智商进化,从傻春变成专门打假拳的“过气拳手”;马丽“变美”,饰演一位专门打假的热血记者;沈腾变身二人“导师”,教授武林绝学。
      http://news.mtime.com/2017/07/13/1571337.html
      Thu, 13 Jul 2017 15:19:14 GMT
    
    
      《悟空传》首日票房破亿
      根据今何在同名小说改编的电影《悟空传》今日正式上映,首日票房截至发稿时已达1.08亿。
      http://news.mtime.com/2017/07/13/1571334.html
      Thu, 13 Jul 2017 15:07:24 GMT
    
    
      帅弯!《神奇女侠》曝概念艺术画
      近日,概念艺术画家约书亚·闵为《神奇女侠》创作了一组艺术概念图,获得。
      http://news.mtime.com/2017/07/13/1571333.html
      Thu, 13 Jul 2017 13:59:54 GMT
    
    
      神马画风?哪咤要加入变形金刚"宇宙"
      近日美国孩之宝公司全球CEO史蒂芬·戴维斯等一行10人到央视动画有限公司,双方就合拍动画项目《哪吒与变形金刚》达成多项共识。
      http://news.mtime.com/2017/07/13/1571327.html
      Thu, 13 Jul 2017 10:18:58 GMT
    
    
      "男人来自火星女人来自金星"将拍电影
      畅销两性读物《男人来自火星 女人来自金星》将被传奇影业改编成电影。
      http://news.mtime.com/2017/07/13/1571326.html
      Thu, 13 Jul 2017 10:13:42 GMT
    
    
      《S的秘密》7.20公映曝光新剧照
      《S的秘密》即将于7月20日全国公映,片中吴启华饰演一名时尚前卫的内衣设计师方浪,同时会一人分饰男女两角。在新剧照中,吴启华以“斩男色”的粉唇形象出镜,颇为妩媚的造型惊呆众人。
      http://news.mtime.com/2017/07/13/1571324.html
      Thu, 13 Jul 2017 09:36:08 GMT
    
  

你可能感兴趣的:(Qt)