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:
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:
-
you set this ,
@Ahti said in How to remove unwanted space in GridLayout:GridLayout {
anchors.fill: parentso 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 thisWindow { 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:
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:-
-
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.