posts - 319, comments - 22, trackbacks - 0, articles - 11
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

[教程] QML基本语法 [转]

Posted on 2011-07-06 22:03 RTY 阅读(1429) 评论(0)  编辑 收藏 引用 所属分类: Qt 、转载随笔



QML是什么？

QML 是一中声明式语言，用来描述应用程序接口的――是什么样，有怎样的行为。在QML中，一个用户接口被指定为带有属性的对象是。

这个介绍主要面向只有很少或者没有编码经验的人。在QML中，JavaScript作为一种脚本语言被使用。因此在深入学习QML之前，也许你会想要去学一些关于JavaScript的知识（JavaScript: The Definitive Guide）。另外，对像HTML和CSS这样的网页技术有一些基础的了解也是相当有帮助的，但这些都不是必须的。

QML 的基本语法
QML看起来像这样
  1. import Qt 4.7
  2. Rectangle {
  3.      width: 200
  4.      height: 200
  5.      color: "blue"

  7.      Image {
  8.          source: "pics/logo.png"
  9.          anchors.centerIn: parent
  10.      }
  11. }
复制代码

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

属性可以被一行行指定：

  1. Rectangle {
  2.      width: 100
  3.      height: 100
  4. }
复制代码

同时也可以在一个单行上指定多个属性：

  1. Rectangle { width: 100; height: 100 }
复制代码

当多个property/value对被指定在一个单行上时，他们需要通过分号来分隔。

import声明是为了导入包含所有标准的QML元素的Qt模块。没有这个导入声明，Rectangle和Image元素都将不能被使用。

表达式

除了直接给属性指定值之外，你也可以像在JavaScript中一样通过表达式来指定。

  1. Rotation {
  2.      angle: 360 * 3
  3. }
复制代码

这些表达式可以包含其他对象和属性，这样子的操作将会产生一个绑定关系，当这个表达式的值发生改变时，已经通过表达式指定了的属性的值也会自动更新到那个值。

  1. Item {
  2.      Text {
  3.          id: text1
  4.          text: "Hello World"
  5.      }
  6.      Text {
  7.          id: text2
  8.          text: text1.text
  9.      }
  10. }
复制代码

在上面的这个例子中，text2对象将会显示和text1一样的文字.如果text1改变了，text2也会自动变化为相同的值。

在引用其他对象时，可以通过对象的id 值，来进行引用。

QML注释

QML中的注释方式和Javascript 的相同。

单行注释使用//；

多行注释使用 /* … */ 。

  1. Text {
  2.      text: "Hello world!"/*print text*/
  3.      //opacity: 0.5
  4. }
复制代码
属性
属性命名

属性通常以小写字符开头（附加属性除外）

属性类型

QML支持多种属性(具体参看QML Basic Types)。基本的属性包括 int, real, bool, string, color和lists。

  1. Item {
  2.      x: 10.5             // a 'real' property
  3.      ...
  4.      state: "details"    // a 'string' property
  5.      focus: true         // a 'bool' property
  6. }
复制代码

QML的属性是属于类型安全的，也就是说属性的类型必须和所分配的值是相同的。例如，Item的x属性是一个real，如果你想要给他分配一个string值，就会得到一个错误。

  1. Item {
  2.      x: "hello"  // illegal!
  3. }
复制代码
id属性

每个对象都可以指定一个专门的属性叫做id，这个属性的值必须是唯一的。在同一个QML文档中不能有相同的id值。通过指定一个唯一可用的id，对象就可以被其他对象和脚本引用。

  1. Item {
  2.      Rectangle {
  3.          id: myRect
  4.          width: 100
  5.          height: 100
  6.      }
  7.      Rectangle {
  8.          width: myRect.width
  9.          height: 200
  10.      }
  11. }
复制代码

ps:id必须以小写字母或者下划线开头，并且不能包含除字母、数字和下划线以外的其他字符。

List属性

List属性看起来像这样

  1. Item {
  2.      children: [
  3.          Image {},
  4.          Text {}
  5.      ]
  6. }
复制代码

list有包含在方括号，list中的属性以逗号来分隔。如果只有一个属性，可以省略方括号。

  1. Image {
  2.      children: Rectangle {}
  3. }
复制代码
缺省属性

每个对象类型可以指定一个list或者或者对象属性作为缺省属性。如果一个属性已经被声明为缺省属性，那么该属性的标签就可以被省略。

示例代码
  1. State {
  2.      changes: [
  3.          PropertyChanges {},
  4.          PropertyChanges {}
  5.      ]
  6. }
复制代码
可以被简化为
  1. State {
  2.      PropertyChanges {}
  3.      PropertyChanges {}
  4. }
复制代码
因为changes是State类型的缺省属性。
组属性
在一些示例中属性会构成一个逻辑上的小组，并且通过点（“.”）或者组标记去使用它。
组属性可以被写成以下形式：
  1. Text {
  2.      font.pixelSize: 12
  3.      font.bold: true
  4. }
复制代码
或者
  1. Text {
  2.      font { pixelSize: 12; bold: true }
  3. }
复制代码
附加属性

附加属性的意思就是通过一些对象附加一些属性到另一个对象上。附加属性的格式如Type.property ，在这里Type是这个附加属性元素的类型。

  1. Component {
  2.      id: myDelegate
  3.      Text {
  4.          text: "Hello"
  5.          color: ListView.isCurrentItem ? "red" : "blue"
  6.      }
  7. }
  8. ListView {
  9.      delegate: myDelegate
  10. }
复制代码

ListView元素附加ListView.isCurrentItem这个属性到它创建的每一个对象中。

另一个附加属性的例子是Keys元素通过附加属性来处理任何可见Item的key press事件，例如：

  1. Item {
  2.      focus: true
  3.      Keys.onSelectPressed: console.log("Selected")
  4. }
复制代码
信号处理器

信号处理器允许通过事件来响应动作。举个例子来说，MouseArea元素拥有信号处理器来处理鼠标press、release和click：

  1. MouseArea {
  2.      onPressed: console.log("mouse button pressed")
  3. }
复制代码

所有的信号处理器都是以“on”开头的。

一些信号处理器还包含有选项参数，例如MouseArea onPressed这个信号处理器就有mouse这个参数：

  1. MouseArea {
  2.      acceptedButtons: Qt.LeftButton | Qt.RightButton
  3.      onPressed: if (mouse.button == Qt.RightButton) console.log("Right mouse button pressed")
  4. }
复制代码


只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理