QML gridview mousearea example: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(Convert ExpressionEngine links)
No edit summary
 
Line 8: Line 8:


<code>
<code>
import Qt 4.7
import Qt 4.7


Item {
Item {
width: 400
width: 400
height: 400
height: 400


// handle clicks on empty area
// handle clicks on empty area
MouseArea {
MouseArea {
anchors.fill: parent
anchors.fill: parent
onClicked: grid.currentIndex = –1
onClicked: grid.currentIndex = -1
}
}


// a dummy model
// a dummy model
ListModel {
ListModel {
id: itemModel
id: itemModel
ListElement {
ListElement {
name: "red"
name: "red"
}
}
ListElement {
ListElement {
name: "blue"
name: "blue"
}
}
ListElement {
ListElement {
name: "green"
name: "green"
}
}
ListElement {
ListElement {
name: "tomato"
name: "tomato"
}
}
}
}


// our delegate
// our delegate
Component {
Component {
id: rectDelegate
id: rectDelegate
Rectangle {
Rectangle {
id: rect
id: rect


width: 50
width: 50
height: 50
height: 50
color: name
color: name


MouseArea {
MouseArea {
anchors.fill: parent
anchors.fill: parent
onClicked: grid.currentIndex = index
onClicked: grid.currentIndex = index
}
}
states: [
states: [
State {
State {
name: "none"
name: "none"
when: (grid.currentIndex == –1)
when: (grid.currentIndex == -1)
},
},
State {
State {
name: "selected"
name: "selected"
when: rect.GridView.isCurrentItem
when: rect.GridView.isCurrentItem
PropertyChanges {
PropertyChanges {
target: rect;
target: rect;
width: 100;
width: 100;
height: 100
height: 100
}
}
}
}
]
]
transitions: Transition {
transitions: Transition {
PropertyAnimation {
PropertyAnimation {
target: rect
target: rect
properties: "width, height"
properties: "width, height"
}
}
}
}
}
}
}
}


GridView {
GridView {
id: grid
id: grid
x: 50
x: 50
y: 50
y: 50
width: 200
width: 200
height: 200
height: 200
model: itemModel
model: itemModel
delegate: rectDelegate
delegate: rectDelegate


// handle clicks on empty area within the grid.
// handle clicks on empty area within the grid.
// this adds an element below the grid items but on the grid's flickable surface
// 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)
// (so it won't have mouse events stolen by the grid)
flickableChildren: MouseArea {
flickableChildren: MouseArea {
anchors.fill: parent
anchors.fill: parent
onClicked: grid.currentIndex = –1
onClicked: grid.currentIndex = -1
}
}


// sets the initial index to –1, so no item is selected
// sets the initial index to –1, so no item is selected
// currentIndex: –1 // not enough, need to check later
// currentIndex: –1 // not enough, need to check later
Component.onCompleted: currentIndex = –1
Component.onCompleted: currentIndex = -1
}
}
}
}
</code>
Preview:
[[File:QML gridview mousearea example.png|thumbnail|Preview: QML_gridview_mousearea_example.png]]

Latest revision as of 13:26, 30 December 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.

Part of http://developer.qt.nokia.com/forums/viewthread/790/

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
	}
}

Preview:

Preview: QML_gridview_mousearea_example.png