找回密码
 立即注册
  • QQ空间
  • 回复
  • 收藏

第5篇Qt Quick入门教程之基础(五)QML的编码约定

admin 2019-3-5 06:15 402人围观 Qt相关

来源于微信公众号:yafeilinux和他的朋友们



导语



前面两篇我们已经对QML语法有了一个大概的认识,作为入门教程,我们不再深入讲解更多的语法内容,如果在后面的教程中使用了新的语法再进行讲解。前面我们看到,在一个QML文档中包含了属性、信号、函数、子对象等多种不同的类型,它们应该按照怎样的顺序来编写才更加规范呢?这一篇咱们来讲一下这个问题。

在QML的帮助文档和示例程序中使用了相同的编码约定,为了风格的统一和代码的规范,建议大家以后编写QML代码时也遵循这个约定。

下面我们开始!

QML对象声明



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


  • id

  • 属性声明

  • 信号声明

  • JavaScript函数

  • 对象属性

  • 子对象

  • 状态

  • 状态切换

为了获取更好的可读性,建议在不同部分之间添加一个空行。例如,下面使用一个Photo对象作为示例:
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 }
    }
}

属性组



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

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
}

可以写成这样:
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) }

结语



代码的书写规范很多时候决定了代码的质量,虽然,可能并不影响代码的功能实现,但还是建议大家从开始学习的时候就养成这样统一的习惯,以后大家相互参考代码的时候,也可以会心一笑,心有灵犀。

相关文章



第3篇 Qt Quick入门教程之基础(三)QML语法1

第4篇 Qt Quick入门教程之基础(四)QML语法2




----------------------------------------------------------------------------------------------------------------------
我们尊重原创,也注重分享,文章来源于微信公众号:yafeilinux和他的朋友们,建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

yafeilinux和他的朋友们微信公众号二维码

微信公众号

专注于Qt嵌入式Linux开发等。扫一扫立即关注。

Qt开源社区官方QQ群二维码

QQ交流群

欢迎加入QQ群大家庭,一起讨论学习!

我有话说......