Listview grouping of similar elements-



  • I am a Begginer in QMl, I am using it on a desktop. I would like to group similar elements of a list together and then display it when user clicks on one of its associated paramert
    ex.
    @
    --Fruits
    Apple
    Mango
    Banana
    Vegies
    Carrot
    Brinjal
    @
    but I want the intital view as

    @Fruits
    Vegies@

    on clikcing Fruits I want that exapanded slots. Kindly help me with this. I grouped it using section comp in list but I cannot expand the view on cliking. Appreciate your time and care.



  • I would appreciate if any of you could give me an idea on how to procd.



  • I have not yet found any solution for it. Do you guys have any idea on how to proceed.


  • Moderators

    No out-of-the-box solution is available in QML for implementing a Tree View. You have to implement your own, use QtWidgets instead, or change your design.





  • [quote author="dmcr" date="1347976417"]You can adapt or be inspired by "this":http://doc.qt.nokia.com/4.7-snapshot/src-imports-folderlistmodel.html[/quote]

    How does that help? The link you give does not show a model or view that supports expanding nodes.



  • Ah yes i've read too fast the example, i thought that it could expand folders and subfolders....but it's not the case :( !



  • @ Sierdzio: How can I use QtWidgets, do you have an example. or could you give me a rough idea.
    http://qt-project.org/doc/qt-4.8/QWidget.html I read this but its too complicated for me since am a beginner


  • Moderators

    What I meant is - if possible - switch from QML to QtWidgets for that. But since you want to learn QML, you should probably discard that advice.



  • Here's one way to solve the problem, but there is a caveat. If your subitem models are big and you uncollapse an item, you might get a subpar user experience as the declarative engine creates each of those nested items at one go as opposed to the way ListView creates delegates them one by one as you scroll. The exact number of nested items when this becomes a problem of course depends on your target hardware and the complexity of the nested item delegate. Also defining that "collapsed" property for each main level list element is kind of annoying, but you have to have it in order to avoid an item resetting to the collapsed state when it scrolls out of sight.

    It's probably possible to achieve dynamic construction of the nested items by replacing the Column+Repeater combo in the example with a ListView inside an Item and managing it's y and contentY properties while the main ListView scrolls, but I don't really feel like getting into that type of fun right now :)

    Despite of the shortcomings of this particular technique, I hope this will get you started. I added some comments inside the code in hopes of making it easier to understand.

    @
    import QtQuick 1.1

    Item {
    width: 200
    height: 300

    ListView {
        anchors.fill: parent
        model: nestedModel
        delegate: categoryDelegate
    }
    
    ListModel {
        id: nestedModel
        ListElement {
            categoryName: "Veggies"
            collapsed: true
    
            // A ListElement can't contain child elements, but it can contain
            // a list of elements. A list of ListElements can be used as a model
            // just like any other model type.
            subItems: [
                ListElement { itemName: "Tomato" },
                ListElement { itemName: "Cucumber" },
                ListElement { itemName: "Onion" },
                ListElement { itemName: "Brains" }
            ]
        }
    
        ListElement {
            categoryName: "Fruits"
            collapsed: true
            subItems: [
                ListElement { itemName: "Orange" },
                ListElement { itemName: "Apple" },
                ListElement { itemName: "Pear" },
                ListElement { itemName: "Lemon" }
            ]
        }
    
        ListElement {
            categoryName: "Cars"
            collapsed: true
            subItems: [
                ListElement { itemName: "Nissan" },
                ListElement { itemName: "Toyota" },
                ListElement { itemName: "Chevy" },
                ListElement { itemName: "Audi" }
            ]
        }
    }
    
    Component {
        id: categoryDelegate
        Column {
            width: 200
    
            Rectangle {
                id: categoryItem
                border.color: "black"
                border.width: 5
                color: "white"
                height: 50
                width: 200
    
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    x: 15
                    font.pixelSize: 24
                    text: categoryName
                }
    
                Rectangle {
                    color: "red"
                    width: 30
                    height: 30
                    anchors.right: parent.right
                    anchors.rightMargin: 15
                    anchors.verticalCenter: parent.verticalCenter
    
                    MouseArea {
                        anchors.fill: parent
    
                        // Toggle the 'collapsed' property
                        onClicked: nestedModel.setProperty(index, "collapsed", !collapsed)
                    }
                }
            }
    
            // A Loader is used here to avoid creating the nested items 
            // when the list item is not in the uncollapsed state
            Loader {
                id: subItemLoader
    
                // This is a workaround for a bug/feature in the Loader element. 
                // If sourceComponent is set to null the Loader element retains 
                // the same height it had when sourceComponent was set. Setting visible
                // to false makes the parent Column treat it as if it's height was 0.
                visible: !collapsed
                property variant subItemModel : subItems
                sourceComponent: collapsed ? null : subItemColumnDelegate
                onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
            }
        }
    
    }
    
    Component {
        id: subItemColumnDelegate
        Column {
            property alias model : subItemRepeater.model
            width: 200
            Repeater {
                id: subItemRepeater
                delegate: Rectangle {
                    color: "#cccccc"
                    height: 40
                    width: 200
                    border.color: "black"
                    border.width: 2
    
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        x: 30
                        font.pixelSize: 18
                        text: itemName
                    }
                }
            }
        }
    }
    

    }

    @



  • @elpuri: Thanks, looks good. Should be good for the start. Thanks for your time and understanding:)



  • is it possible to implement something of this kind using an XMLModel instead of a ListModel.??


Log in to reply
 

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