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