Package / DelegateModel with custom components
-
Hi,
I have some custom sub-views/components (View1, View2, View3...) I'd like to display in both a ListView and a GridView.
I saw this example with "Package" : http://harmattan-dev.nokia.com/docs/library/html/qt4/declarative-modelviews-package.html
But I can't figure how to apply it to my use case.
I thought to write something like this, but I can't make it work :
@
ObjectModel {
id: myModel
View1 { }
View2 { }
View3 { }
View4 { }
}VisualDataModel {
id: visualModel
delegate: Delegate {}
model: myModel
}ListView {
width: 200; height:200
model: visualModel.parts.list
}GridView {
x: 200; width: 200; height:200
cellHeight: 50
model: visualModel.parts.grid
}
@With the Delegate being a container with the sole purpose of reparenting the views into the listview/gridview.
-
I've finally found a working solution, but I find the code quite ugly, so any suggestion to make it look better would be highly appreciated.
Main.qml (custom views are represented here by rectangles of different colors) :
@
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQml.Models 2.1ApplicationWindow {
id: window
title: qsTr("Hello World")
width: 640
height: 480ObjectModel { id: objectsList Component { id: view1; Rectangle { width: 100; height: 25; color: "red" } } Component { id: view2; Rectangle { width: 100; height: 25; color: "blue" } } Component { id: view3; Rectangle { width: 100; height: 25; color: "green" } } Component { id: view4; Rectangle { width: 100; height: 25; color: "yellow" } } Component { id: view5; Rectangle { width: 100; height: 25; color: "cyan" } } Component { id: view6; Rectangle { width: 100; height: 25; color: "magenta" } } } DelegateModel { id: visualModel delegate: Delegate {} model: objectsList.count } ListView { width: 200; height:200 model: visualModel.parts.list } GridView { x: 200; width: 200; height:200 cellHeight: 50 model: visualModel.parts.grid }
}
@Delegate.qml :
@
import QtQuick 2.1Package {
Item { id: inListContainer; width: 200; height: 25; Package.name: 'list' }
Item { id: inGridContainer; width: 100; height: 50; Package.name: 'grid' }Item { id: wrapper width: 200; height: 25 Loader { anchors.fill: parent sourceComponent: objectsList.children[index] } MouseArea { anchors.fill: parent onClicked: { if (wrapper.state == 'inList') wrapper.state = 'inGrid'; else wrapper.state = 'inList'; } } state: 'inList' states: [ State { name: 'inList' ParentChange { target: wrapper; parent: inListContainer } }, State { name: 'inGrid' ParentChange { target: wrapper; parent: inGridContainer x: 0; y: 0; width: inGridContainer.width; height: inGridContainer.height } } ] transitions: [ Transition { ParentAnimation { NumberAnimation { properties: 'x,y,width,height'; duration: 300 } } } ] }
}
@