1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
// Copyright (C) 2020 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\page quick-dynamic-properties.html
\previouspage quick-property-bindings.html
\if defined(qtdesignstudio)
\nextpage quick-states.html
\else
\nextpage quick-connections-backend.html
\endif
\sa {Specifying Component Properties}
\title Specifying Custom Properties
Each \l{Preset Components}{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 \l{Component Types}{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
\l{Adding Bindings Between Properties}{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 \e int or \e real property for speed to which the UI is
bound.
\section1 Adding Properties for a Component
To add a custom property for a component:
\list 1
\li Go to the \uicontrol {Local Custom Properties} section in the
\uicontrol Properties view.
\li Select the \inlineimage icons/plus.png
(\uicontrol Add) button to add a custom property for the currently
selected component.
\image add-local-custom-property.png
\li Set the \uicontrol Name and \uicontrol Type for the property.
\image add-new-property-dialog.png
\endlist
\section1 Binding a Property Value
To bind the value of the property to that of another one or to data
accessible in the application.
\list 1
\li In the \uicontrol Properties view, select
\inlineimage icons/action-icon.png
next to the property.
\li Select \uicontrol {Set Binding}.
\image qmldesigner-binding-editor.png "Binding Editor"
\endlist
For more information, see \l{Setting Bindings}.
\section1 Supported Property Types
The following table describes the supported property types:
\table
\header
\li Type
\li Description
\row
\li alias
\li \l{Property Aliases}{Property alias} that holds a reference to
another property
\row
\li bool
\li Binary \c true or \c false value
\row
\li color
\li Color 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: \l{Qt::rgba()}
{Qt.rgba()}, \l{Qt::hsva()}{Qt.hsva()}, \l{Qt::hsla()}{Qt.hsla()},
\l{Qt::darker()}{Qt.darker()}, \l{Qt::lighter()}{Qt.lighter()}, and
\l{Qt::tint()}{Qt.tint()}.
\row
\li int
\li Whole integer number, such as 0, 10, or -20
\row
\li real
\li Number with a decimal point
\row
\li string
\li Free form text string
\row
\li TextureInput
\li Specifies a texture exposed to the shaders of a CustomMaterial or Effect.
\row
\li url
\li Resource locator, such as a file name. It can be either absolute,
(\c http://qt-project.org), or relative (\c pics/logo.png). A
relative URL is resolved relative to the URL of the parent
component.
\row
\li variant
\li Generic property type. For example, variant properties can store
numbers, strings, objects, arrays, and functions.
\row
\li vector2d
\li Refers to a value with x and y attributes.
\row
\li vector3d
\li Refers to a value with x, y, and z attributes.
\row
\li vector4d
\li Refers to a value with x, y, z, and w attributes.
\endtable
*/
|
