Qml介绍
Qml介绍
Amamatthew 发表于4年前
Qml介绍
  • 发表于 4年前
  • 阅读 44
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

QML是一种描诉性的脚本语言,文件格式以.qml结尾。语法格式非常像CSS,但又支持javacript形式的编程控制。

我个人认为它结合了QtDesigner UI和QtScript的有点。

QtDesigner可以设计出.ui界面文件,但是不支持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互,但是有一个缺点,如果要在脚本中创建一个继承于QObject的图形对象非常不方便,只能在Qt代码中创建图形对象,然后从QtScript中进行访问。

而QML可以在脚本里创建图形对象,并且支持各种图形特效,以及状态机等,同时又能跟Qt写的C++代码进行方便的交互,使用起来非常方便。本文不介绍如何在Qt C++中使用QML,而是把重点放在QML的语法上。

import QtQuick 2.2 
 Rectangle {
     id: page
     width: 500; height: 200
     color: "lightgray" 

     Text {
         id: helloText
         text: "Hello world!"
         font.pointSize: 24; font.bold: true
         y: 30; anchors.horizontalCenter: page.horizontalCenter
     }
 }

第1行是Qt QML的统一用法,指明当前QML会使用QtQuick 2.2里面已经定义好的类型,比如,第2行用到的Rectangle和第6行的Text。第2行开始至结束定义了一个矩形的图形区域对象。第3行则申明了该矩形区域对象的id为”page”可以被其它对象识别并通过该id访问其成员属性。

另外几个属性width/height/color则很好理解,语法跟CSS类似,可以写在一行中用分号”;”隔开。
第6行至第12行则是一个文本对象,看它代码的嵌套结构可以知道它是内嵌于Rectangle的。Text的属性除了anchors其它几个都能顾名思义。anchors描述的是当前文本对象的位置和其它对象的相对关系,这里看到其水平中心位置在“page“对象的水平中心位置。如果相对anchors了解更多,请参考锚的解释。以上就是Hello,World的全部代码。

在上面的代码中我们用到了Rectangle和Text,那么我还有哪些对象以及这些对象有哪些属性呢。请访问QML-Item类,Item类是QML最基础的类,通过查看它的继承类以及这些继承类可用的属性,你可以添加更多你感兴趣的内容。


  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 66
博文 719
码字总数 76443
×
Amamatthew
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: