Qml Repeater Elements dynamic size

kingwill101

ive been trying to dynamically generate/resizing a keypad using the Repeater
but for some reason the layout often only shows one element instead of all.

If i use a fixed height or width instead of changingWidth/changingHeight it is rendered properly but if i try to set it after the window has been resized thats where the problem comes in.

Any help would be appreciated

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    property var keys: ["1", "2", "3", "QTY", "4", "6", "5", "Disc", "7", "8", "9", "Price", "+/-", "0", ".", "<="]

    property var changingWidth: 0
    property var changingHeight: 0

    GridLayout {
        id: grid
        anchors.fill: parent

        columns: 4

        onHeightChanged: function () {
            changingHeight = height / 4
        }

        onWidthChanged: function () {
            changingWidth = width / 4
        }

        Repeater {
            model: keys.length
            delegate: Rectangle {
                width: changingWidth
                height: changingHeight
                Text {
                    text: keys[index]
                    anchors.centerIn: parent
                }
            }
        }
    }
}

BrunoGeorgevich

Have you tried to use GridView instead of GridLayout? With GridView you dont need to use Repeater, because it have a property called "model" where you passes your model or array.

http://doc.qt.io/qt-5/qml-qtquick-gridview.html
http://doc.qt.io/qt-5/qml-qtquick-gridview.html#model-prop

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    property var keys: ["1", "2", "3", "QTY", "4", "6", "5", "Disc", "7", "8", "9", "Price", "+/-", "0", ".", "<="]

    GridView {
        id: grid
        property int columns : 4
        property int rows : 4
        anchors.fill: parent
        cellWidth: width/columns
        cellHeight: height/rows
        model:keys
        delegate: Rectangle {
                width: grid.cellWidth
                height: grid.cellHeight
                Text {
                    text: keys[index]
                    anchors.centerIn: parent
                }
            }
        }
    }

try this code above, i dont have total sure it will works, but it something like i've done above.

kingwill101

@BrunoGeorgevich thanks man you are a lifesaver!!!