summaryrefslogtreecommitdiffstats
path: root/examples/declarative/layouts/positioners.qml
diff options
context:
space:
mode:
authorMartin Jones <martin.jones@nokia.com>2009-12-08 23:59:04 (GMT)
committerMartin Jones <martin.jones@nokia.com>2009-12-08 23:59:04 (GMT)
commit5d5cdf9d3c96481295626f327f383557b967c04f (patch)
treee9e62e81ae0cb03dd443cdf93dd7062bf76beae9 /examples/declarative/layouts/positioners.qml
parent3f84d75ed0806690eaceb606b95806f7c8a9c55e (diff)
downloadQt-5d5cdf9d3c96481295626f327f383557b967c04f.zip
Qt-5d5cdf9d3c96481295626f327f383557b967c04f.tar.gz
Qt-5d5cdf9d3c96481295626f327f383557b967c04f.tar.bz2
Add a Flow positioner.
Diffstat (limited to 'examples/declarative/layouts/positioners.qml')
-rw-r--r--examples/declarative/layouts/positioners.qml62
1 files changed, 53 insertions, 9 deletions
diff --git a/examples/declarative/layouts/positioners.qml b/examples/declarative/layouts/positioners.qml
index e912632..4c26bea 100644
--- a/examples/declarative/layouts/positioners.qml
+++ b/examples/declarative/layouts/positioners.qml
@@ -78,6 +78,9 @@ Rectangle {
blueG1.opacity = 0
blueG2.opacity = 0
blueG3.opacity = 0
+ blueF1.opacity = 0
+ blueF2.opacity = 0
+ blueF3.opacity = 0
}
}
@@ -95,6 +98,9 @@ Rectangle {
blueG1.opacity = 1
blueG2.opacity = 1
blueG3.opacity = 1
+ blueF1.opacity = 1
+ blueF2.opacity = 1
+ blueF3.opacity = 1
}
}
@@ -121,20 +127,58 @@ Rectangle {
}
}
- Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
- Rectangle { id: blueG1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15
+ Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
+ Rectangle { id: blueG1; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15
opacity: Behavior{NumberAnimation{}}
}
- Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
- Rectangle { id: blueG2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15
+ Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 }
+ Rectangle { id: blueG2; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15
opacity: Behavior{NumberAnimation{}}
}
- Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
- Rectangle { id: blueG3; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15
+ Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
+ Rectangle { id: blueG3; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15
opacity: Behavior{NumberAnimation{}}
}
- Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
- Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
- Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
+ Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
+ Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 }
+ Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
}
+
+ Flow {
+ id: layout4
+ x: 260
+ y: 250
+ width: 150
+ remove: Transition {
+ NumberAnimation {
+ matchProperties: "x,y"; easing: "easeOutBounce"
+ }
+ }
+
+ move: Transition {
+ NumberAnimation {
+ matchProperties: "x,y"; easing: "easeOutBounce"
+ }
+ }
+
+ add: Transition {
+ NumberAnimation {
+ matchProperties: "x,y"; easing: "easeOutBounce"
+ }
+ }
+ Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
+ Rectangle { id: blueF1; color: "lightsteelblue"; width: 60; height: 50; border.color: "black"; radius: 15
+ opacity: Behavior{NumberAnimation{}}
+ }
+ Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 }
+ Rectangle { id: blueF2; color: "lightsteelblue"; width: 60; height: 50; border.color: "black"; radius: 15
+ opacity: Behavior{NumberAnimation{}}
+ }
+ Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
+ Rectangle { id: blueF3; color: "lightsteelblue"; width: 40; height: 50; border.color: "black"; radius: 15
+ opacity: Behavior{NumberAnimation{}}
+ }
+ Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 }
+ }
+
}