Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

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

    QML and Qt Quick
    1
    2
    1358
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      Craig27 last edited by

      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

      1 Reply Last reply Reply Quote 0
      • C
        Craig27 last edited by

        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

        1 Reply Last reply Reply Quote 0
        • First post
          Last post