Qml - ListView



  • Hi; I want to create ListView in QML Quick Controls 2 such as:
    2x5:
    image
    The numbers are random. How can I do that? Thanks.


  • Moderators

    @Ibrahim QQC2 doesnot have a ListView component. You will have to use the one provided in QtQuick module.
    Have a look at this example:
    http://doc.qt.io/qt-5/qtquickcontrols2-chattutorial-example.html#chapter-2-lists

    In the same way you can create a delegate which will contain 2 Rectangle for the random number and the text.

    I think TableView is more appropriate component here.



  • @p3c0 Thanks. I want to put a Repeater in ListModel such as:

    ListModel {
      Repeater {
        model: textField.text() * 1 // or a static number 100, 250 etc.
        ListElement { no: index; name: "Noah" }
      }
    }
    

    It is possible?


  • Moderators

    @Ibrahim
    ListModel is only meant to hold the data. If your aim is to fill this model with your data you can use append to add the data dynamically:

    ListModel {
      Component.onCompleted: {
        append({no: index; name: "Noah"})
      }
    }
    

    Use for loop instead of Repeater to do this multiple times. Repeater has a different purpose.



  • @p3c0 thanks, but I wrote this code but I couldn't do it:

    ListModel {
        id: listModel
        Component.onCompleted: {
          for (var i = 0; i < parseInt(textField.text); i++)
            append({ no: i + 1, name: "Noah" });
        }
      }
    

    Can you write a example code for loop?


  • Moderators

    @Ibrahim Any errors?



  • @p3c0 Hi;
    I want to add to TableView / ListView QuickControls components. How can I do it?
    Example:
    alt text


  • Moderators

    @Ibrahim Here's a simple implementation of the above with ListView and custom delegate:

    import QtQuick 2.5
    
    Rectangle {
        width: 200; height: 200
    
        property Component _button: Button {}
        property Component _textfield: TextField {}
        property Component _switch: Switch {}
    
        ListModel {
            id: model
            Component.onCompleted: {
                append({ name: "button" })
                append({ name: "textfield" })
                append({ name: "switch" })
            }
        }
    
        Component {
            id: delegate
            Row {
                Rectangle {
                    width: 100; height: 50
                    border.color: "black"
                    border.width: 1
                    Text {
                        anchors.centerIn: parent
                        text: name
                    }
                }
                Rectangle {
                    id: rect
                    width: 100; height: 50
                    border.color: "black"
                    border.width: 1
                    Component.onCompleted: {
                        var obj
                        if(name=="button") {
                            obj = _button.createObject(rect)
                            obj.text = "Click Me!"
                        } else if(name=="textfield") {
                            obj = _textfield.createObject(rect)
                        } else if(name=="switch") {
                            obj = _switch.createObject(rect)
                        }
                        obj.anchors.fill = rect
                    }
                }
            }
        }
    
        ListView {
            anchors.fill: parent
            model: model
            delegate: delegate
        }
    }
    

    You can study it and try to improve it :)


Log in to reply
 

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