QML编码的一些好的作法

Qt快速布局要求

Qt自己提供Qt Quick快速布局, 以可视化方式在布局中排列Qt Quick Item. 与anchors不一样，Qt Quick Layouts能够根据窗口大小调整其子项的大小以便布局. 需注意如下事项:

提倡作法

• 使用 anchors, width, height 等属性来肯定布局相对于其非布局父Item的大小.
• 使用Layout附加属性设置布局的直接子元素的大小和对齐属性.

不提倡作法

• 不要提供Item的implicitWidth和implicitHeight(自定义首选大小), 除非提供的隐含大小不使人满意.
• 不要在做为布局的直接子项的项目上使用anchors, 但能够使用Layout.preferredWidth和Layout.preferredHeight:

RowLayout {
    id: layout
    anchors.fill: parent
    spacing: 6
    Rectangle {
        color: 'azure'
        Layout.fillWidth: true
        Layout.minimumWidth: 50
        Layout.preferredWidth: 100
        Layout.maximumWidth: 300
        Layout.minimumHeight: 150
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
    Rectangle {
        color: 'plum'
        Layout.fillWidth: true
        Layout.minimumWidth: 100
        Layout.preferredWidth: 200
        Layout.preferredHeight: 100
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
}

注意:Layout和anchors都是占用更多内存和实例化时间的对象. 当简单地绑定到x、y、width和height属性就足够时, 避免使用它们(尤为是在列表和表格委托以及控件的样式中)

类型安全

QML中使用var既简单又方便, 但也有几个缺点需注意:

property var name
property var size
property var optionsMenu

• 若是赋值类型错误, 则报告的错误将指向属性声明的位置, 而不是属性被赋值的位置. 这使得跟踪错误变得更加困难, 从而减慢了开发过程.
• 没法进行静态分析来捕获上述错误.
• 属性的实际基础类型并不老是能当即为读者所清楚.
  在这种状况下, 咱们尽量的使用实际类型:

property string name
property int size
property MyMenu optionsMenu

更提倡声明式绑定，而不是命令式赋值

在QML中, 能够使用命令式JavaScript代码执行诸如响应输入事件, 经过网络发送数据等任务. 命令式代码在QML中占有重要地位, 但重要的是要知道什么时候不使用它

例如, 如下命令赋值:

Rectangle {
    Component.onCompleted: color = "red"
}

有如下缺点:

• 它太慢了, 首先用默认值来运算, 而后又用red去求值来替换.
• 若是有错误, 他将构造时就能发现的错误, 延迟到了运行时.
• 它会覆盖已存在的声明式绑定, 一般它是有意的, 但也多是无心的.
  上述代码彻底能够改写为声明式绑定:

Rectangle {
    color: "red"
}

DPI可扩展的用户界面

随着显示分辨率的提升，可伸缩的应用程序UI变得愈来愈重要。实现这一点的方法之一是为不一样的屏幕分辨率维护UI的几个副本，并根据可用的分辨率加载适当的副本。尽管这工做得很好，但它增长了维护开销。

Qt为这个问题提供了更好的解决方案，建议采用:

• 使用anchors或Qt Quick Layout模块来布局可视Items。
• 不要为可视Item指定显式的width和height。
• 为应用程序支持的每一个显示分辨率提供诸如图像和图标等UI资源。Qt Quick Controls gallery示例经过为@2x、@3x和@4x分辨率提供Qt-logo.png很好地演示了这一点，使应用程序可以知足高分辨率显示。若是显式启用了高DPI缩放特性，Qt会自动选择适合于给定显示的适当图像.
• 将SVG图片用于小图标。 虽然较大的SVG渲染速度可能较慢，但较小的SVG效果很好。 矢量图像避免了像位图图像那样须要提供图像的多个版本。
• 使用基于字体的图标，例如Font Awesome。 这些能够缩放到任何显示分辨率，而且还能够着色。 Qt快速控件文本编辑器示例很好地说明了这一点。

有了这些，应用程序的UI就能够根据所提供的显示分辨率进行缩放。

以上文章参考自Qt官方文档: https://doc.qt.io/qt-5/qtquick-bestpractices.html
依我的理解, 简要翻译, 若有错漏, 欢迎指正.