QML学习(三)——

QML对象声明

QML对象特性一般使用下面的顺序进行构造：

• id
• 属性声明
• 信号声明
• JavaScript函数
• 对象属性
• 子对象
• 状态
• 状态切换

为了获取更好的可读性，建议在不同部分之间添加一个空行。例如，下面使用一个Photo对象作为示例：

 1 Rectangle {
 2     id: photo //  id放在第一行，便于找到一个对象 
 3 
 4     property bool thumbnail: false //属性声明
 5     property alias image: photoImage.source
 6 
 7     signal clicked // 信号声明
 8 
 9     function doSomething(x) // javascript 函数
10     {
11         return x + photoImage.width
12     }
13 
14     color: "gray" // 对象属性
15     x: 20; y: 20; height: 150 // 相关属性放在一起
16     width: { // 绑定
17         if (photoImage.width > 200) {
18             photoImage.width;
19         } else {
20             200;
21         }
22     }
23 
24     Rectangle { // 子对象
25         id: border
26         anchors.centerIn: parent; color: "white"
27 
28         Image { id: photoImage; anchors.centerIn: parent }
29     }
30 
31     states: State { // 状态
32         name: "selected"
33         PropertyChanges { target: border; color: "red" }
34     }
35 
36     transitions: Transition { //过渡
37         from: ""; to: "selected"
38         ColorAnimation { target: border; duration: 200 }
39     }
40 }

属性组

如果使用了一组属性中的多个属性，那么使用组表示法，而不要使用点表示法，这样可以提高可读性。例如：

 1 Rectangle {
 2     anchors.left: parent.left; anchors.top: parent.top; 
 3     anchors.right: parent.right; anchors.leftMargin: 20
 4 }
 5 
 6 Text {
 7     text: "hello"
 8     font.bold: true; font.italic: true; font.pixelSize: 20; 
 9     font.capitalization: Font.AllUppercase
10 }
11 可以写成这样：
12 
13 Rectangle {
14       anchors { left: parent.left; top: parent.top; right: parent.right; leftMargin: 20 }
15   }
16 
17 Text {
18       text: "hello"
19       font { bold: true; italic: true; pixelSize: 20; capitalization: Font.AllUppercase }
20   }

列表

如果一个列表只包含一个元素，那么我们通常忽略方括号。例如下面的代码：

states: [
    State {
        name: "open"
        PropertyChanges { target: container; width: 200 }
    }
]

可以写成：

states: State {
    name: "open"
    PropertyChanges { target: container; width: 200 }
}

JavaScript代码

如果脚本是一个单独的表达式，建议直接使用：

Rectangle { color: "blue"; width: parent.width / 3 }

如果脚本只有几行，那么建议写成一块：

Rectangle {
    color: "blue"
    width: {
        var w = parent.width / 3
        console.debug(w)
        return w
    }
}

如果脚本有很多行，或者需要被不同的对象使用，那么建议创建一个函数，然后像下面这样来调用它：

function calculateWidth(object)
{
    var w = object.width / 3
    // ...
    // more javascript code
    // ...
    console.debug(w)
    return w
}

Rectangle { color: "blue"; width: calculateWidth(parent) }

如果是很长的脚本，我们可以将这个函数放在独立的 JavaScript 文件中，然后像下面这样来导入它：

import "myscript.js" as Script

Rectangle { color: "blue"; width: Script.calculateWidth(parent) }