How to remove unwanted space in GridLayout

[Ahti]

I am using GridLayout to layout my controls like this:

 GridLayout {
        anchors.fill: parent
        anchors.margins: 20
        columns: 2
        Label { text: "text_1" } Label { text: "text_2" }
        Label { text: "text_3" } Label { text: "text_4" }
        Label { text: "text_5" } Label { text: "text_6" }
    }

And it gives me this output:

As you can see there are lot of spaces from the top, bottom and in-between the rows of the labels I wanna remove them how would I do it ?

I want something like this:

[LeLev]

you set this ,
@Ahti said in How to remove unwanted space in GridLayout:

GridLayout {
anchors.fill: parent

so that is the normal behavior. If you reduce the window height you will see the result you want.
you can wrap you GridLayout with a RowLayout like this

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    property string  entryDisplayText : "g.eg"

    Component{
        id:lab
        Label { text: "text" }
    }

    RowLayout{ // wraped
        anchors.fill: parent

        GridLayout {
            Layout.preferredHeight: parent.height/2
            Layout.alignment: Qt.AlignTop
            columns: 2
            rows : 3

            Repeater{
                model: 6
                Loader{
                    sourceComponent: lab
                }
            }
        }
        /*
            Auther Components
        */

    }
}

[Pradeep P N]

Hi @Ahti
You can also try the sample code below.

      GridLayout {
        anchors.centerIn: parent
        columns: 3
        rows: 3
        // columnSpacing: 0
        rowSpacing: 50

        Repeater {
            id: repeater

            model: 6
            Rectangle {
                width: 200;
                height: 50
                border.color: "black"
                Text {
                    anchors.centerIn: parent
                    text: qsTr("Text")
                    font {
                        bold: true
                        pointSize: 15
                    }
                }
            }
        }
    }

Output:

All the best.

[Shrinidhi Upadhyaya]

Hi @Ahti ,

• The reason why you are getting unwanted space is because you have not specified height and width to the Label,for example if you just put a dummy Rectangle inside the Label and fill it, you will see that it is not covering the complete Layout.So output will be something like this:-

• If you just specify height and width to the Label,ie.,do the following code change:-

  Label {
        Layout.fillHeight: true
        Layout.fillWidth: true
        text: "text_6"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        Rectangle {
            anchors.fill: parent
            color: "transparent"
            border.color: "red"
        }
    }
  

Note:- Rectangle inside the Label is just for visual purpose.
Sample Output:-

• Code using Repeater:-

  GridLayout {
      anchors.fill: parent
      anchors.margins: 20
      columns: 2
  
    Repeater {
        model: 6
        Label {
            Layout.fillHeight: true
            Layout.fillWidth: true
            text: "text_1"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            Rectangle {
                anchors.fill: parent
                color: "transparent"
                border.color: "red"
            }
         }
      }
   }
  

The sample output of this will be same as shown in point 2.

Note:- You can remove the Rectangle inside the Label, its just for your visual purpose.