Qml Repeater Elements dynamic size



  • 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
                    }
                }
            }
        }
    }
    
    


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



  • @BrunoGeorgevich thanks man you are a lifesaver!!!


Log in to reply
 

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