【qml】QML最佳实践02

一、使用Qt QML时的布局规则

通常情况下，在QtCreator和Qt Designer studio中都有调整QML对象类型的布局方法。虽然Qt Quick Layouts通常是大多数开发场景的理想选择，但在实际使用中必须注意以下几点：

（1）使用锚、宽度和高度属性来指定非布局父项的布局大小。

（2）使用Layout附加属性设置布局的直接子元素的大小和对齐属性。

（3）不要为有implicitWidth和implicitHeight属性的条目定义首选大小。

（4）不要在Layout的直接子项上使用锚。应使用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
        }
    }
}

注：布局和锚都需要更多的内存和更长的实例化时间来创建。当对x、y、width和height属性的绑定能满足我们的设计效果时，尽量避免使用它们(特别是在列表和表委托中，和控件的样式中)。【设置可扩展的用户界面除外】

二、确保类型安全

当我们在QML中声明属性时，使用“var”类型非常方便，例如下列代码：

property var name
property var size
property var optionsMenu

然而，这种方法有三个缺点:

（1）如果赋值的类型错误，则报告的错误将指向属性声明的位置，而不是赋值属性的位置。这一点将难以跟踪错误。

（2）通过静态分析来捕获上面提到的错误是不可能的。

（3）对于阅读代码的人来说，属性的实际类型并不是一眼就知道。

相反，在实际使用中我们应尽可能使用实际类型：

property string name
property int size
property MyMenu optionsMenu

三、使用声明式绑定替代命令式赋值

在QML中，可以使用命令式JavaScript代码执行诸如：响应输入事件、通过网络发送数据等任务。命令式代码在QML中使用都是具有固定位置的（因为是JavaScript代码）。

例如，以下命令式赋值代码：

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

上述代码有几个缺点：

（1）相对来说运行缓慢。color属性首先将使用一个默认构造的值进行计算，然后再使用“红色”进行计算。

（2）这种操作会将在构建时发现的错误延迟到运行时，从而不容易定位问题。

（3）这种方式覆盖了已经存在的声明性绑定。在实际开发中，这可能是有意为之，但有时也可能是无意的。

因此，上述代码可以重写为声明性绑定，如下代码：

Rectangle {
    color: "red"
}

因此在实际QML应用开发中，应尽量使用声明式绑定替代命令式赋值。

四、设计可扩展的用户界面

目前，随着显示分辨率的提高，开发可扩展的应用程序UI变得越来越重要。实现这一目标的方法，一般是：为不同屏幕分辨率维护多个UI副本，并根据可用分辨率加载适当的UI副本。这样做也能满足开发设计需求，但因此也增加了代码维护成本。

Qt为解决这个问题提供了一个更好方案，在实际开发中，我们应遵循以下规则：

（1）使用锚或Qt Quick Layouts模块来布局可视项目。

（2）不要为可视项目显式指定宽度和高度。

（3）为应用程序支持的每个显示分辨率提供图像和图标等UI资源。Qt会自动选择合适的图片，适应给定的显示，并提供高DPI的缩放功能。

（4）使用SVG格式的小图标。虽然较大的svg渲染速度较慢，但我们可以使用较小的svg，且实际显示效果很好。矢量图片避免了像位图片一样需要提供多个版本的图片。

（5）使用基于字体的图标。因为他们可以缩放到任何显示分辨率，也允许着色。

五、总结

QML最佳实践规则大多参考Qt官方文档并进行归纳整理，并结合际使用总结成文。许多地方在实际QML开发中需要注意。