Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

[SOLVED] Fill GridLayout with Repeater



  • Dear Qt folks,

    I would like to fill a GridLayout by using a Repeater. This works as long as I have only one Element in the Repeater. However, if I am putting more than one element in the Repeater the layouting with GridLayout does not work anymore.

    @GridLayout {
    anchors.fill: parent
    columns: 4
    Repeater {
    model: 5
    Text { text: index }
    Text { text: "someting" }
    Text { text: "someting" }
    Text { text: "someting" }
    }
    }@

    Any suggestions how I can achieve my behaviour? Wrapping the elements inside the Repeater into an "Item" by itself does not solve the problem.

    Thanks in advance and with best regards,
    Markus



  • Hmm maybe i understand wrong what you want but the code works correct. It add 4 Text Elements in every column but every Text element on position 0,0. Maybe this is what you want:

    @
    GridLayout {
    columns: 4
    Repeater {
    model: 5
    Column {
    Text { text: index }
    Text { text: "someting" }
    Text { text: "someting" }
    Text { text: "someting" }
    }
    }
    }
    @



  • Thanks for your reply. What I want to achieve is to generate 5 rows in the GridLayout. So the contents of the Repeater element should be placed one-by-one in the columns. In the end I want to have a 4x5 Grid.

    Best regards,
    Markus



  • So it's solved right! Please add [SOLVED] to all your solved thread titles!



  • No it's not solved. So far I am getting the same result as if I would write

    @GridLayout {
    anchors.fill: parent
    columns: 4
    Repeater {
    model: 5
    Text { text: "someting" }
    }
    }@

    I can see only a 4x2 Grid containing 5 times the Text element. However, I would like to distribute all elements within the Repeater across the GridLayout.

    How can I achieve this?



  • Sorry i don't understand what you want :) Would you like to have a table like output? The GridLayout is not necessary for this and in my opinion the wrong element. Here another try hopefully it's what you want.
    @
    Column {
    Repeater {
    model: 5
    Row {
    spacing: 20
    Text { text: index }
    Text { text: "someting" }
    Text { text: "someting" }
    Text { text: "someting" }
    }
    }
    }
    @



  • Yes, you are right. A GridLayout somehow doesn't seem to work in this case. As I would like to fill my parent with the contents I have chosen a ColumnLayout now instead of a Column:

    @ColumnLayout {
    anchors.fill: parent
    Repeater {
    model: 5
    Row {
    spacing: 20
    Text { text: index }
    Text { text: "someting" }
    Text { text: "someting" }
    Text { text: "someting" }
    }
    }
    }@

    This seems to be doing what I want. Thanks for help and being patient. ;-)



  • I know this is a very, very old topic by interweb standards, but the proposed solution didn't work for my situation, nor did anything else I found, so I thought I'd post the (admittedly) kludgey workaround I figured out.

    I'm using grids as a lightweight sort of table, since trying to do what I need with actual tables ended up requiring hundreds of lines of nonsense and much hoop-jumping (lots of variables; don't ask). I basically want column headers in a GridLayout, with a repeater to generate all of the subsequent rows, like this:

    gridrepeater-fs8.png

    I stumbled upon a combination of three things necessary to make it work for me (as of v5.15.1). The repeated content must have:

    • Each row wrapped in an Item component
    • Each cell parented to the GridLayout component
    • Cells within a row listed in reverse column order

    Not doing any one of those three things breaks the layout for me.

    Here's a working example, used to generate the screenshot above:

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    import QtQuick.Layouts 1.15
    
    ApplicationWindow {
        id: root
        width: 300
        height: 300
        color: "#111"
    
        GridLayout {
            id: grid
            anchors.centerIn: parent
            columns: 3
    
            // Column headers are direct children of the GridLayout
            Label {
                text: "Red"
                color: "#eee"
            }
            Label {
                text: "Green"
                color: "#eee"
            }
            Label {
                text: "Blue"
                color: "#eee"
            }
    
            // HACK: somewhat kludgey, but grid cells in a repeater must be:
            //   - Wrapped in an Item component
            //   - Parented to the GridLayout component
            //   - In reverse order
            Repeater {
                model: 3
    
                Item {
                    Rectangle {
                        parent: grid
                        width: 50
                        height: 50
                        color: "blue"
                    }
    
                    Rectangle {
                        parent: grid
                        width: 50
                        height: 50
                        color: "green"
                    }
    
                    Rectangle {
                        parent: grid
                        width: 50
                        height: 50
                        color: "red"
                    }
                }
            }
        }
    }
    

Log in to reply