summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--demos/declarative/flickr/content/ImageDetails.qml33
-rw-r--r--demos/declarative/flickr/content/Slider.qml10
-rw-r--r--demos/declarative/flickr/flickr.qml2
-rw-r--r--doc/src/declarative/qmlintro.qdoc225
-rw-r--r--doc/src/declarative/qmlreference.qdoc1
-rw-r--r--doc/src/declarative/tutorial2.qdoc10
-rw-r--r--doc/src/snippets/declarative/comments.qml9
-rw-r--r--examples/declarative/dial/DialLibrary/Dial.qml24
-rw-r--r--examples/declarative/dial/dial.qml34
-rw-r--r--examples/declarative/mouseregion/mouse.qml20
-rw-r--r--examples/declarative/scrollbar/ScrollBar.qml3
-rw-r--r--examples/declarative/slideswitch/Switch.qml55
-rw-r--r--examples/declarative/states/states.qml73
-rw-r--r--examples/declarative/states/transitions.qml105
-rw-r--r--src/declarative/fx/qfxflickable.cpp16
15 files changed, 361 insertions, 259 deletions
diff --git a/demos/declarative/flickr/content/ImageDetails.qml b/demos/declarative/flickr/content/ImageDetails.qml
index 5c2d885..d575be9 100644
--- a/demos/declarative/flickr/content/ImageDetails.qml
+++ b/demos/declarative/flickr/content/ImageDetails.qml
@@ -2,8 +2,6 @@ Flipable {
id: Container
property var frontContainer: ContainerFront
- property var flickableArea: Flickable
- property var slider: Slider
property string photoTitle: ""
property string photoDescription: ""
property string photoTags: ""
@@ -77,13 +75,28 @@ Flipable {
Progress { anchors.centeredIn: parent; width: 200; height: 18; progress: BigImage.progress; visible: BigImage.status }
Flickable {
id: Flick; width: Container.width - 10; height: Container.height - 10
- x: 5; y: 5; clip: true; viewportWidth: (BigImage.width * BigImage.scale) + BigImage.x;
- viewportHeight: BigImage.height * BigImage.scale
-
- Image {
- id: BigImage; source: Container.photoUrl; scale: Slider.value
- x:Math.max(0, ((Flick.width/2)-(width * scale / 2)));
- y:Math.max(0, (Flick.height/2)-(height * scale / 2));
+ x: 5; y: 5; clip: true;
+ viewportWidth: ImageContainer.width; viewportHeight: ImageContainer.height
+
+ Item {
+ id: ImageContainer
+ width: Math.max(BigImage.width * BigImage.scale, Flick.width);
+ height: Math.max(BigImage.height * BigImage.scale, Flick.height);
+
+ Image {
+ id: BigImage; source: Container.photoUrl; scale: Slider.value
+ // Center image if it is smaller than the flickable area.
+ x: ImageContainer.width > width*scale ? (ImageContainer.width - width*scale) / 2 : 0
+ y: ImageContainer.height > height*scale ? (ImageContainer.height - height*scale) / 2 : 0
+ anchors.centeredIn: parent
+ onStatusChanged : {
+ // Default scale shows the entire image.
+ if (status == 0 && width != 0) {
+ Slider.minimum = Math.min(Flick.width / width, Flick.height / height);
+ Slider.value = Math.min(Slider.minimum, 1);
+ }
+ }
+ }
}
}
@@ -96,7 +109,7 @@ Flipable {
anchors.centeredIn: parent; color: "white"; font.bold: true
}
- Slider { id: Slider; x: 25; y: 374; visible: BigImage.status == 0; imageWidth: Container.photoWidth; imageHeight: Container.photoHeight }
+ Slider { id: Slider; x: 25; y: 374; visible: { BigImage.status == 0 && maximum > minimum } }
}
states: [
diff --git a/demos/declarative/flickr/content/Slider.qml b/demos/declarative/flickr/content/Slider.qml
index c6a3e5e..92f4993 100644
--- a/demos/declarative/flickr/content/Slider.qml
+++ b/demos/declarative/flickr/content/Slider.qml
@@ -1,11 +1,12 @@
Item {
id: Slider; width: 400; height: 16
- property var value: Handle.x / Slider.xMax
+ // value is read/write.
+ property real value
+ onValueChanged: { Handle.x = (value - minimum) * Slider.xMax / (maximum - minimum); }
+ property real maximum: 1
+ property real minimum: 1
property int xMax: Slider.width - Handle.width - 2
- property var handle: Handle
- property int imageWidth
- property int imageHeight
Rect {
id: Container; anchors.fill: parent; gradientColor: "#66000000";
@@ -20,6 +21,7 @@ Item {
MouseRegion {
anchors.fill: parent; drag.target: parent
drag.axis: "x"; drag.xmin: 2; drag.xmax: Slider.xMax
+ onPositionChanged: { value = (maximum - minimum) * Handle.x / Slider.xMax + minimum; }
}
}
}
diff --git a/demos/declarative/flickr/flickr.qml b/demos/declarative/flickr/flickr.qml
index 829f568..8d294f8 100644
--- a/demos/declarative/flickr/flickr.qml
+++ b/demos/declarative/flickr/flickr.qml
@@ -48,7 +48,6 @@ Item {
Script {
function photoClicked() {
ImageDetails.photoTitle = title;
- ImageDetails.flickableArea.yPosition = 0;
ImageDetails.photoDescription = description;
ImageDetails.photoTags = tags;
ImageDetails.photoWidth = photoWidth;
@@ -58,7 +57,6 @@ Item {
ImageDetails.photoDate = photoDate;
ImageDetails.photoUrl = url;
ImageDetails.rating = 0;
- ImageDetails.slider.handle.x = ImageDetails.slider.xMax;
Wrapper.state = "Details";
}
}
diff --git a/doc/src/declarative/qmlintro.qdoc b/doc/src/declarative/qmlintro.qdoc
new file mode 100644
index 0000000..4df1f25
--- /dev/null
+++ b/doc/src/declarative/qmlintro.qdoc
@@ -0,0 +1,225 @@
+/*!
+\page qmlintroduction.html
+\title Introduction to the Qml language
+
+\tableofcontents
+
+\section1 What is Qml?
+
+Qml is a declarative language designed to describe the user interface of a
+program: both what it looks like and how it behaves. In Qml, a user
+interface is specified as a tree of objects with properties.
+
+\section1 What should I know before starting?
+
+This introduction is meant for those with little or no programming
+experience. JavaScript is used as a scripting language in Qml, so you may want
+to learn a bit more about it (\l{JavaScript: The Definitive Guide}) before diving
+too deep into Qml. It's also helpful to have a basic understanding of other web
+technologies like HTML and CSS, but not required.
+
+\section1 Basic Qml Syntax
+
+Qml looks like this:
+
+\code
+Rect {
+ width: 200
+ height: 200
+ color: "white"
+ Image {
+ source: "pics/logo.png"
+ anchors.centeredIn: parent
+ }
+}
+\endcode
+
+Objects are specified by their type, followed by a pair of braces. Object
+types always begin with a capital letter. In the above example, there are
+two objects, a \l Rect, and an \l Image. Between the braces, we can specify
+information about the object, such as its properties.
+
+Properties are specified as \c {property: value} (much like CSS). In the above
+example, we can see the Image has a property named \e source, which has been
+assigned the value \e "pics/logo.png". The property and its value are
+separated by a colon.
+
+Properties can be specified one-per-line:
+
+\code
+Rect {
+ width: 100
+ height: 100
+}
+\endcode
+
+or you can put multiple properties on a single line:
+
+\code
+Rect { width: 100; height: 100 }
+\endcode
+
+When multiple property/value pairs are specified on a single line, they
+must be separated by a semicolon.
+
+\section1 Expressions
+
+In addition to assigning values to properties, you can also assign
+expressions written in JavaScript.
+
+\code
+Rotation { angle: 360*3 }
+\endcode
+
+These expressions can include references to other objects and properties, in which case
+a \e binding is established: when the value of the expression changes, the property the
+expression has been assigned to is automatically updated to that value.
+
+\code
+Item {
+ Text {
+ id: Text1
+ text: "Hello World"
+ }
+ Text {
+ id: Text2
+ text: Text1.text
+ }
+}
+\endcode
+
+In the example above, the Text2 object will display the same text as Text1. If Text1 is updated,
+Text2 will be updated as well.
+
+Note that to refer to other objects, we use their \e id (more information on the id property can be
+found in a following section).
+
+\section1 Qml Comments
+
+Commenting in Qml is similar to JavaScript.
+\list
+\o Single line comments begin with // and end at the end of the line.
+\o Multiline comments begin with /* and end with *\/
+\endlist
+
+\quotefile doc/src/snippets/declarative/comments.qml
+
+Comments are ignored by the engine. The are useful for explaining what you
+are doing: for referring back to at a later date, or for others reading
+your Qml files.
+
+Comments can also be used to prevent the execution of code, which is
+sometimes useful for tracking down problems.
+
+\code
+Text {
+ text: "Hello world!"
+ //opacity: 0.5
+}
+\endcode
+
+In the above example, the Text object will have normal opacity, since the
+line opacity: 0.5 has been turned into a comment.
+
+\section1 Properties
+
+\section2 Property naming
+
+Properties begin with a lowercase letter (with the exception of Attached properties).
+
+\section2 Property types
+
+Qml supports properties of many types (\l{Common QML Types}). The basic types include int,
+real, bool, string, color, and lists.
+
+\code
+Item {
+ x: 10.5 // a 'real' property
+ ...
+ state: "Details" // a 'string' property
+ focus: true // a 'bool' property
+}
+\endcode
+
+Qml properties are what is known as \e typesafe. That is, they only allow you to assign a value that
+matches the property type. For example, the scale property of item is a real, and if you try to assign
+a string to it you will get an error.
+
+\badcode
+Item {
+ scale: "hello" //illegal!
+}
+\endcode
+
+\section3 The 'id' property
+
+The id property is a special property of type \e id. Assigning an id to an object allows you
+to refer to it elsewhere.
+
+\code
+Item {
+ Text {
+ id: MyName
+ text: "..."
+ }
+ Text {
+ text: MyName.text
+ }
+}
+\endcode
+
+ids must begin with a letter. We recommended that you start your ids with a capital letter.
+
+\section2 List properties
+
+List properties look like this:
+
+\code
+Item {
+ children: [
+ Image {},
+ Text {}
+ ]
+}
+\endcode
+
+The list is enclosed in square brackets, with a comma separating the
+list elements. In cases where you are only assigning a single item to a
+list, you can omit the square brackets:
+
+\code
+Image {
+ children: Rect {}
+}
+\endcode
+
+\section2 Default properties
+
+Each object type can specify one of it's list properties as its default property.
+If a list property has been the default property, it means the property tag can emitted:
+
+\code
+State {
+ operations: [
+ SetProperties {},
+ SetProperties {}
+ ]
+}
+\endcode
+
+can be simplified to
+
+\code
+State {
+ SetProperties {}
+ SetProperties {}
+}
+\endcode
+
+\section2 Dot properties
+
+\section2 Attached properties
+
+\section2 Signal Handlers
+
+*/
diff --git a/doc/src/declarative/qmlreference.qdoc b/doc/src/declarative/qmlreference.qdoc
index 9a63e50..cbd086c 100644
--- a/doc/src/declarative/qmlreference.qdoc
+++ b/doc/src/declarative/qmlreference.qdoc
@@ -21,6 +21,7 @@
\o \l {qmlexamples}{Examples}
\o \l {tutorial}{Tutorial: 'Hello World'}
\o \l {tutorials-declarative-contacts.html}{Tutorial: 'Introduction to QML'}
+ \o \l {Introduction to the Qml language} (in progress)
\endlist
Core Features:
diff --git a/doc/src/declarative/tutorial2.qdoc b/doc/src/declarative/tutorial2.qdoc
index 1535c42..c22a01a 100644
--- a/doc/src/declarative/tutorial2.qdoc
+++ b/doc/src/declarative/tutorial2.qdoc
@@ -13,12 +13,12 @@ Here is the QML code for \c Cell.qml:
\code
Item {
+ property var color
+
id: CellContainer
width: 40
height: 25
- properties: Property {
- name: "color"
- }
+
Rect {
anchors.fill: parent
color: CellContainer.color
@@ -77,9 +77,7 @@ Item {
The root element of our component is an \c Item. It is the most basic 'Fx' element in Qml and is often used as a container for other elements.
\code
-properties: Property {
- name: "color"
-}
+property var color
\endcode
We declare a \c color property. This property is accessible from \e outside our component, this allows us to instantiate the cells with different colors.
diff --git a/doc/src/snippets/declarative/comments.qml b/doc/src/snippets/declarative/comments.qml
new file mode 100644
index 0000000..22e0d18
--- /dev/null
+++ b/doc/src/snippets/declarative/comments.qml
@@ -0,0 +1,9 @@
+Text {
+ text: "Hello world!" //a basic greeting
+ /*
+ We want this text to stand out from the rest so
+ we give it a large size and different font.
+ */
+ font.family: "Helvetica"
+ font.size: 24
+}
diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml
index 485188a..2e214a8 100644
--- a/examples/declarative/dial/DialLibrary/Dial.qml
+++ b/examples/declarative/dial/DialLibrary/Dial.qml
@@ -1,27 +1,20 @@
Item {
property real value : 0
- width: 210
- height: 210
+ width: 210; height: 210
- Image {
- id: Background
- source: "background.svg"
- }
+ Image { id: Background; source: "background.svg" }
Item {
- x: 104
- y: 102
+ x: 104; y: 102
rotation: Needle.rotation
Image {
source: "needle_shadow.svg"
- x: -104
- y: -102
+ x: -104; y: -102
}
}
Item {
id: Needle
- x: 102
- y: 98
+ x: 102; y: 98
rotation: -130
rotation: Follow {
spring: 1.4
@@ -30,11 +23,8 @@ Item {
}
Image {
source: "needle.svg"
- x: -102
- y: -98
+ x: -102; y: -98
}
}
- Image {
- source: "overlay.svg"
- }
+ Image { source: "overlay.svg" }
}
diff --git a/examples/declarative/dial/dial.qml b/examples/declarative/dial/dial.qml
index fa11d79..5e09171 100644
--- a/examples/declarative/dial/dial.qml
+++ b/examples/declarative/dial/dial.qml
@@ -1,37 +1,23 @@
import "DialLibrary"
Rect {
color: "white"
- width: 210
- height: 240
+ width: 210; height: 240
+
// Dial with a slider to adjust it
- Dial {
- id: Dial
- value: Slider.x-2
- }
+ Dial { id: Dial; value: Slider.x-2 }
+
Rect {
anchors.top: Dial.bottom
- x: 20
- width: 160
- height: 16
- color: "steelblue"
- gradientColor: "lightsteelblue"
- radius: 8
- opacity: 0.7
+ x: 20; width: 160; height: 16
+ color: "steelblue"; gradientColor: "lightsteelblue"
+ radius: 8; opacity: 0.7
Rect {
id: Slider
- x: 2
- y: 2
- width: 30
- height: 12
- color: "lightgray"
- gradientColor: "gray"
- radius: 6
+ x: 2; y: 2; width: 30; height: 12
+ color: "lightgray"; gradientColor: "gray"; radius: 6
MouseRegion {
anchors.fill: parent
- drag.target: parent
- drag.axis: "x"
- drag.xmin: 2
- drag.xmax: 128
+ drag.target: parent; drag.axis: "x"; drag.xmin: 2; drag.xmax: 128
}
}
}
diff --git a/examples/declarative/mouseregion/mouse.qml b/examples/declarative/mouseregion/mouse.qml
index 6d10425..471874d 100644
--- a/examples/declarative/mouseregion/mouse.qml
+++ b/examples/declarative/mouseregion/mouse.qml
@@ -1,15 +1,10 @@
Rect {
color: "white"
- width: 200
- height: 200
+ width: 200; height: 200
Rect {
- width: 50
- height: 50
+ width: 50; height: 50
color: "red"
- Text {
- text: "Click"
- anchors.centeredIn: parent
- }
+ Text { text: "Click"; anchors.centeredIn: parent }
MouseRegion {
onPressed: { print('press (x: ' + mouse.x + ' y: ' + mouse.y + ' button: ' + (mouse.button == Qt.RightButton ? 'right' : 'left') + ' Shift: ' + (mouse.modifiers & Qt.ShiftModifier ? 'true' : 'false') + ')') }
onReleased: { print('release (x: ' + mouse.x + ' y: ' + mouse.y + ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')') }
@@ -22,14 +17,9 @@ Rect {
}
}
Rect {
- y: 100
- width: 50
- height: 50
+ y: 100; width: 50; height: 50
color: "blue"
- Text {
- text: "Drag"
- anchors.centeredIn: parent
- }
+ Text { text: "Drag"; anchors.centeredIn: parent }
MouseRegion {
drag.target: parent
drag.axis: "x"
diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml
index 929c72a..8020d62 100644
--- a/examples/declarative/scrollbar/ScrollBar.qml
+++ b/examples/declarative/scrollbar/ScrollBar.qml
@@ -13,8 +13,7 @@ Item {
Rect {
id: Background
radius: orientation == 'Vertical' ? (width/2) : (height/2)
- color: "white"
- opacity: 0.3
+ color: "white"; opacity: 0.3
anchors.fill: parent
}
// Size the bar to the required size, depending upon the orientation.
diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml
index 6777277..8bc88e4 100644
--- a/examples/declarative/slideswitch/Switch.qml
+++ b/examples/declarative/slideswitch/Switch.qml
@@ -1,7 +1,6 @@
Item {
id: Switch
- width: Groove.width
- height: Groove.height
+ width: Groove.width; height: Groove.height
property var on
@@ -28,64 +27,30 @@ Item {
}
}
- Image {
- id: Groove
- source: "background.svg"
- }
- MouseRegion {
- anchors.fill: Groove
- onClicked: { toggle() }
- }
- Image {
- id: Knob
- source: "knob.svg"
- x: 1
- y: 2
- }
+ Image { id: Groove; source: "background.svg" }
+ MouseRegion { anchors.fill: Groove; onClicked: { toggle() } }
+ Image { id: Knob; source: "knob.svg"; x: 1; y: 2 }
MouseRegion {
anchors.fill: Knob
onClicked: { toggle() }
onReleased: { dorelease() }
- drag.target: Knob
- drag.axis: "x"
- drag.xmin: 1
- drag.xmax: 78
+ drag.target: Knob; drag.axis: "x"; drag.xmin: 1; drag.xmax: 78
}
states: [
State {
name: "On"
- SetProperty {
- target: Knob
- property: "x"
- value: 78
- }
- SetProperty {
- target: Switch
- property: "on"
- value: true
- }
+ SetProperty { target: Knob; property: "x"; value: 78 }
+ SetProperty { target: Switch; property: "on"; value: true }
},
State {
name: "Off"
- SetProperty {
- target: Knob
- property: "x"
- value: 1
- }
- SetProperty {
- target: Switch
- property: "on"
- value: false
- }
+ SetProperty { target: Knob; property: "x"; value: 1 }
+ SetProperty { target: Switch; property: "on"; value: false }
}
]
transitions: [
Transition {
- NumericAnimation {
- properties: "x"
- easing: "easeInOutQuad"
- duration: 200
- }
+ NumericAnimation { properties: "x"; easing: "easeInOutQuad"; duration: 200 }
}
]
}
diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml
index 0c27637..bcde20c 100644
--- a/examples/declarative/states/states.qml
+++ b/examples/declarative/states/states.qml
@@ -1,79 +1,40 @@
Rect {
id: Page
- width: 300
- height: 300
- color: "white"
+ width: 300; height: 300; color: "white"
// A target region. Clicking in here sets the state to '' - the default state
Rect {
- width: 50
- height: 50
- x: 0
- y: 0
- color: "transparent"
- pen.color: "black"
- MouseRegion {
- anchors.fill: parent
- onClicked: { Page.state='' }
- }
+ x: 0; y: 0; width: 50; height: 50
+ color: "transparent"; pen.color: "black"
+ MouseRegion { anchors.fill: parent; onClicked: { Page.state='' } }
}
// Another target region. Clicking in here sets the state to 'Position1'
Rect {
- width: 50
- height: 50
- x: 150
- y: 50
- color: "transparent"
- pen.color: "black"
- MouseRegion {
- anchors.fill: parent
- onClicked: { Page.state='Position1' }
- }
+ x: 150; y: 50; width: 50; height: 50
+ color: "transparent"; pen.color: "black"
+ MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position1' } }
}
// Another target region. Clicking in here sets the state to 'Position2'
Rect {
- width: 50
- height: 50
- x: 0
- y: 200
- color: "transparent"
- pen.color: "black"
- MouseRegion {
- anchors.fill: parent
- onClicked: { Page.state='Position2' }
- }
+ x: 0; y: 200; width: 50; height: 50
+ color: "transparent"; pen.color: "black"
+ MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position2' } }
}
// Rect which will be moved when my state changes
- Rect {
- id: myrect
- width: 50
- height: 50
- color: "red"
- }
+ Rect { id: myrect; width: 50; height: 50; color: "red" }
+
states: [
// In state 'Position1', change the 'myrect' item x, y to 150, 50.
State {
name: "Position1"
- SetProperty {
- target: myrect
- property: "x"
- value: 150
- }
- SetProperty {
- target: myrect
- property: "y"
- value: 50
- }
- } // In state 'Position2', change y to 100. We do not specify 'x' here -
+ SetProperty { target: myrect; property: "x"; value: 150 }
+ SetProperty { target: myrect; property: "y"; value: 50 }
+ },
+ // In state 'Position2', change y to 100. We do not specify 'x' here -
// it will therefore be restored to its default value of 0, if it
// had been changed.
-,
State {
name: "Position2"
- SetProperty {
- target: myrect
- property: "y"
- value: 200
- }
+ SetProperty { target: myrect; property: "y"; value: 200 }
}
]
}
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
index c7fc656..4c1dceb 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -1,111 +1,60 @@
Rect {
id: Page
- width: 300
- height: 300
- color: "white"
+ width: 300; height: 300; color: "white"
// A target region. Clicking in here sets the state to '' - the default state
Rect {
- width: 50
- height: 50
- x: 0
- y: 0
- color: "transparent"
- pen.color: "black"
- MouseRegion {
- anchors.fill: parent
- onClicked: { Page.state='' }
- }
+ x: 0; y: 0; width: 50; height: 50
+ color: "transparent"; pen.color: "black"
+ MouseRegion { anchors.fill: parent; onClicked: { Page.state='' } }
}
// Another target region. Clicking in here sets the state to 'Position1'
Rect {
- width: 50
- height: 50
- x: 150
- y: 50
- color: "transparent"
- pen.color: "black"
- MouseRegion {
- anchors.fill: parent
- onClicked: { Page.state='Position1' }
- }
+ x: 150; y: 50; width: 50; height: 50
+ color: "transparent"; pen.color: "black"
+ MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position1' } }
}
// Another target region. Clicking in here sets the state to 'Position2'
Rect {
- width: 50
- height: 50
- x: 0
- y: 200
- color: "transparent"
- pen.color: "black"
- MouseRegion {
- anchors.fill: parent
- onClicked: { Page.state='Position2' }
- }
+ x: 0; y: 200; width: 50; height: 50
+ color: "transparent"; pen.color: "black"
+ MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position2' } }
}
// Rect which will be moved when my state changes
- Rect {
- id: myrect
- width: 50
- height: 50
- color: "red"
- }
+ Rect { id: myrect; width: 50; height: 50; color: "red" }
+
states: [
// In state 'Position1', change the 'myrect' item x, y to 150, 50.
State {
name: "Position1"
- SetProperty {
- target: myrect
- property: "x"
- value: 150
- }
- SetProperty {
- target: myrect
- property: "y"
- value: 50
- }
- } // In state 'Position2', change y to 100. We do not specify 'x' here -
+ SetProperty { target: myrect; property: "x"; value: 150 }
+ SetProperty { target: myrect; property: "y"; value: 50 }
+ },
+ // In state 'Position2', change y to 100. We do not specify 'x' here -
// it will therefore be restored to its default value of 0, if it
// had been changed.
-,
State {
name: "Position2"
- SetProperty {
- target: myrect
- property: "y"
- value: 200
- }
+ SetProperty { target: myrect; property: "y"; value: 200 }
}
]
+
// transitions define how the properties change.
transitions: [
// When transitioning to 'Position1' move x,y over a duration of 1 second,
// with easeOutBounce easing function.
Transition {
- fromState: "*"
- toState: "Position1"
- NumericAnimation {
- properties: "x,y"
- easing: "easeOutBounce"
- duration: 1000
- }
- } // When transitioning to 'Position2' move x,y over a duration of 2 seconds,
+ fromState: "*"; toState: "Position1"
+ NumericAnimation { properties: "x,y"; easing: "easeOutBounce"; duration: 1000 }
+ },
+ // When transitioning to 'Position2' move x,y over a duration of 2 seconds,
// with easeInOutQuad easing function.
-,
Transition {
- fromState: "*"
- toState: "Position2"
- NumericAnimation {
- properties: "x,y"
- easing: "easeInOutQuad"
- duration: 2000
- }
- } // For any other state changes move x,y linearly over duration of 200ms.
-,
+ fromState: "*"; toState: "Position2"
+ NumericAnimation { properties: "x,y"; easing: "easeInOutQuad"; duration: 2000 }
+ },
+ // For any other state changes move x,y linearly over duration of 200ms.
Transition {
- NumericAnimation {
- properties: "x,y"
- duration: 200
- }
+ NumericAnimation { properties: "x,y"; duration: 200 }
}
]
}
diff --git a/src/declarative/fx/qfxflickable.cpp b/src/declarative/fx/qfxflickable.cpp
index 4ace811..4248ebb 100644
--- a/src/declarative/fx/qfxflickable.cpp
+++ b/src/declarative/fx/qfxflickable.cpp
@@ -916,6 +916,14 @@ void QFxFlickable::setViewportWidth(int w)
d->_flick->setWidth(width());
else
d->_flick->setWidth(w);
+ // Make sure that we're entirely in view.
+ if (d->_moveX.value() > minXExtent() || maxXExtent() > 0) {
+ d->_tl.clear();
+ d->_moveX.setValue(minXExtent());
+ } else if (d->_moveX.value() < maxXExtent()) {
+ d->_tl.clear();
+ d->_moveX.setValue(maxXExtent());
+ }
emit viewportWidthChanged();
d->updateBeginningEnd();
}
@@ -960,6 +968,14 @@ void QFxFlickable::setViewportHeight(int h)
d->_flick->setHeight(height());
else
d->_flick->setHeight(h);
+ // Make sure that we're entirely in view.
+ if (d->_moveY.value() > minYExtent() || maxYExtent() > 0) {
+ d->_tl.clear();
+ d->_moveY.setValue(minYExtent());
+ } else if (d->_moveY.value() < maxYExtent()) {
+ d->_tl.clear();
+ d->_moveY.setValue(maxYExtent());
+ }
emit viewportHeightChanged();
d->updateBeginningEnd();
}
generated by cgit v0.12 at 2025-09-13 11:49:29 (GMT)