How to make QML component (widget) adjusts according to data



  • I have a Widget as QML component in Qt Quick application which is to be used in various screens to display contents.

    How can I use this particular QML component to adjust according to the items in it.

    Any direction to achieve above requirement is highly appreciated



  • Hi,
    I have tried to implement the above requirement with ListView, but with hard coded drop-down items.
    below is the code snippet

    @Rectangle {
    width:400;
    height: 400;

    Rectangle {
            id:comboBox
            property variant items: ["Go to Inbox", "View calendar", "RSS Feeds"]
    
            signal comboClicked;
            width: 400;
            height: 30;
            z: 100;
            smooth:true;
    
            Rectangle {
                id:chosenItem
                radius:4;
                width:parent.width;
                height:comboBox.height;
                color: "lightsteelblue"
                smooth:true;
                Text {
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.margins: 8;
                    id:chosenItemText
                    text:"Menu";
                    font.family: "Arial"
                    font.pointSize: 14;
                    smooth:true
                }
    
                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
                    }
                }
            }
    
            Rectangle {
                id:dropDown
                width:comboBox.width/4;
                height:0;
                clip:true;
                radius:4;
                anchors.top: chosenItem.bottom;
                anchors.margins: 2;
                color: "lightgray"
    
                ListView {
                    id:listView
                    height:500;
                    model: comboBox.items
                    currentIndex: 0
                    delegate: Item{
                        width:comboBox.width;
                        height: comboBox.height;
    
                        Text {
                            text: modelData
                            anchors.top: parent.top;
                            anchors.left: parent.left;
                            anchors.margins: 5;
    
                        }
                        MouseArea {
                            anchors.fill: parent;
                            onClicked: {
                                comboBox.state = ""
                            }
                        }
                    }
                }
            }
    
    
            states: State {
                name: "dropDown";
                PropertyChanges { target: dropDown; height:30*comboBox.items.length }
            }
    
            transitions: Transition {
                NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 }
            }
        }
    }@
    

    But I would like to use this QML component in my project.
    How can I populate the ListView items dynamically.

    "Reference":http://stackoverflow.com/questions/9634897/qt-qml-dropdown-list-like-in-html

    Thanks


Log in to reply
 

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