Package / DelegateModel with custom components

VitaminC

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.

VitaminC

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.1

ApplicationWindow {
id: window
title: qsTr("Hello World")
width: 640
height: 480

ObjectModel {
    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.1

Package {
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 }
            }
        }
    ]
}

}
@