Specifying Dynamic Properties

Each preset component has a set of preset properties that you can specify values for. You can add custom properties that would not otherwise exist for a particular component type. You bind the properties to dynamic expressions to define global properties for a component that can be read by other components. For example, you can specify global properties for the root component that you can use in the child components.

For example, to specify spacing between UI elements, you could define a margin for a component that does not have a margin property, and then use bindings to refer to the value of the margin property from other components.

Similarly, you can add custom properties for your own components that are based on preset components.

Any content that is data-driven should be exported as a public property (alias property) of the relevant component. For example, a speedometer should have an int or real property for speed to which the UI is bound.

You can add properties for components on the Properties tab in in the Connections view.

"Custom properties in the Connections view Custom Properties tab"

To add properties for a component:

  1. Go to the Properties tab in the Connections view.
  2. Select the (Add) button to add a dynamic property for the currently selected component. The component ID is displayed in the Item column.
  3. Double-click the value in the Property column to give a name to the property. Property names must begin with a lower case letter and can only contain letters, numbers, and underscores. JavaScript reserved words are not valid property names.
  4. Double-click the value in the Property Type column to specify the type of the property.
  5. Double-click the value in the Property Value column to specify the value of the property.

Right-click a property and select Open Binding Editor in the context menu to bind the value of the property to that of another one or to data accessible in the application in Binding Editor. For more information, see Setting Bindings.

"Binding Editor"

The properties you add for a component are displayed in the Properties view when you select a component of that type in the Navigator or 2D view.

"Custom properties in Properties view"

For more information about setting property values in the Properties view, see Specifying Component Properties.

Supported Property Types

The following table describes the supported property types:

aliasProperty alias that holds a reference to another property
boolBinary true or false value
colorColor value that can be specified by using an SVG color name, such as "red", "green", or "lightsteelblue", or a hexadecimal triplet or quad in the form "#RRGGBB" and "#AARRGGBB", respectively. For example, the color red corresponds to a triplet of "#FF0000" and a slightly transparent blue to a quad of "#800000FF". In addition, you can use the following Qt functions: Qt.rgba(), Qt.hsva(), Qt.hsla(), Qt.darker(), Qt.lighter(), and Qt.tint().
intWhole integer number, such as 0, 10, or -20
realNumber with a decimal point
stringFree form text string
urlResource locator, such as a file name. It can be either absolute, (http://qt-project.org), or relative (pics/logo.png). A relative URL is resolved relative to the URL of the parent component.
variantGeneric property type. For example, variant properties can store numbers, strings, objects, arrays, and functions.

Available under certain Qt licenses.
Find out more.