QML gridview mousearea example: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
[[Category:Developing_with_Qt::Qt Quick::Tutorial]] | |||
[[Category:Learning::Demos_and_Examples]] | |||
Part of "http://developer.qt.nokia.com/forums/viewthread/790/":http://developer.qt.nokia.com/forums/viewthread/790/ | |||
<code> | |||
import Qt 4.7 | |||
Item {<br /> width: 400<br /> height: 400 | |||
// handle clicks on empty area<br /> MouseArea {<br /> anchors.fill: parent<br /> onClicked: grid.currentIndex = –1<br /> } | |||
// a dummy model<br /> ListModel {<br /> id: itemModel<br /> ListElement {<br /> name: "red&quot;<br /> }<br /> ListElement {<br /> name: "blue&quot;<br /> }<br /> ListElement {<br /> name: "green&quot;<br /> }<br /> ListElement {<br /> name: "tomato&quot;<br /> }<br /> } | |||
// our delegate<br /> Component {<br /> id: rectDelegate<br /> Rectangle {<br /> id: rect | |||
width: 50<br /> height: 50<br /> color: name | |||
MouseArea {<br /> anchors.fill: parent<br /> onClicked: grid.currentIndex = index<br /> }<br /> states: [<br /> State {<br /> name: "none&quot;<br /> when: (grid.currentIndex == –1)<br /> },<br /> State {<br /> name: "selected&quot;<br /> when: rect.GridView.isCurrentItem<br /> PropertyChanges {<br /> target: rect;<br /> width: 100;<br /> height: 100<br /> }<br /> }<br /> ]<br /> transitions: Transition {<br /> PropertyAnimation {<br /> target: rect<br /> properties: "width, height&quot;<br /> }<br /> }<br /> }<br /> } | |||
GridView {<br /> id: grid<br /> x: 50<br /> y: 50<br /> width: 200<br /> height: 200<br /> model: itemModel<br /> delegate: rectDelegate | |||
// handle clicks on empty area within the grid.<br /> // this adds an element below the grid items but on the grid's flickable surface<br /> // (so it won't have mouse events stolen by the grid)<br /> flickableChildren: MouseArea {<br /> anchors.fill: parent<br /> onClicked: grid.currentIndex = –1<br /> } | |||
// sets the initial index to –1, so no item is selected<br /> // currentIndex: –1 // not enough, need to check later<br /> Component.onCompleted: currentIndex = –1<br /> }<br />} | |||
Revision as of 09:46, 24 February 2015
import Qt 4.7
Item {
width: 400
height: 400
// handle clicks on empty area
MouseArea {
anchors.fill: parent
onClicked: grid.currentIndex = –1
}
// a dummy model
ListModel {
id: itemModel
ListElement {
name: "red"
}
ListElement {
name: "blue"
}
ListElement {
name: "green"
}
ListElement {
name: "tomato"
}
}
// our delegate
Component {
id: rectDelegate
Rectangle {
id: rect
width: 50
height: 50
color: name
MouseArea {
anchors.fill: parent
onClicked: grid.currentIndex = index
}
states: [
State {
name: "none"
when: (grid.currentIndex == –1)
},
State {
name: "selected"
when: rect.GridView.isCurrentItem
PropertyChanges {
target: rect;
width: 100;
height: 100
}
}
]
transitions: Transition {
PropertyAnimation {
target: rect
properties: "width, height"
}
}
}
}
GridView {
id: grid
x: 50
y: 50
width: 200
height: 200
model: itemModel
delegate: rectDelegate
// handle clicks on empty area within the grid.
// this adds an element below the grid items but on the grid's flickable surface
// (so it won't have mouse events stolen by the grid)
flickableChildren: MouseArea {
anchors.fill: parent
onClicked: grid.currentIndex = –1
}
// sets the initial index to –1, so no item is selected
// currentIndex: –1 // not enough, need to check later
Component.onCompleted: currentIndex = –1
}
}