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
依个人理解, 简要翻译, 如有错漏, 欢迎指正.