diff options
author | Martin Jones <martin.jones@nokia.com> | 2009-12-08 23:59:04 (GMT) |
---|---|---|
committer | Martin Jones <martin.jones@nokia.com> | 2009-12-08 23:59:04 (GMT) |
commit | 5d5cdf9d3c96481295626f327f383557b967c04f (patch) | |
tree | e9e62e81ae0cb03dd443cdf93dd7062bf76beae9 /examples/declarative/layouts/positioners.qml | |
parent | 3f84d75ed0806690eaceb606b95806f7c8a9c55e (diff) | |
download | Qt-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.qml | 62 |
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 } + } + } |