本文翻译自
https://www.vikingsoftware.com/a-good-qml-file/
什么样的Qml文件(通常称为组件)是一个高质量的文件? 让我们看看示例1:
import QtQuick 2.9
MouseArea {
anchors.right: parent.right
anchors.bottom: parent.bottom
id: button
Rectangle {
anchors.fill: parent
color: "lightgray"
}
width: 100
height: 20
property string text: ""
Text {
anchors.centerIn: parent
text: button.text
}
function foo() {
}
}
再看看示例2:
import QtQuick 2.9
/**
Simple push button like component
No support for theming or icons are provided
*/
Item {
id: root
/// The text on the button
property alias text: textItem.text
/// The signal is emitted when the user clicked on the button
signal clicked()
implicitWidth: textItem.implicitWidth
implicitHeight: textItem.implicitHeight
width: implicitWidth
height: implicitHeight
Rectangle {
id: backround
anchors.fill: parent
color: "lightgray"
}
Text {
id: textItem
anchors.centerIn: parent
}
MouseArea {
id: clickArea
anchors.fill: parent
onClicked: {
root.clicked();
}
}
QtObject {
id: internal
function foo() {
}
}
}
我希望您认同示例2更清晰、更易于使用。但是,让我们来看看它们有什么不同之处:
1. 应该从公共API(如属性、信号和函数)开始;
2. 再到设置的派生属性;
3. 最后是它包含的项。
其思想是,如果有人想要使用该组件,他只需要查看顶部部分。当你浏览代码的时候,它会变得简单很多。
示例1中根控件MouseArea包含了一些Rectangle和Text与原本意思不相符的东西。
internal.foo()
而不是root.foo()
或只是foo()
调用。 另一种选择是使用双下划线(此处为__foo()
)来作为私有属性和函数的名称。示例2稍微多一些工作。 但像往常一样,质量代码增加了一些额外的工作量。 一旦习惯了它,那就不是那么多了。 所以这个简短的列表已经涵盖了一个易于使用的编写良好的QML文件的许多方面。 遵循这些想法将有助于生成可重用且更易维护的QML组件。
好的代码 | 好的示例 | 不好的示例 |
---|---|---|
文件相同的顺序结构 | 示例2中属性->信号->函数->其他 | 示例1中自定义属性随便放 |
关键部分需要注释 | 例子2中关键部分属性与信号都有注释 | 例子1无注释难阅读 |
控件应该有一个id名字且明确 | 示例2 | 示例1 |
控件id应该放在第一行 | 示例2 | 示例1 |
功能明确且单一的 | 示例2 | 示例1中MouseArea包含多个与自己不相关的内容 |
使用隐式大小 | 示例2中使用了implicitWidth属性 | 示例1中直接设置width |
锚点应由上层设置 | 示例2 | 示例1内部设置了锚点会导致意想不到的情况 |
隐藏私有属性和函数或使用双下划线标记 | 示例2中使用QtObject来存放私有属性 | 示例1 |
能使用别名的就别重新定义变量 | 示例2中property alias text | 示例1中button.text |