Difference between revisions of "ListView Item Manual Positioning Animations QML/bg"

From Qt Wiki
Jump to: navigation, search
 
(Sub-categorize)
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
'''Български''' | [[ListView Item Manual Positioning Animations QML|English]]
+
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 +
{{LangSwitch}}
 +
[[Category:Snippets::QML]]
 +
[[Category:HowTo]]
 +
[[Category:Developing with Qt::Qt Quick::QML]]
  
−
=Ръчно позициониране на елементите в ListView=
+
= Ръчно позициониране на елементите в ListView =
  
−
==Въведение==
+
== Въведение ==
  
−
Така, нека да кажем, че вместо обикновено ''ListView'' с елементи, наредени хоризонтално и линейно, вие искате лист, който да реагира, когато някой елемент е натиснат. Елементът трябва да се придвижва към друга позиция ( по-долна позиция по y). Когато друг елемент е избран, те трябва да си разменят местата. Това беше полезно в случая за <span class="caps">KDM</span>, където елементите бяха снимки на потребителите.
+
Така, нека да кажем, че вместо обикновено ''ListView'' с елементи, наредени хоризонтално и линейно, вие искате лист, който да реагира, когато някой елемент е натиснат. Елементът трябва да се придвижва към друга позиция ( по-долна позиция по y). Когато друг елемент е избран, те трябва да си разменят местата. Това беше полезно в случая за KDM, където елементите бяха снимки на потребителите.
  
−
==Реализация==
+
== Реализация ==
  
 
Създаваме ''ListView'', като за модел слагаме един масив, колкото да задели място за 7 елемента. Делегата се състой от ''Rectangle'' и ''Text'' като ръчно задаваме позицията му.
 
Създаваме ''ListView'', като за модел слагаме един масив, колкото да задели място за 7 елемента. Делегата се състой от ''Rectangle'' и ''Text'' като ръчно задаваме позицията му.
  
−
==Кода==
+
== Кода ==
  
−
==Резултати==
+
<code>
 +
import QtQuick 1.0
  
−
<nowiki>!</nowiki>https://lh4.googleusercontent.com/-DOTQe7zsIBg/Tj3MjY6plMI/AAAAAAAAAUw/3uAoYO33h3E/s800/qml list animation example.png!
+
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;
 +
}
  
−
Изглежда, че има бъг в ''ListView'', който променя позициите на елементите по X, когато данните в модела се променят.
 
  
−
===Categories:===
+
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;
 +
}
 +
}
 +
}
 +
}
 +
}
 +
</code>
 +
 
 +
== Резултати ==
 +
 
 +
[[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]]
 

Latest revision as of 12:59, 28 November 2016

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, когато данните в модела се променят.

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