QML对象特性一般使用下面的顺序进行构造:
- id
- 属性声明
- 信号声明
- JavaScript函数
- 对象属性
- 子对象
- 状态
- 状态切换
属性组
如果使用了一组属性中的多个属性,那么使用组表示法,而不要使用点表示法,这样可以提高可读性。例如:
Rectangle {
anchors.left: parent.left; anchors.top: parent.top;
anchors.right: parent.right; anchors.leftMargin: 20
}
Text {
text: "hello"
font.bold: true; font.italic: true; font.pixelSize: 20;
font.capitalization: Font.AllUppercase
}
可以表示成这样:
ectangle {
anchors { left: parent.left; top: parent.top; right: parent.right; leftMargin: 20 }
}
Text {
text: "hello"
font { bold: true; italic: true; pixelSize: 20; capitalization: Font.AllUppercase }
}
列表
如果一个列表只包含一个元素,那么我们通常忽略方括号。例如下面的代码:
states: [
State {
name: "open"
PropertyChanges { target: container; width: 200 }
}
]
可以写成:
states: State {
name: "open"
PropertyChanges { target: container; width: 200 }
}
JavaScript代码
1、如果脚本是一个单独的表达式,建议直接使用:
Rectangle { color: "blue"; width: parent.width / 3 }
2、如果脚本只有几行,那么建议写成一块:
Rectangle {
color: "blue"
width: {
var w = parent.width / 3
console.debug(w)
return w
}
}
3、如果脚本有很多行,或者需要被不同的对象使用,那么建议创建一个函数,然后像下面这样来调用它:
function calculateWidth(object)
{
var w = object.width / 3
// ...
// more javascript code
// ...
console.debug(w)
return w
}
Rectangle { color: "blue"; width: calculateWidth(parent) }
4、如果是很长的脚本,我们可以将这个函数放在独立的 JavaScript 文件中,然后像下面这样来导入它:
import "myscript.js" as Script
Rectangle { color: "blue"; width: Script.calculateWidth(parent) }
参考自:第5篇 Qt Quick入门教程之基础(五)QML的编码约定 http://www.qter.org/forum.php?mod=viewt