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

How to remove unwanted space in GridLayout



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

    0_1560521392148_qml layout.PNG

    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:

    0_1560521960626_qml gridlayout.PNG



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


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

    0_1560526380920_183f6e0c-7316-4277-85d4-197274b380a5-image.png

    All the best.



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

    0_1560747444223_845718c6-64d7-4899-9f67-c3884121a6d3-image.png

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

    0_1560747547002_1a683aa8-f1cc-4397-b1aa-7ab120f4102c-image.png

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


Log in to reply