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

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(Sub-categorize)
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 
{{LangSwitch}}
[toc align_right=&quot;yes&amp;quot; depth=&quot;4&amp;quot;]
[[Category:Snippets::QML]]
 
[[Category:HowTo]]
'''Български''' | [[ListView_Item_Manual_Positioning_Animations_QML|English]]
[[Category:Developing with Qt::Qt Quick::QML]]


= Ръчно позициониране на елементите в ListView =
= Ръчно позициониране на елементите в ListView =
Line 17: Line 17:
== Кода ==
== Кода ==


<code><br />import QtQuick 1.0
<code>
import QtQuick 1.0
 
Item {
width: 600
height: 600
property int itemWidth: 50
 
ListView {
id: view
model: new Array(1,2,3,4,5,6,7,8)
delegate: item
anchors {
top: parent.top;
topMargin: 10;
horizontalCenter:
parent.horizontalCenter;
bottom:
parent.bottom;
}
width: model.length * itemWidth + (model.length - 1) * spacing
spacing: 2
orientation: Qt.Horizontal
snapMode: ListView.SnapOneItem
highlightRangeMode: ListView.ApplyRange
interactive: false
Component.onCompleted: currentIndex = -1;
}


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 /> }
Component {
id: item


<br /> Component {<br /> id: item
Rectangle {
<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 } }
width: itemWidth
height: 50
color: "red"
x: {
if (ListView.isCurrentItem) {
if (view.flickingHorizontally) {
(view.width/2)- (width/2)
} else {
(view.width/2)-(width/2)
}
} else {
if ( view.currentIndex==-1) {
index * (width + view.spacing)
} else {
if ( index < view.currentIndex) {
index * (width + view.spacing) + (width/2)
} else {
index * (width + view.spacing)- (width/2)
}
}
}
}
y: ListView.isCurrentItem ? 200 : 0
Behavior on x { SpringAnimation { spring: 4; damping: 0.4 } }
Behavior on y { SpringAnimation { spring: 4; damping: 0.4 } }


Text {<br /> text: model.index<br /> }
Text {
text: model.index
}


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>
MouseArea {
anchors.fill: parent
onClicked: {
if (!ListView.isCurrentItem)
view.currentIndex = index;
else
view.currentIndex = –1;
}
}
}
}
}
</code>


== Резултати ==
== Резултати ==

Latest revision as of 12:59, 28 November 2016

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

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

Въведение

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

Реализация

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

Кода

import QtQuick 1.0

Item {
 width: 600
 height: 600
 property int itemWidth: 50

ListView {
 id: view
 model: new Array(1,2,3,4,5,6,7,8)
 delegate: item
 anchors {
 top: parent.top;
 topMargin: 10;
 horizontalCenter:
 parent.horizontalCenter;
 bottom:
 parent.bottom;
 }
 width: model.length * itemWidth + (model.length - 1) * spacing
 spacing: 2
 orientation: Qt.Horizontal
 snapMode: ListView.SnapOneItem
 highlightRangeMode: ListView.ApplyRange
 interactive: false
 Component.onCompleted: currentIndex = -1;
 }


 Component {
 id: item

 Rectangle {
 width: itemWidth
 height: 50
 color: "red"
 x: {
 if (ListView.isCurrentItem) {
 if (view.flickingHorizontally) {
 (view.width/2)- (width/2)
 } else {
 (view.width/2)-(width/2)
 }
 } else {
 if ( view.currentIndex==-1) {
 index * (width + view.spacing)
 } else {
 if ( index < view.currentIndex) {
 index * (width + view.spacing) + (width/2)
 } else {
 index * (width + view.spacing)- (width/2)
 }
 }
 }
 }
 y: ListView.isCurrentItem ? 200 : 0
 Behavior on x { SpringAnimation { spring: 4; damping: 0.4 } }
 Behavior on y { SpringAnimation { spring: 4; damping: 0.4 } }

Text {
 text: model.index
 }

MouseArea {
 anchors.fill: parent
 onClicked: {
 if (!ListView.isCurrentItem)
 view.currentIndex = index;
 else
 view.currentIndex = 1;
 }
 }
 }
 }
}

Резултати

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

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

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