ListView Item Manual Positioning Animations QML: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]] | |||
= | [toc align_right="yes&quot; depth="4&quot;] | ||
'''English''' | [[ListView_Item_Manual_Positioning_Animations_QML_Bulgarian|Български]] | |||
= Manual ListView Item Positioning = | |||
==Implementation== | == Introduction == | ||
Let's say for instance instead of wanting a plain ListView with its items laid out horizontally and linearly, you instead want a list to respond so that when one item is selected, that item animates towards a different position (lower y value). This item is singled out and when a different item is selected, they swap places. This was useful for my case of KDE's login manager theme, where the items were user face images. | |||
== Implementation == | |||
Here we create a ListView, a simple array just as filler for what your model will actually be, a delegate with an image and text item, and then we manually set the y and x position of them. | Here we create a ListView, a simple array just as filler for what your model will actually be, a delegate with an image and text item, and then we manually set the y and x position of them. | ||
==< | == QML Code == | ||
<code><br />import QtQuick 1.0 | |||
Item {<br /> width: 600<br /> height: 600<br /> property int itemWidth: 50 | |||
= | ListView {<br /> id: view<br /> model: new Array(1,2,3,4,5,6,7,8)<br /> delegate: item<br /> anchors {<br /> top: parent.top;<br /> topMargin: 10;<br /> horizontalCenter:<br /> parent.horizontalCenter;<br /> bottom:<br /> parent.bottom;<br /> }<br /> width: model.length * itemWidth + (model.length - 1) * spacing<br /> spacing: 2<br /> orientation: Qt.Horizontal<br /> snapMode: ListView.SnapOneItem<br /> highlightRangeMode: ListView.ApplyRange<br /> interactive: false<br /> Component.onCompleted: currentIndex = <s>1;<br /> } | ||
< | <br /> Component {<br /> id: item | ||
<br /> Rectangle {<br /> width: itemWidth<br /> height: 50<br /> color: "red&quot;<br /> x: {<br /> if (ListView.isCurrentItem) {<br /> if (view.flickingHorizontally) {<br /> (view.width/2)</s> (width/2)<br /> } else {<br /> (view.width/2)-(width/2)<br /> }<br /> } else {<br /> if ( view.currentIndex==<s>1) {<br /> index * (width + view.spacing)<br /> } else {<br /> if ( index < view.currentIndex) {<br /> index * (width + view.spacing) + (width/2)<br /> } else {<br /> index * (width + view.spacing)</s> (width/2)<br /> }<br /> }<br /> }<br /> }<br /> y: ListView.isCurrentItem ? 200 : 0<br /> Behavior on x { SpringAnimation { spring: 4; damping: 0.4 } }<br /> Behavior on y { SpringAnimation { spring: 4; damping: 0.4 } } | |||
Text {<br /> text: model.index<br /> } | |||
MouseArea {<br /> anchors.fill: parent<br /> onClicked: {<br /> if (!ListView.isCurrentItem)<br /> view.currentIndex = index;<br /> else<br /> view.currentIndex = –1;<br /> }<br /> }<br /> }<br /> }<br />}<br /></code> | |||
== | == Results == | ||
[[Image:https://lh4.googleusercontent.com/-DOTQe7zsIBg/Tj3MjY6plMI/AAAAAAAAAUw/3uAoYO33h3E/s800/qml list animation example.png|https://lh4.googleusercontent.com/-DOTQe7zsIBg/Tj3MjY6plMI/AAAAAAAAAUw/3uAoYO33h3E/s800/qml list animation example.png]] | |||
== Possible Issues == | |||
Revision as of 10:07, 24 February 2015
[toc align_right="yes" depth="4"]
English | Български
Manual ListView Item Positioning
Introduction
Let's say for instance instead of wanting a plain ListView with its items laid out horizontally and linearly, you instead want a list to respond so that when one item is selected, that item animates towards a different position (lower y value). This item is singled out and when a different item is selected, they swap places. This was useful for my case of KDE's login manager theme, where the items were user face images.
Implementation
Here we create a ListView, a simple array just as filler for what your model will actually be, a delegate with an image and text item, and then we manually set the y and x position of them.
QML Code
<br />import QtQuick 1.0
Item {<br /> width: 600<br /> height: 600<br /> property int itemWidth: 50
ListView {<br /> id: view<br /> model: new Array(1,2,3,4,5,6,7,8)<br /> delegate: item<br /> anchors {<br /> top: parent.top;<br /> topMargin: 10;<br /> horizontalCenter:<br /> parent.horizontalCenter;<br /> bottom:<br /> parent.bottom;<br /> }<br /> width: model.length * itemWidth + (model.length - 1) * spacing<br /> spacing: 2<br /> orientation: Qt.Horizontal<br /> snapMode: ListView.SnapOneItem<br /> highlightRangeMode: ListView.ApplyRange<br /> interactive: false<br /> Component.onCompleted: currentIndex = <s>1;<br /> }
<br /> Component {<br /> id: item
<br /> Rectangle {<br /> width: itemWidth<br /> height: 50<br /> color: "red&quot;<br /> x: {<br /> if (ListView.isCurrentItem) {<br /> if (view.flickingHorizontally) {<br /> (view.width/2)</s> (width/2)<br /> } else {<br /> (view.width/2)-(width/2)<br /> }<br /> } else {<br /> if ( view.currentIndex==<s>1) {<br /> index * (width + view.spacing)<br /> } else {<br /> if ( index < view.currentIndex) {<br /> index * (width + view.spacing) + (width/2)<br /> } else {<br /> index * (width + view.spacing)</s> (width/2)<br /> }<br /> }<br /> }<br /> }<br /> y: ListView.isCurrentItem ? 200 : 0<br /> Behavior on x { SpringAnimation { spring: 4; damping: 0.4 } }<br /> Behavior on y { SpringAnimation { spring: 4; damping: 0.4 } }
Text {<br /> text: model.index<br /> }
MouseArea {<br /> anchors.fill: parent<br /> onClicked: {<br /> if (!ListView.isCurrentItem)<br /> view.currentIndex = index;<br /> else<br /> view.currentIndex = –1;<br /> }<br /> }<br /> }<br /> }<br />}<br />
