QML 最佳实践：编码约定

There are many different ways to code using QML. These are a set of guidelines to help your code look better and consistent.

编码约定

The official QML Coding Conventions may be found at QML 编码约定 . This is the recommended convention that will be used throughout the QML documentation.

In addition, Qt's official code style may be found at the Qt Coding Style .

将文件导入 QML

To import items such as directories, use the "import" keyword, similar to the way the import QtQuick 1.0 statement is used.

import QtQuick 1.0
import QtWebKit 1.0
import "subdirectory"
import "script.js"
								

To facilitate the import of QML components, it is best to begin the QML file with an uppercase character. This way, the user can simply declare the component using the file name as the component name. For example, if a QML component is in a file named Button.qml , then the user may import the component by declaring a Button {} . Note that this method only works if the QML files are in the same directory.

It is also possible to import QML files which have file names that begin in lower case or files in a different directory by using a qmldir 文件。

A qmldir file tells your QML application which QML components, plugins, or directories to import. The qmldir file must reside in an imported directory. By using the qmldir file, users may import any QML file and assign any valid QML component name to the component.

For more information, read the section on Loading a Component .

注释代码

Commenting code allows others to read the source code better. As well, comments allow the programmer to think about his or her code; a confusing comment may mean the code is confusing.

Similar to JavaScript or C++, there are two ways of commenting QML code:

• Single line comments start with // and finish at the end of the line
• Multiline comments start with /* and finish with */

组特性

Many QML properties are attached or group properties. For convenience, you may treat them as another element when dealing with multiple properties belonging to the same group.

border.width: 1
border.color: "red"
anchors.bottom: parent.bottom
anchors.left: parent.left
								

Treating groups of properties as a block can ease confusion and help relate the properties with other properties.

border {
    width: 1;
    color: "red"
}
anchors {
    bottom: parent.bottom;
    left: parent.left
}