diff options
author | Ulf Hermann <ulf.hermann@qt.io> | 2020-02-04 14:23:16 +0100 |
---|---|---|
committer | Ulf Hermann <ulf.hermann@qt.io> | 2020-02-06 12:10:57 +0100 |
commit | 461ecc535ad203f7c11b1898a16053aebf50cfc1 (patch) | |
tree | 7024a5263fc8511fa3f849b56d9f00009b70e2be | |
parent | 3c2439593460d665dcf64622afae4eb91993eb10 (diff) |
Use inline components for sharing example
Change-Id: I9390982bfefa35e6db6c8516c62ba091c231be8a
Reviewed-by: Fabian Kosmale <fabian.kosmale@qt.io>
-rw-r--r-- | examples/quick/particles/imageparticle/content/sharing.qml | 82 |
1 files changed, 38 insertions, 44 deletions
diff --git a/examples/quick/particles/imageparticle/content/sharing.qml b/examples/quick/particles/imageparticle/content/sharing.qml index 1018a8e8ba..a24d9fd7c7 100644 --- a/examples/quick/particles/imageparticle/content/sharing.qml +++ b/examples/quick/particles/imageparticle/content/sharing.qml @@ -65,53 +65,47 @@ Rectangle { // Define a delegate component. A component will be // instantiated for each visible item in the list. - Component { - id: petDelegate - Item { - id: wrapper - width: 200; height: delegateHeight - z: 10 - Column { - Text {color: "white"; text: name; font.pixelSize: 18 } - Text {color: "white"; text: 'Type: ' + type; font.pixelSize: 14 } - Text {color: "white"; text: 'Age: ' + age; font.pixelSize: 14 } - } - MouseArea { anchors.fill: parent; onClicked: listView.currentIndex = index; } - // indent the item if it is the current item - states: State { - name: "Current" - when: wrapper.ListView.isCurrentItem - PropertyChanges { target: wrapper; x: 20 } - } - transitions: Transition { - NumberAnimation { properties: "x"; duration: 200 } - } + component PetDelegate: Item { + id: wrapper + width: 200; height: delegateHeight + z: 10 + Column { + Text {color: "white"; text: name; font.pixelSize: 18 } + Text {color: "white"; text: 'Type: ' + type; font.pixelSize: 14 } + Text {color: "white"; text: 'Age: ' + age; font.pixelSize: 14 } + } + MouseArea { anchors.fill: parent; onClicked: listView.currentIndex = index; } + // indent the item if it is the current item + states: State { + name: "Current" + when: wrapper.ListView.isCurrentItem + PropertyChanges { target: wrapper; x: 20 } + } + transitions: Transition { + NumberAnimation { properties: "x"; duration: 200 } } } // Define a highlight with customized movement between items. - Component { - id: highlightBar - Rectangle { - z: 0 - width: 200; height: delegateHeight - gradient: Gradient { - GradientStop { position: 0.0; color: "#99FF99" } - GradientStop { position: 1.0; color: "#88FF88" } - } - y: listView.currentItem.y; - Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } } - //! [1] - ImageParticle { - anchors.fill: parent - system: particles - source: "../../images/flower.png" - color: "red" - clip: true - alpha: 1.0 - } - //! [1] + component HighlightBar : Rectangle { + z: 0 + width: 200; height: delegateHeight + gradient: Gradient { + GradientStop { position: 0.0; color: "#99FF99" } + GradientStop { position: 1.0; color: "#88FF88" } + } + y: listView.currentItem.y; + Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } } + //! [1] + ImageParticle { + anchors.fill: parent + system: particles + source: "../../images/flower.png" + color: "red" + clip: true + alpha: 1.0 } + //! [1] } ListView { @@ -119,12 +113,12 @@ Rectangle { width: 200; height: parent.height model: petsModel - delegate: petDelegate + delegate: PetDelegate {} focus: true // Set the highlight delegate. Note we must also set highlightFollowsCurrentItem // to false so the highlight delegate can control how the highlight is moved. - highlight: highlightBar + highlight: HighlightBar {} highlightFollowsCurrentItem: false ParticleSystem { id: particles } |