ListView Item Manual Positioning Animations QML/bg: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
'''Български''' | [[ListView Item Manual Positioning Animations QML|English]]
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]


=Ръчно позициониране на елементите в ListView=
[toc align_right=&quot;yes&amp;quot; depth=&quot;4&amp;quot;]


==Въведение==
'''Български''' | [[ListView_Item_Manual_Positioning_Animations_QML|English]]


Така, нека да кажем, че вместо обикновено ''ListView'' с елементи, наредени хоризонтално и линейно, вие искате лист, който да реагира, когато някой елемент е натиснат. Елементът трябва да се придвижва към друга позиция ( по-долна позиция по y). Когато друг елемент е избран, те трябва да си разменят местата. Това беше полезно в случая за <span class="caps">KDM</span>, където елементите бяха снимки на потребителите.
= Ръчно позициониране на елементите в ListView =


==Реализация==
== Въведение ==
 
Така, нека да кажем, че вместо обикновено ''ListView'' с елементи, наредени хоризонтално и линейно, вие искате лист, който да реагира, когато някой елемент е натиснат. Елементът трябва да се придвижва към друга позиция ( по-долна позиция по y). Когато друг елемент е избран, те трябва да си разменят местата. Това беше полезно в случая за KDM, където елементите бяха снимки на потребителите.
 
== Реализация ==


Създаваме ''ListView'', като за модел слагаме един масив, колкото да задели място за 7 елемента. Делегата се състой от ''Rectangle'' и ''Text'' като ръчно задаваме позицията му.
Създаваме ''ListView'', като за модел слагаме един масив, колкото да задели място за 7 елемента. Делегата се състой от ''Rectangle'' и ''Text'' като ръчно задаваме позицията му.


==Кода==
== Кода ==
 
<code><br />import QtQuick 1.0


==Резултати==
Item {<br /> width: 600<br /> height: 600<br /> property int itemWidth: 50


<nowiki>!</nowiki>https://lh4.googleusercontent.com/-DOTQe7zsIBg/Tj3MjY6plMI/AAAAAAAAAUw/3uAoYO33h3E/s800/qml list animation example.png!
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: &quot;red&amp;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 &lt; 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 } }


Изглежда, че има бъг в ''ListView'', който променя позициите на елементите по X, когато данните в модела се променят.
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>
 
== Резултати ==


===Categories:===
[[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]]


* [[:Category:Developing with Qt|Developing_with_Qt]]
== Възможни проблеми ==
** [[:Category:Developing with Qt::Qt Quick|Qt_Quick]]
* [[:Category:Developing with Qt::Qt Quick::QML|QML]]


* [[:Category:HowTo|HowTo]]
Изглежда, че има бъг в ''ListView'', който променя позициите на елементите по X, когато данните в модела се променят.
* [[:Category:snippets|snippets]]

Revision as of 06:22, 24 February 2015




[toc align_right="yes&quot; depth="4&quot;]

Български | English

Ръчно позициониране на елементите в ListView

Въведение

Така, нека да кажем, че вместо обикновено ListView с елементи, наредени хоризонтално и линейно, вие искате лист, който да реагира, когато някой елемент е натиснат. Елементът трябва да се придвижва към друга позиция ( по-долна позиция по y). Когато друг елемент е избран, те трябва да си разменят местата. Това беше полезно в случая за KDM, където елементите бяха снимки на потребителите.

Реализация

Създаваме ListView, като за модел слагаме един масив, колкото да задели място за 7 елемента. Делегата се състой от Rectangle и Text като ръчно задаваме позицията му.

Кода

<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: &quot;red&amp;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 &lt; 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 />

Резултати

https://lh4.googleusercontent.com/-DOTQe7zsIBg/Tj3MjY6plMI/AAAAAAAAAUw/3uAoYO33h3E/s800/qml list animation example.png

Възможни проблеми

Изглежда, че има бъг в ListView, който променя позициите на елементите по X, когато данните в модела се променят.

Retrieved from "https://wiki.qt.io/index.php?title=ListView_Item_Manual_Positioning_Animations_QML/bg&oldid=3114"