QML编码风格规范参考

在QML的参考文档和示例程序中使用了相同的编码约定，为了风格的统一和代码的规范，下面对编码风格做下规范以后应该按照此种风格完成代码，使代码结构清晰，统一，便于阅读和维护。

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

1、id

2、属性声明

3、信号声明

4、JavaScript 函数

5、对象属性

6、子对象

7、状态

8、状态切换

import QtQuick 2.2
​
Rectangle{
    id:photo                                  //id放在第一行，便于找到一个对象
​
    property bool thumbnail: false            //属性声明
    property alais image: photoImage.source
​
    signal clicked                            //信号声明
​
    function doSomething(x)                   //javascript 函数
    {
        return x + photoImage.width
    }
​
    color: "red"                              //对象属性
    x:20;y:20;height: 150                     //相关属性放在一起
    width: {                                  //绑定
        if(photoImage.width > 200){
            photoImage.width;
        }else{
            200;
        }
    }
​
    Rectangle{                                //子对象
        id:border
        anchors.centerIn: parent;color: "white"
        Image{id:photoImage;anchors.centerIn: parent}
    }
​
    state:State{                              //状态
        name:"selected"
        PropertyChanges{target: border;color:"red"}
    }
​
    transitions:Transition{                   //过渡
        from:"";to:"selected"
        ColorAnimation {target:border;duration: 200}
    }
}