QML的编码约定

 Qt Quick
时间:

QML的参考文档和示例程序中使用了相同的编码约定,为了风格统一的代码的规范,建议读者以后编写QML代码时也遵循这个约定,读者可以在Qt帮助中通过QML Coding Conventions 关键字查看本节的内容。

QML对象声明

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

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

为了获取更好的可读性,建议在不同部分之间添加一个空行:

Rectangle {
    id: photo   // id放在第一行,便于找到一个对象

    property bool thumbnail: false // 属性声明
    property alias image: photoImage.source

    signal clicked // 信号声明

    function doSomething(x) // javascript函数
    {
        return x + photoImage.width
    }

    color: "gray" // 对象属性
    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;
        }
    }

    states: State {
        // 状态
        name: "selected"
        PropertyChanges {
            target: border;
            color: "red";
        }
    }

    transitions: Transition {
        // 过渡
        from: "";
        to: "selected"
        ColorAnimation {
            target: border;
            duration: 200;
        }
    }
}
  1. 属性组

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

Rectangle {
    anchors.left: parent.left;
    anchors.top: parent.top;
    anchors.right: parent.right;
    anchors.leftMargin: 20;
}

Text {
    text: "hello"
    font {
        bold: true;
        italic: true;
        pixelSize: 20;
        capitalization: Font.AllUppercase;
    }
}

可以写成这样:

Rectangle {
    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;
    }
}
  1. 列表

如果一个列表只包含一个元素,那么通常忽略方括号。

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

可以写成:

states: State {
    name: "open"
    PropertyChanges {
        target: container;
        width: 200;
    }
}
  1. 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
    //.........
    console.debug(w)
    return w
}

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

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

import "myscript.js" as Script

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

0 评论