Property Binding

Considerations for property aliases

Aliases are only activated once the component completes its initialization. An error is generated when an uninitialized alias is referenced. Likewise, aliasing an aliasing property will also result in an error.

 property alias widgetLabel: label

 //will generate an error
 //widgetLabel.text: "Initial text"

 //will generate an error
 //property alias widgetLabelText: widgetLabel.text

 Component.onCompleted: widgetLabel.text = "Alias completed Initialization"

When importing the component, however, aliasing properties appear as regular Qt properties and consequently can be used in alias references.

It is possible for an aliasing property to have the same name as an existing property, effectively overwriting the existing property. For example, the following component has a color alias property, named the same as the built-in Rectangle::color property:

 Rectangle {
     id: coloredrectangle
     property alias color: bluerectangle.color
     color: "red"

     Rectangle {
         id: bluerectangle
         color: "#1234ff"
     }

     Component.onCompleted: {
         console.log (coloredrectangle.color)    //prints "#1234ff"
         setInternalColor()
         console.log (coloredrectangle.color)    //prints "#111111"
         coloredrectangle.color = "#884646"
         console.log (coloredrectangle.color)    //prints #884646
     }

     //internal function that has access to internal properties
     function setInternalColor() {
         color = "#111111"
     }
 }

Any object that use this component and refer to its color property will be referring to the alias rather than the ordinary Rectangle::color property. Internally, however, the coloredrectangle can correctly set its color property and refer to the actual defined property rather than the alias.

The TabWidget example uses aliases to reassign children to the ListView, creating a tab effect.

 State {
     changes: [
         PropertyChanges {},
         PropertyChanges {}
     ]
 }

 State {
     PropertyChanges {}
     PropertyChanges {}
 }

 Item {
     Text {}
     Rectangle {}
     Timer {}
 }

 Item {
     //without default property
     children: [
         Text {},
         Rectangle {}
     ]
     resources: [
         Timer {}
     ]
 }

 Binding {
     target: system
     property: "brightness"
     value: slider.value
 }

 Rectangle {
     id: rectangle

     states: State {
         name: "WARNING"
         PropertyChanges {
             target: rectangle
             color: warning.color
         }
     }
 }