学步园

QML是一种声明式的语言,用来描述程序的用户界面:两个方面--外观和行为.在QML中用户界面被描述为带有属性的对象的树.

QML中使用JavaScript作为脚本语言,因此深入学习QML前应先多了解一下Javascript.

QML基本语法

QML是这个样子的:

 import QtQuick 1.0

 Rectangle {
     width: 200
     height: 200
     color: "blue"

     Image {
         source: "pics/logo.png"
         anchors.centerIn: parent
     }
 }

声明对象时,先指定其类型,后面是一对大括号.对象类型名称的首字母总是大写的.上例中,有两个对象,一个Rectangle,一个Image.在大括号中间可以设置对象的信息,如属性.

设置属性使用 propertyname: value的方式.上例中,设置了Image对象的source属性值为 "pics/logo.png".属性和值中间用冒号间隔.

属性可在一行设置:

 Rectangle {
     width: 100
     height: 100
 }

或在一行中设置多个属性:

 Rectangle { width: 100; height: 100 }

当在一行中设置多个属性,需要使用分号间隔.

import语句导入Qt模块,其中包含了所有标准的QML元素.没有导入语句,Rectangle和Image元素都是非法的.

表达式

也可将JavaScript表达式赋值给属性.

 Rotation {
     angle: 360 * 3
 }

表达式中可以包含其他对象和属性的引用,这样就建立了一种绑定.当表达式的值变化时,对应的属性值会自动更新.

 Item {
     Text {
         id: text1
         text: "Hello World"
     }
     Text {
         id: text2
         text: text1.text
     }
 }

上例中,text2显示的内容总与text1相同.如果text1被修改了,text2也会自动修改为同样的值.

注意通过id属性指定的对象名称来引用其他对象 (更多id属性信息见下面的描述.)

QML注释

QML中的注释与JavaScript相同.

• 单行注释使用//.
• 多行注释使用 /*    */

 Text {
     text: "Hello world!"    //a basic greeting
     /*
         We want this text to stand out from the rest so
         we give it a large size and different font.
      */
     font.family: "Helvetica"
     font.pointSize: 24
 }

注释被引擎忽略.用于解释做了什么,便于日后查阅,也有助于其他人阅读QML文件.

注释也可防止代码执行,便于跟踪问题.

 Text {
     text: "Hello world!"
     //opacity: 0.5
 }

上例中,Text对象具有正常的透明度,因为opacity: 0.5被注释掉了.