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

    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.