QML 的基本语法

QML看起来像这样

import Qt 4.7

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

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

对象是通过类型而直接被指定的,紧随其后的是一对大括号。对象类型总是以大写字母开头。在上面的例子中,存在两个对象Rectangle和Image。在大括号之间,我们可以指定对象的相关信息,例如它的属性。属性是通过“property: value”这样的方式被呈现的。在上面的例子中,我们可以看到Image拥有一个属性叫做source,它被分配了一个值叫做"pics/logo.png"。属性和值被冒号分隔。

属性可以被一行行指定:

Rectangle {
     width: 100
     height: 100
 }

或单行输写多个属性:

Rectangle { width: 100; height: 100 }

当单行输写多属性/值时,必须由分号来分隔开来。

Import语句导入Qt模块,它包含所有标准的QML元素。如果没有Import语句;那么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。

单选注释以 // 开始。

多行注释以 /* 开始,以 */ 结束。

import Qt 4.7

注释是不被执行的,添加注释可对代码进行解释或者提高其可读性。

注释同样还可用于防止代码执行,这对跟踪问题是非常有用的。

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

在上面的示例中,这个Text对象将正常显示,一旦opacity: 0.5这行关掉注释,这是以半透明方式显示文本。

属性

属性命名

属性命名以首字母为小字(附加属性除外)。

属性类型

QML支持许多类型的属性(参阅QML基本类型)。基本类型包括整型、实数型、布尔、字符串、颜色以及列表。

Item {
     x: 10.5             // a 'real' property
     ...
     state: "details"    // a 'string' property
     focus: true         // a 'bool' property
 }

QML属性是有类型安全检测的。也就是说,它们只允许你指定一个与属性类型相匹配的值。例如,项目x属性类型是实数,如果你赋值一个字符串;那么将会得到错误的信息。

Item {
    x: “hello” // illegal!
}

id属性

每个对象可给予一个特定唯一的属性称之为id。在同一个QML文件中不可能拥有与其它对象同名的id值。指定一个id可以允许该对象可以被其它的对象与脚本引用。

下面的示例中,第一个矩形元素的id名为”myRect”。第二个矩形元素的宽度是引用的myRect.widtch,这意味着它将与第一矩形具有相同的width值。

Item {
     Rectangle {
         id: myRect
         width: 100
         height: 100
     }
     Rectangle {
         width: myRect.width
         height: 200
     }
 }

请注意,一个id首字符必须是小写字母或下划线并且不能包含字母,数字和下划线以外的字符。

列表属性

列表属性类似于下面这样:

Item {
     children: [
         Image {},
         Text {}
     ]
 }

列表是包含在方括号内,以逗号分隔的列表元素。在你只分配单一项目列表的情况下,是可以省略方括号:

Image {
     children: Rectangle {}
 }

默认属性

每个对象类型可以指定列表或对象属性之一作为其默认属性。如果一属性已被声明为默认属性,该属性标记可以被省略。例如该代码:

State {
     changes: [
         PropertyChanges {},
         PropertyChanges {}
     ]
 }

可以简化成这样:

State {
         PropertyChanges {},
         PropertyChanges {}
 }

因为changes是State类型的默认属性。

分组属性

在某些情况下使用一个‘.’符号或分组符号形成一个逻辑组。

分组属性可写以下这样:

Text {
     font.pixelSize: 12
     font.bold: true
 }

或者这样:

Text {
     font { pixelSize: 12; bold: true }
 }

在元素文件分组属性使用‘.‘符号显示。

附加属性

有些对象的属性附加到另一个对象。附加属性的形式为Type.property其中Type是附加property元素的类型。

例如:

Component {
     id: myDelegate
     Text {
         text: "Hello"
         color: ListView.isCurrentItem ? "red" : "blue"
     }
 }
 ListView {
     delegate: myDelegate
 }

ListView元素附加ListView.isCurrentItem属性到每个它创建的代理上。

另一个附加属性的例子就是Keys元素,它用于处理任意可视项目上的按键,例如:

Item {
     focus: true
     Keys.onSelectPressed: console.log("Selected")
 }

信号处理器

信号处理器允许响应事件时处理动作。例如,MouseArea元素有信号处理器来处理鼠标按下,释放以及单击:

MouseArea {
     onPressed: console.log("mouse button pressed")
 }

所有信号处理器开始都是启用的。

有一些信号处理器包含一个可选的参数,例如MouseArea onPressed信号处理程序有鼠标参数:

 MouseArea {
     acceptedButtons: Qt.LeftButton | Qt.RightButton
     onPressed: if (mouse.button == Qt.RightButton) console.log("Right mouse button pressed")
 }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值