Qt Quick Best Practices

The following guidelines describe the most efficient ways to use Qt Creator to create UIs and scenes that run flawlessly on the intended platforms.

For best practices in creating 3D scenes with optimized graphics performance, see Creating Optimized 3D Scenes .

Naming Conventions

Establish naming conventions to keep the items in your UI organized. Name your items accurately and give them suitable QML IDs. You should manually specify the names of the items you export from design tools to create reliable and self-explanatory names that follow the naming conventions you have established.

For example, a button symbol might have the ID myButton_symbol and the different layers might have it as a prefix with the states appended, thus producing IDs such as myButton_symbol_default . To prepare for additional mouse areas later in the project, you could use similar IDs for them, such as myButton_symbol_hotspot . When you use the button as instances in a screen, you would give each of these instances a unique ID that relates to that screen. For example, myButton_myMenu_home , myButton_myMenu_profile ，和 myButton_myMenu_settings

Planning the UI

Plan your UI properly. Know what elements, such as screens, components, and states, you need. Creating a descriptive wireframe and acquiring a detailed UI specification before you start will make the process of creating the UI more efficient.

Using Components Economically

It is important to understand the performance costs associated with using components.

To use components efficiently and economically:

• Componentize your design by packaging your resources into reusable components that can be conveniently recombined to suit the needs of your UI.
• Use as few components as necessary. To minimize the number of components, use alias properties and states to create the differences in your instances. We recommend reusing components instead of duplicating them, so the components do not need to be processed as completely new types. This reduces loading and compilation time as well as the size of the binary.
• Any content that is data-driven should be exported as a public property of the relevant component. For example, a speedometer should have an int or real property for speed to which the UI is bound.
• Separate UI from the application logic. Designers should work with the UI forms (.ui.qml files), while developers should work on the corresponding QML files (.qml) to define their programmatic behaviors or JavaScript. This enables iteration from both the design and development side of the process without the the risk of overwriting each other's work.