Qml - ListView

Ibrahim

Hi; I want to create ListView in QML Quick Controls 2 such as:
2x5:

The numbers are random. How can I do that? Thanks.

p3c0

@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.

Ibrahim

@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?

p3c0

@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.

Ibrahim

@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?

p3c0

@Ibrahim Any errors?

Ibrahim

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

p3c0

@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 :)