6

I have a column with two groupbox which each have a GridLayout.

Here is my code: 

 Window {
    visible: true
    width: 500
    height: 480
    title: qsTr("GridLayoutTest")
Column
{
    GroupBox
    {
        contentWidth: gl1_.width
        contentHeight: gl1_.height
            GridLayout
            {
                id: gl1_
                columns: 2
                width: 200
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 45; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 50; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 45; Layout.preferredHeight: 25; color: "purple"; }
            }
    }
    GroupBox
    {
        contentWidth: gl2_.width
        contentHeight: gl2_.height
            GridLayout
            {
                id: gl2_
                columns: 2
                width: 200
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 35; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
            }
    }
}

}

My problem is the following: each gridLayout have his own alignment and all my right elements are not correctly aligned. I want to have the same alignment for all my right elements.

Result:

It is a way to do this ?

AAEM
  • 1,837
  • 2
  • 18
  • 26
APianist
  • 291
  • 1
  • 4
  • 14
  • Putting `GridLayout` inside `Item` is completely pointless here. Another point is that you should specify grid's element size with Layout attachment properties like `Layout.preferredWidth`, not with width/height. – folibis Nov 05 '18 at 13:27
  • Hi, thanks for your answer. I removed the Item and used Layout.preferredWidth/Height. Unfortunately it change nothing. My right elements are still not aligned. – APianist Nov 05 '18 at 13:44
  • You should update you code example too. – folibis Nov 05 '18 at 14:30
  • Yeah, sorry. It's done. – APianist Nov 05 '18 at 14:43
  • Ok, now could you explain what do you mean saying _"my right elements are not correctly aligned"_? Current there is no alignment at all. What do you want to archive? Some sketch would be great. – folibis Nov 05 '18 at 15:11
  • I added an image of the result. What I want is, in the 1st GroupBox, align my right rectangles (the ones who have 45 width) to the red line in the picture... It is more clear :/ ? – APianist Nov 05 '18 at 15:20

1 Answers1

6

Ok, you have some problem with the sizes. You define your GridLayout width as 200px but also you define sizes for items, for example the first row id 60 + 25 = 85, not 200. So the layout has to fix it somehow. It stretches the cells, I guess according to items sizes.

So you have to set fixed size for the first column for all the layouts. The remaining space of the 2nd column you could wrap with Item:

Column {
    anchors.fill: parent
    anchors.margins: 20
    GroupBox {
        id: box1
        title: "group 1"
        width: parent.width
        GridLayout {
            width: parent.width
            columns: 2
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 180 }
            }
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 60 }
            }
        }
    }
    GroupBox {
        id: box2
        title: "group 2"
        width: parent.width
        GridLayout {
            width: parent.width
            columns: 2
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 80 }
            }
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 120 }
            }
        }
    }
}
folibis
  • 12,048
  • 6
  • 54
  • 97