[SOLVED] Fill GridLayout with Repeater

frankem

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

dasRicardo

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" }
}
}
}
@

frankem

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

dasRicardo

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

frankem

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?

dasRicardo

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" }
}
}
}
@

frankem

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. ;-)

fulekia

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:

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