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
|
import QtQuick 1.0
Rectangle {
id: root
width: 200
height: 200
color: "black"
VisualDataModel {
id: model
model: ListModel {
ListElement { itemColor: "red" }
ListElement { itemColor: "green" }
ListElement { itemColor: "blue" }
ListElement { itemColor: "orange" }
ListElement { itemColor: "purple" }
ListElement { itemColor: "yellow" }
ListElement { itemColor: "slategrey" }
ListElement { itemColor: "cyan" }
}
delegate: Package {
Rectangle {
id: listItem; Package.name: "list"; width:root.width/2; height: 25; color: "transparent"; border.color: "white"
MouseArea {
anchors.fill: parent
onClicked: myState.state = myState.state == "list" ? "grid" : "list"
}
}
Rectangle {
id: gridItem; Package.name: "grid"; width:50; height: 50; color: "transparent"; border.color: "white"
MouseArea {
anchors.fill: parent
onClicked: myState.state = myState.state == "list" ? "grid" : "list"
}
}
Rectangle { id: myContent; width:50; height: 50; color: itemColor }
StateGroup {
id: myState
state: "list"
states: [
State {
name: "list"
ParentChange { target: myContent; parent: listItem }
PropertyChanges { target: myContent; x: 0; y: 0; width: listItem.width; height: listItem.height }
},
State {
name: "grid"
ParentChange { target: myContent; parent: gridItem }
PropertyChanges { target: myContent; x: 0; y: 0; width: gridItem.width; height: gridItem.height }
}
]
transitions: [
Transition {
from: "*"; to: "*"
SequentialAnimation {
ParentAnimation{
NumberAnimation { properties: "x,y,width,height"; easing.type: "InOutQuad" }
}
}
}
]
}
}
}
ListView {
width: parent.width/2
height: parent.height
model: model.parts.list
}
GridView {
x: parent.width/2
width: parent.width/2
cellWidth: 50
cellHeight: 50
height: parent.height
model: model.parts.grid
}
}
|
