Creating UI Logic

Turn your wireframe into an interactive prototype by adding UI logic that enables your components to apply actions or react to mock data from backend systems to simulate complex experiences.

Create connections between the UI components to enable them to communicate with each other. For example, how should the appearance of a button change on a mouse click and which action should the UI perform in response to the signal that is emitted upon the mouse click.

You can create connections between UI components by binding their properties together. This way, when the value of a property changes in a parent component, it can be automatically changed in all the child components by emitting a signal that indicates a change in the value.

To reference a property of a component from another component, you can create property aliases that hold a reference to another property. Unlike an ordinary property definition, which allocates a new, unique storage space for the property, a property alias connects the newly declared property (called the aliasing property) as a direct reference to an existing property (the aliased property). Any content that is data-driven should be exported as a public property of the relevant component. For example, a speedometer should have a property for speed to which the UI is bound.

You can declare various UI states that describe how property values change from a base state. States can be a useful way of organizing your UI logic. You can associate transitions with components to define how their properties will animate when they change due to a state change.

Using property aliases and states to create the differences in your component instances enables you to reuse components instead of duplicating them. Thus, the components do not need to be processed as completely new component types. This reduces the loading and compilation time as well as the package size of the final application.

The preset UI controls have default properties and states that you can modify. If you need additional properties, you can turn instances of the controls into custom components and specify new properties for them.

The following table summarizes some typical use cases with links to more information.

To Learn AboutGo To
Responding to application eventsConnecting Components to Signals
Formatting connectionsAdding Actions and Assignments
Dynamically changing the behavior of a componentAdding Bindings Between Properties
Formatting property bindingsSetting Bindings
Referencing a property of a component from another componentAdding Property Aliases
Referencing a state from within a specific componentAdding States
Switching to a state when a particular property changesApplying States
Using preset UI controls that have default properties and statesUI Controls
Adding custom properties for a particular component typeSpecifying Dynamic Properties

© 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.