This is a collection of small QML examples relating to drag and drop functionality.
- Tiles adds drag and drog to simple rectangles, which you can drag into a specific grid.
+ \section2 Tiles adds drag and drop to simple rectangles, which you can drag into a specific grid.
- GridView adds drag and drog to a GridView, allowing you to reorder the list.
+ It has a DragTile component which uses a MouseArea to move an item when dragged:
+
+ \snippet examples/quick/draganddrop/tiles/DragTile.qml 0
+ \snippet examples/quick/draganddrop/tiles/DragTile.qml 1
+
+ And a DropTile component which the dragged tiles can be dropped onto:
+
+ \snippet examples/quick/draganddrop/tiles/DropTile.qml 0
+
+ The keys property of the DropArea will only allow an item with matching key in
+ it's Drag.keys property to be dropped on it.
+
+ \section2 GridView adds drag and drop to a GridView, allowing you to reorder the list.
+
+ It uses a VisualDataModel to move a delegate item to the position of another item
+ it is dragged over.
+
+ \snippet examples/quick/draganddrop/views/gridview.qml 0
+ \snippet examples/quick/draganddrop/views/gridview.qml 1
*/
Item {
id: ll
anchors.fill: parent
Component.onCompleted: {
- addExample("Tiles", "", Qt.resolvedUrl("tiles/tiles.qml"));
- addExample("GridView", "", Qt.resolvedUrl("views/gridview.qml"));
+ addExample("Tiles", "Press and drag tiles to move them into the matching colored boxes", Qt.resolvedUrl("tiles/tiles.qml"));
+ addExample("GridView", "Press and drag to re-order items in the grid", Qt.resolvedUrl("views/gridview.qml"));
}
}
}
import QtQuick 2.0
+//! [0]
Item {
id: root
property string colorKey
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: 32
Drag.hotSpot.y: 32
-
+//! [0]
Text {
anchors.fill: parent
color: "white"
horizontalAlignment:Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
-
+//! [1]
states: State {
when: mouseArea.drag.active
ParentChange { target: tile; parent: root }
AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
}
+
}
}
}
+//! [1]
import QtQuick 2.0
+//! [0]
DropArea {
id: dragTarget
]
}
}
+//! [0]
NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
}
+//! [0]
model: VisualDataModel {
+//! [0]
id: visualModel
model: ListModel {
id: colorModel
ListElement { color: "crimson" }
ListElement { color: "teal" }
}
-
+//! [1]
delegate: MouseArea {
id: delegateRoot
onEntered: visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
}
}
+//! [1]
}
}
ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" }
}
+//! [0]
+ GridView {
+ anchors.fill: parent
+ cellWidth: 100; cellHeight: 100
+ focus: true
+ model: appModel
- Component {
- id: appDelegate
+ highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" }
- Item {
+ delegate: Item {
width: 100; height: 100
Image {
}
}
}
-
- Component {
- id: appHighlight
- Rectangle { width: 80; height: 80; color: "lightsteelblue" }
- }
-
- GridView {
- anchors.fill: parent
- cellWidth: 100; cellHeight: 100
- highlight: appHighlight
- focus: true
- model: appModel
- delegate: appDelegate
- }
+//! [0]
}
// The delegate for each fruit in the model:
Component {
id: listDelegate
-
+//! [0]
Item {
+//! [0]
id: delegateItem
width: listView.width; height: 100
clip: true
}
// Animate adding and removing of items:
-
+//! [1]
ListView.onAdd: SequentialAnimation {
PropertyAction { target: delegateItem; property: "height"; value: 0 }
NumberAnimation { target: delegateItem; property: "height"; to: 55; duration: 250; easing.type: Easing.InOutQuad }
PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false }
}
}
+//! [1]
}
// The view:
// 2. Details mode, which also shows the ingredients and method.
Component {
id: recipeDelegate
-
+//! [0]
Item {
id: recipe
// rather than having a "PropertyChanges" line for each element we
// want to fade.
property real detailsOpacity : 0
-
+//! [0]
width: listView.width
height: 70
// This mouse region covers the entire delegate.
// When clicked it changes mode to 'Details'. If we are already
// in Details mode, then no change will happen.
+//! [1]
MouseArea {
anchors.fill: parent
onClicked: recipe.state = 'Details';
// Lay out the page: picture, title and ingredients at the top, and method at the
// bottom. Note that elements that should not be visible in the list
// mode have their opacity set to recipe.detailsOpacity.
+
Row {
id: topLayout
x: 10; y: 10; height: recipeImage.height; width: parent.width
width: 50; height: 50
source: picture
}
-
+//! [1]
Column {
width: background.width - recipeImage.width - 20; height: recipeImage.height
spacing: 5
}
}
+//! [2]
Item {
id: details
x: 10; width: parent.width - 20
+
anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
opacity: recipe.detailsOpacity
-
+//! [2]
SmallText {
id: methodTitle
anchors.top: parent.top
source: "content/pics/moreDown.png"
opacity: flick.atYEnd ? 0 : 1
}
+//! [3]
}
// A button to close the detailed view, i.e. set the state back to default ('').
}
}
}
+//! [3]
}
// The actual list
}
}
+//! [0]
// Define a highlight with customised movement between items.
Component {
id: highlightBar
highlight: highlightBar
highlightFollowsCurrentItem: false
}
+//! [0]
}
import QtQuick 2.0
import "content"
+//! [0]
Rectangle {
id: root
property int current: 0
to: 0
}
}
+//! [0]
MouseArea{
id: ma
z: 1
// The first ListView sets root.current whenever its currentIndex changes
// due to keyboard interaction.
// Flicking the third ListView with the mouse also changes root.current.
-
+//! [1]
ListView {
id: list1
height: 160; width: parent.width
preferredHighlightBegin: 125; preferredHighlightEnd: 125
highlightRangeMode: ListView.StrictlyEnforceRange
}
-
+//! [1]
// The delegate for each list
Component {
id: petDelegate
}
}
}
+//! [2]
}
+//! [2]
This is a collection of small QML examples relating to model and view functionality.
- GridView and PathView demonstrate usage of these elements to display views.
+ \section2 GridView and PathView demonstrate usage of these elements to display views.
+ \snippet examples/quick/modelviews/gridview/gridview-example.qml 0
- Dynamic List demonstrates runtime modification of a ListModel.
+ \section2 Dynamic List demonstrates animation of runtime additions and removals to a ListView.
- Expanding Delegates demonstrates delegates that expand when activated.
+ The ListView.onAdd signal handler runs an animation when new items are added to the
+ view, and the ListView.onRemove another when they are removed.
+ \snippet examples/quick/modelviews/listview/dynamiclist.qml 0
+ \snippet examples/quick/modelviews/listview/dynamiclist.qml 1
- Highlight demonstrates adding a custom highlight to a ListView.
+ \section2 Expanding Delegates demonstrates delegates that expand when activated.
- Highlight Ranges shows the three different highlight range modes of ListView.
+ It has a complex delegate the size and appearance of which can change, displacing
+ other items in the view.
+ \snippet examples/quick/modelviews/listview/expandingdelegates.qml 0
+ \snippet examples/quick/modelviews/listview/expandingdelegates.qml 1
+ \snippet examples/quick/modelviews/listview/expandingdelegates.qml 2
+ \snippet examples/quick/modelviews/listview/expandingdelegates.qml 3
- Sections demonstrates the various section headers and footers available to ListView.
+ \section2 Highlight demonstrates adding a custom highlight to a ListView.
+ \snippet examples/quick/modelviews/listview/highlight.qml 0
- Packages demonstrates using Packages to transition delegates between two views.
+ \section2 Highlight Ranges shows the three different highlight range modes of ListView.
+ \snippet examples/quick/modelviews/listview/highlightranges.qml 0
+ \snippet examples/quick/modelviews/listview/highlightranges.qml 1
+ \snippet examples/quick/modelviews/listview/highlightranges.qml 2
- VisualItemModel uses a VisualItemModel for the model instead of a ListModel.
+ \section2 Sections demonstrates the various section headers and footers available to ListView.
+ \snippet examples/quick/modelviews/listview/sections.qml 0
+
+ \section2 Packages demonstrates using Packages to transition delegates between two views.
+
+ It has a Package which defines delegate items for each view and an item that can
+ be transferred between delegates.
+
+ \snippet examples/quick/modelviews/package/Delegate.qml 0
+
+ A VisualDataModel allows the individual views to access their specific items from
+ the shared package delegate.
+
+ \snippet examples/quick/modelviews/package/view.qml 0
+
+ \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel.
+
+ \snippet examples/quick/modelviews/visualitemmodel/visualitemmodel.qml 0
*/
Item {
import QtQuick 2.0
-//![0]
+//! [0]
Package {
Text { id: listDelegate; width: parent.width; height: 25; text: 'Empty'; Package.name: 'list' }
Text { id: gridDelegate; width: parent.width / 2; height: 50; text: 'Empty'; Package.name: 'grid' }
]
}
}
-//![0]
+//! [0]
height: 480
property bool printDestruction: false
+//! [0]
VisualItemModel {
id: itemModel
snapMode: ListView.SnapOneItem; flickDeceleration: 2000
cacheBuffer: 200
}
-
+//! [0]
Rectangle {
width: root.width; height: 30
anchors { top: view.bottom; bottom: parent.bottom }
projects / profile / ivi / qtdeclarative.git / commitdiff