Adjust positioners example for tooling

* Fully qualify all property bindings
* Not using flow as id, because it collides with the property flow

These changes are required so the example works nicely in the designer.

Change-Id: I05972a5a7ebe7277ae7f4230bb68a8b8b011b2f3
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>
This commit is contained in:
Thomas Hartmann 2016-10-26 12:17:55 +02:00 committed by Tim Jenssen
parent 47847bebca
commit 441e6bbdb0
2 changed files with 56 additions and 56 deletions

View File

@ -66,14 +66,14 @@ Rectangle {
anchors.left: parent.left
anchors.leftMargin: page.width / 32
anchors.topMargin: page.height / 48
spacing: elementSpacing
spacing: page.elementSpacing
//! [0]
Rectangle {
id: green
color: "#80c342"
width: 100 * ratio
height: 100 * ratio
width: 100 * page.ratio
height: 100 * page.ratio
Text {
anchors.left: parent.right
@ -95,8 +95,8 @@ Rectangle {
Rectangle {
id: blue
color: "#14aaff"
width: 100 * ratio
height: 100 * ratio
width: 100 * page.ratio
height: 100 * page.ratio
Text {
anchors.left: parent.right
@ -117,8 +117,8 @@ Rectangle {
Rectangle {
id: purple
color: "#6400aa"
width: 100 * ratio
height: 100 * ratio
width: 100 * page.ratio
height: 100 * page.ratio
Text {
anchors.left: parent.right
@ -140,8 +140,8 @@ Rectangle {
Rectangle {
id: hidingRect
color: "#006325"
width: 100 * ratio
height: 100 * ratio
width: 100 * page.ratio
height: 100 * page.ratio
visible: false
Text {

View File

@ -55,7 +55,7 @@ Item {
interval: 2000
running: true
repeat: true
onTriggered: effectiveOpacity = (effectiveOpacity == 1.0 ? 0.0 : 1.0);
onTriggered: page.effectiveOpacity = (page.effectiveOpacity == 1.0 ? 0.0 : 1.0);
}
Column {
@ -65,7 +65,7 @@ Item {
top: parent.top
topMargin: page.height / 48
}
spacing: elementSpacing
spacing: page.elementSpacing
populate: Transition {
NumberAnimation { properties: "x,y"; from: 200; duration: 100; easing.type: Easing.OutBounce }
@ -77,32 +77,32 @@ Item {
NumberAnimation { properties: "y"; easing.type: Easing.OutBounce }
}
Rectangle { color: "#80c342"; width: bigSize; height: smallSize }
Rectangle { color: "#80c342"; width: page.bigSize; height: page.smallSize }
Rectangle {
id: greenV1
visible: opacity != 0
width: bigSize; height: smallSize
width: page.bigSize; height: page.smallSize
color: "#006325"
border.color: "transparent"
Behavior on opacity { NumberAnimation {} }
opacity: effectiveOpacity
opacity: page.effectiveOpacity
}
Rectangle { color: "#14aaff"; width: bigSize; height: smallSize }
Rectangle { color: "#14aaff"; width: page.bigSize; height: page.smallSize }
Rectangle {
id: greenV2
visible: opacity != 0
width: bigSize; height: smallSize
width: page.bigSize; height: page.smallSize
color: "#006325"
border.color: "transparent"
Behavior on opacity { NumberAnimation {} }
opacity: effectiveOpacity
opacity: page.effectiveOpacity
}
Rectangle { color: "#6400aa"; width: bigSize; height: smallSize }
Rectangle { color: "#80c342"; width: bigSize; height: smallSize }
Rectangle { color: "#6400aa"; width: page.bigSize; height: page.smallSize }
Rectangle { color: "#80c342"; width: page.bigSize; height: page.smallSize }
}
Row {
@ -112,7 +112,7 @@ Item {
bottom: page.bottom
bottomMargin: page.height / 48
}
spacing: elementSpacing
spacing: page.elementSpacing
populate: Transition {
NumberAnimation { properties: "x,y"; from: 200; duration: 100; easing.type: Easing.OutBounce }
@ -124,40 +124,40 @@ Item {
NumberAnimation { properties: "x"; easing.type: Easing.OutBounce }
}
Rectangle { color: "#80c342"; width: smallSize; height: bigSize }
Rectangle { color: "#80c342"; width: page.smallSize; height: page.bigSize }
Rectangle {
id: blueH1
visible: opacity != 0
width: smallSize; height: bigSize
width: page.smallSize; height: page.bigSize
color: "#006325"
border.color: "transparent"
Behavior on opacity { NumberAnimation {} }
opacity: effectiveOpacity
opacity: page.effectiveOpacity
}
Rectangle { color: "#14aaff"; width: smallSize; height: bigSize }
Rectangle { color: "#14aaff"; width: page.smallSize; height: page.bigSize }
Rectangle {
id: greenH2
visible: opacity != 0
width: smallSize; height: bigSize
width: page.smallSize; height: page.bigSize
color: "#006325"
border.color: "transparent"
Behavior on opacity { NumberAnimation {} }
opacity: effectiveOpacity
opacity: page.effectiveOpacity
}
Rectangle { color: "#6400aa"; width: smallSize; height: bigSize }
Rectangle { color: "#80c342"; width: smallSize; height: bigSize }
Rectangle { color: "#6400aa"; width: page.smallSize; height: page.bigSize }
Rectangle { color: "#80c342"; width: page.smallSize; height: page.bigSize }
}
Grid {
anchors.top: parent.top
anchors.topMargin: page.height / 48
anchors.left: flow.left
anchors.left: flowItem.left
columns: 3
spacing: elementSpacing
spacing: page.elementSpacing
populate: Transition {
NumberAnimation { properties: "x,y"; from: 200; duration: 100; easing.type: Easing.OutBounce }
@ -169,55 +169,55 @@ Item {
NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
}
Rectangle { color: "#80c342"; width: smallSize; height: smallSize }
Rectangle { color: "#80c342"; width: page.smallSize; height: page.smallSize }
Rectangle {
id: greenG1
visible: opacity != 0
width: smallSize; height: smallSize
width: page.smallSize; height: page.smallSize
color: "#006325"
border.color: "transparent"
Behavior on opacity { NumberAnimation {} }
opacity: effectiveOpacity
opacity: page.effectiveOpacity
}
Rectangle { color: "#14aaff"; width: smallSize; height: smallSize }
Rectangle { color: "#14aaff"; width: page.smallSize; height: page.smallSize }
Rectangle {
id: greenG2
visible: opacity != 0
width: smallSize; height: smallSize
width: page.smallSize; height:page. smallSize
color: "#006325"
border.color: "transparent"
Behavior on opacity { NumberAnimation {} }
opacity: effectiveOpacity
opacity: page.effectiveOpacity
}
Rectangle { color: "#6400aa"; width: smallSize; height: smallSize }
Rectangle { color: "#6400aa"; width: page.smallSize; height: page.smallSize }
Rectangle {
id: greenG3
visible: opacity != 0
width: smallSize; height: smallSize
width: page.smallSize; height: page.smallSize
color: "#006325"
border.color: "transparent"
Behavior on opacity { NumberAnimation {} }
opacity: effectiveOpacity
opacity: page.effectiveOpacity
}
Rectangle { color: "#80c342"; width: smallSize; height: smallSize }
Rectangle { color: "#14aaff"; width: smallSize; height: smallSize }
Rectangle { color: "#6400aa"; width: smallSize; height: smallSize }
Rectangle { color: "#80c342"; width:page. smallSize; height: page.smallSize }
Rectangle { color: "#14aaff"; width: smallSize; height: page.smallSize }
Rectangle { color: "#6400aa"; width: page.page.smallSize; height: page.smallSize }
}
Flow {
id: flow
id: flowItem
anchors.right: page.right
anchors.rightMargin: page.width / 32
y: 2 * bigSize
width: 1.8 * bigSize
spacing: elementSpacing
y: 2 * page.bigSize
width: 1.8 * page.bigSize
spacing: page.elementSpacing
//! [move]
move: Transition {
@ -237,42 +237,42 @@ Item {
}
//! [populate]
Rectangle { color: "#80c342"; width: smallSize; height: smallSize }
Rectangle { color: "#80c342"; width: page.smallSize; height: page.smallSize }
Rectangle {
id: greenF1
visible: opacity != 0
width: 0.6 * bigSize; height: smallSize
width: 0.6 * page.bigSize; height: page.smallSize
color: "#006325"
border.color: "transparent"
Behavior on opacity { NumberAnimation {} }
opacity: effectiveOpacity
opacity: page.effectiveOpacity
}
Rectangle { color: "#14aaff"; width: 0.3 * bigSize; height: smallSize }
Rectangle { color: "#14aaff"; width: 0.3 * page.bigSize; height: page.smallSize }
Rectangle {
id: greenF2
visible: opacity != 0
width: 0.6 * bigSize; height: smallSize
width: 0.6 * page.bigSize; height: page.smallSize
color: "#006325"
border.color: "transparent"
Behavior on opacity { NumberAnimation {} }
opacity: effectiveOpacity
opacity: page.effectiveOpacity
}
Rectangle { color: "#6400aa"; width: smallSize; height: smallSize }
Rectangle { color: "#6400aa"; width: page.smallSize; height: page.smallSize }
Rectangle {
id: greenF3
visible: opacity != 0
width: 0.4 * bigSize; height: smallSize
width: 0.4 * page.bigSize; height: page.smallSize
color: "#006325"
border.color: "transparent"
Behavior on opacity { NumberAnimation {} }
opacity: effectiveOpacity
opacity: page.effectiveOpacity
}
Rectangle { color: "#80c342"; width: 0.8 * bigSize; height: smallSize }
Rectangle { color: "#80c342"; width: 0.8 * page.bigSize; height: page.smallSize }
}
}