Despite all of the benefits that QML and Qt Quick offer, they can be challenging in certain situations. The following sections elaborate on some of the best practices that will help you get better results when developing applications.
A fluid and modern UI is key for any application's success in today's world, and that's where QML makes so much sense for a designer or developer. Qt offers the most basic UI controls that are necessary to create a fluid and modern-looking UI. It is recommended to browse this list of UI controls before creating your own custom UI control.
Besides these basic UI controls offered by Qt Quick itself, a rich set of UI controls are also available with Qt Quick Controls. They cater to the most common use cases without any change, and offer a lot more possibilities with their customization options. In particular, Qt Quick Controls provides styling options that align with the latest UI design trends. If these UI controls do not satisfy your application's needs, only then it is recommended to create a custom control.
见 QML 编码约定 .
Most applications depend on resources such as images and icons to provide a rich user experience. It can often be a challenge to make these resources available to the application regardless of the target OS. Most popular OS-es employ stricter security policies that restrict access to the file system, making it harder to load these resources. As an alternative, Qt offers its own 资源系统 that is built into the application binary, enabling access to the application's resources regardless of the target OS.
For example, consider the following project directory structure:
MyModule ├── images │ ├── image1.png │ └── image2.png ├── CMakeLists.txt └── main.qml
You may represent this structure as a CMake QML Module in the following way:
qt_add_qml_module(my_module URI MyModule VERSION 1.0 QML_FILES main.qml RESOURCES images/image1.png images/image2.png # ... )
All QML files listed under
QML_FILES
will automatically get compiled
ahead of time
.
One of the key goals that most application developers want to achieve is to create a maintainable application. One of the ways to achieve this goal is to separate the user interface from the business logic. The following are a few reasons why an application's UI should be written in QML:
Being a strongly typed language, C++ is best suited for an application's logic. Typically, such code performs tasks such as complex calculations or data processing, which are faster in C++ than QML.
Qt offers various approaches to integrate QML and C++ code in an application. A typical use case is displaying a list of data in a user interface. If the data set is static, simple, and/or small, a model written in QML can be sufficient.
The following snippet demonstrates examples of models written in QML:
model: [ "Item 1", "Item 2", "Item 3" ] model: 10
使用 C++ for dynamic data sets that are large or frequently modified.
Refactoring QML is a lot easier than refactoring C++, so in order to make maintenance pain-free, we should strive to keep C++ types unaware of QML as much as possible. This can be achieved by "pushing" references to C++ types into QML.
This can be done by using required properties and setting them via QQmlApplicationEngine::setInitialProperties . It is also possible to create one or multiple singletons which will return all the data the C++ side wants to provide to QML.
With this approach, the C++ remains unchanged in the event that the QML needs to be refactored in the future.
For a quick guide to choosing the correct approach to expose C++ types to QML, see Choosing the Correct Integration Method Between C++ and QML .
Qt offers Qt Quick Layouts to arrange Qt Quick items visually in a layout. Unlike its alternative, the item positioners, the Qt Quick Layouts can also resize its children on window resize. Although Qt Quick Layouts are often the desired choice for most use cases, the following dos and don'ts must be considered while using them:
Layout.preferredWidth
and
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 } } }
注意： Layouts and anchors are both types of objects that take more memory and instantiation time. Avoid using them (especially in list and table delegates, and styles for controls) when simple bindings to x, y, width, and height properties are enough.
When declaring properties in QML, it's easy and convenient to use the "var" type:
property var name property var size property var optionsMenu
However, this approach has several disadvantages:
Instead, always use the actual type where possible:
property string name
property int size
property MyMenu optionsMenu
For information on performance in QML and Qt Quick, see 性能注意事项和建议 .
In QML, it's possible to use imperative JavaScript code to perform tasks such as responding to input events, send data over a network, and so on. Imperative code has an important place in QML, but it's also important to be aware of when not to use it.
For example, consider the following imperative assignment:
Rectangle {
Component.onCompleted: color = "red"
}
This has the following disadvantages:
The code can be rewritten to be a declarative binding instead:
Rectangle {
color: "red"
}
For information on useful tools and utilies that make working with QML and Qt Quick easier, see Qt Quick 工具和实用程序 .
Qt Quick 场景图形的有关信息，见 Qt Quick 场景图形 .
As display resolutions improve, a scalable application UI becomes more and more important. One of the approaches to achieve this is to maintain several copies of the UI for different screen resolutions, and load the appropriate one depending on the available resolution. Although this works pretty well, it adds to the maintenance overhead.
Qt offers a better solution to this problem and recommends the application developers to follow these tips:
qt-logo.png
for
@2x
,
@3x
，和
@4x
resolutions, enabling the application to cater to high resolution displays. Qt automatically chooses the appropriate image that is suitable for the given display, provided the high DPI scaling feature is explicitly enabled.
With this in place, your application's UI should scale depending on the display resolution on offer.
