Qml - ListView
-
Hi; I want to create ListView in QML Quick Controls 2 such as:
2x5:
The numbers are random. How can I do that? Thanks. -
@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-listsIn 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?
-
@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?
-
@Ibrahim Any errors?
-
@p3c0 Hi;
I want to add to TableView / ListView QuickControls components. How can I do it?
Example:
-
@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 :)