Qt之QML编码约定

版权声明:支持原创,转载请说明~ https://blog.csdn.net/luoyayun361/article/details/80617566

概述

之前看到一篇Qt 官方的关于QML 开发的编码约定,这里做个简单的总结。一个良好的编码习惯可提高代码的可阅读性,并且整个代码结构会非常清晰,也利于自己进行代码调试。那么,接下来看看官方推荐使用的 有哪些QML 编码规范。

QML对象声明

在 QML 的代码结构中,对象属性的声明顺利通常是:

  • id
  • property declarations
  • signal declarations
  • JavaScript functions
  • object properties
  • child objects
  • states
  • transitions

为了更好的可阅读性,通常用空行来分隔这些不同部分。
下面来看一个示例:

Rectangle {
    id: photo                                               // id on the first line makes it easy to find an object

    property bool thumbnail: false                          // property declarations
    property alias image: photoImage.source

    signal clicked                                          // signal declarations

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

    color: "gray"                                           // object properties
    x: 20; y: 20; height: 150                               // try to group related properties together
    width: {                                                // large bindings
        if (photoImage.width > 200) {
            photoImage.width;
        } else {
            200;
        }
    }

    Rectangle {                                             // child objects
        id: border
        anchors.centerIn: parent; color: "white"

        Image { id: photoImage; anchors.centerIn: parent }
    }

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

    transitions: Transition {                               // transitions
        from: ""; to: "selected"
        ColorAnimation { target: border; duration: 200 }
    }
}

分组属性

如果使用一组属性中的多个属性,如果它提高了可读性,请考虑使用组标记而不是点标记。

例如:

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

Text {
    {
    text:  "hello"
    font.bold: bold: true;  font.italic: italic: true;  font.pixelSize: pixelSize: 20;  font.capitalization: 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 }}
}}

列表

如果列表只包含一个元素,我们通常省略方括号。
例如,一个组件只有一个状态是很常见的。

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) }

如果代码长于一行,因此在一个块内,使用分号来表示每条语句的结束:

MouseArea {
    anchors.fill: parent
    onClicked: {
        var scenePos = mapToItem(null, mouseX, mouseY);
        console.log("MouseArea was clicked at scene pos " + scenePos);
    }

参考地址:http://doc.qt.io/qt-5/qml-codingconventions.html

阅读更多
换一批

没有更多推荐了,返回首页