Create button component inside scrool view list

Nathan Miguel

i have a scroll view and i want to add button from loop and edit your text

I created a qml form file, but i dont now how to add it using code

eyllanesc

A trivial solution is to use Component.createObject to create the buttons and add it to a ColumnLayout:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    visible: true
    width: 100
    height: 100
    ScrollView {
        anchors.fill: parent
        ColumnLayout {
            id: columnLayout
        }
    }
    property Component buttonProvider: Button {
    }
    Component.onCompleted: {
        for(let i=0; i < 10; ++i){
            var button = buttonProvider.createObject(columnLayout)
            button.text = i
        }
    }
}

On the other hand, another better solution is to use a model together with a Repeater since if the model is modified, the text of the buttons is modified for example.

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    visible: true
    width: 100
    height: 100
    ListModel {
        id: listModel
        Component.onCompleted: {
            for (let i = 0; i < 10; ++i) {
                listModel.append({
                    "value": i
                });
            }
        }
    }
    ScrollView {
        anchors.fill: parent
        ColumnLayout {
            Repeater {
                model: listModel
                Button {
                    text: model.value
                    width: 100
                    height: 100
                }
            }
        }
    }
}

Nathan Miguel

@eyllanesc tanks a looott