1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
import QtQuick 2.0
import QtQuick.Particles 2.0
Item {
id: root
width: 450; height: 600
Component {
id: viewDelegate
Rectangle {
id: item
signal boom
Connections {
target: item
onBoom: emitter.burst(1000)
}
width: 225; height: 40
border.width: ListView.isCurrentItem ? 3 : 1
z: ListView.isCurrentItem ? 100 : 1
color: original ? "lightsteelblue" : "yellow"
objectName: name
Text { x: 10; text: name; font.pixelSize: 20 }
MouseArea { anchors.fill: parent; onClicked: listview.currentIndex = index }
Emitter {
id: emitter
system: ps
anchors.fill: parent
enabled: false
velocity: AngleDirection {
angle: 0
angleVariation: 360
magnitude: 50
magnitudeVariation: 50
}
lifeSpan: 2000
}
SequentialAnimation {
id: removeAnimation
PropertyAction { target: item; property: "ListView.delayRemove"; value: true }
PropertyAction { target: item; property: "opacity"; value: 0 }
ScriptAction { script: item.boom() }
PauseAnimation { duration: 1000 }
PropertyAction { target: item; property: "ListView.delayRemove"; value: false }
}
ListView.onRemove: removeAnimation.start()
}
}
ListView {
id: listview
width: 225; height: 500
anchors.centerIn: parent
delegate: viewDelegate
header: Rectangle {
height: 50; width: 225
color: "blue"
Text { anchors.centerIn: parent; text: "Transitions!"; color: "goldenrod" }
}
model: ListModel {
id: a_model
ListElement { name: "Item A"; original: true }
ListElement { name: "Item B"; original: true }
ListElement { name: "Item C"; original: true }
ListElement { name: "Item D"; original: true }
ListElement { name: "Item E"; original: true }
ListElement { name: "Item F"; original: true }
}
Rectangle {
anchors.fill: parent
color: "transparent"
border.color: "black"
}
}
ParticleSystem {
id: ps
ImageParticle {
id: imageparticle
source: "star.png"
color: "blue"
}
}
Column {
spacing: 2
Rectangle {
gradient: Gradient {
GradientStop { position: 0.0; color: "darkgray" }
GradientStop { position: 0.5; color: "lightgray" }
GradientStop { position: 1.0; color: "darkgray" }
}
radius: 6
border.color: "black"
height: 50; width: 80
Text { anchors.centerIn: parent; text: "+"; font.pixelSize: 25; font.bold: true }
MouseArea { anchors.fill: parent; onClicked: listview.model.insert(listview.currentIndex+1, {"name": "New item", "original": false } ) }
}
Rectangle {
gradient: Gradient {
GradientStop { position: 0.0; color: "darkgray" }
GradientStop { position: 0.5; color: "lightgray" }
GradientStop { position: 1.0; color: "darkgray" }
}
radius: 6
border.color: "black"
height: 50; width: 80
Text { anchors.centerIn: parent; text: "-"; font.pixelSize: 25; font.bold: true }
MouseArea { anchors.fill: parent; onClicked: listview.model.remove(listview.currentIndex) }
}
}
}
|
