Creating UIs

Qt Quick enables you to build UIs around the behavior of components and how they connect with one another. You create components using Qt Quick and QML types that are available in the Library view in the Design mode. You can specify values for the properties of a component to change its appearance and behavior. All QML types have a set of predefined properties, some of which control things that are visible to users, while others are used behind the scene.

While it is useful to learn the basics of Qt Quick, you can also rely on Qt Quick Designer to write the code for you when you drag-and-drop the ready-made components from the Library view to the Form Editor or Navigator view and change them to your liking by modifying their properties in the Properties view. You can always check up details in the extensive Qt Quick documentation by pressing F1.

  • Creating Components

    You can enhance imported designs by customizing ready-made components or design custom forms and shapes directly as QML types. You can import visual assets in various formats, such as PNG, JPG, and SVG for use in the components.

  • Managing Item Hierarchy

    You can manage the items in the current QML file and their relationships in the Navigator view.

  • Specifying Item Properties

    You can specify values for the properties of a component to change its appearance and behavior. All QML types have a set of predefined properties. Some properties, such as position, size, and visibility, are common to all QML types, whereas others are specific to the QML type. You can specify properties for your components in the Properties view.

  • Positioning Items

    The position of an item in a UI can be either absolute or relative to other items. While manual positioning is efficient for a static UI, consider the other available method, such as anchors, layouts, positioners, and property bindings, for dynamic UIs.

  • Using Custom Fonts

    You can load custom fonts to Qt Quick Designer and use them in your designs.

  • Annotating Designs

    You can annotate your designs to provide reviewers or developers with additional information about them.

  • Loading Placeholder Data

    You can create QML files that contain placeholder data, so that you can test grid, list, or path views, even though you don't have access to real data.

  • Qt Quick UI Forms

    Some of the wizards create Qt Quick projects that contain UI forms (.ui.qml files). The forms use a purely declarative subset of the QML language and you can edit them in the Design mode.

© 2021 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.