[SOLVED] QT quick layout segmentation by percentage

Issue

How to have two columns in a gridLayout where the first column occupies 20% of the space and the second column automatically fills the rest of the space, like what happens in css?
I try this but now work:

GridLayout{
   id:root
   anchor.fill:parent
   columns:5
   rows:1
   Column{
     id: col1
     Layout.column:0
     Layout.columnSpan:1
   }
   Column{
     id: col2
     Layout.column:1
     Layout.columnSpan:4
   }
}

Finally, please show me an article that is well-trained in working with layout.

Solution

You are building this on the assumption that the columns are equal but they are not. You have to set the column size explicitly.

GridLayout {
    anchors.fill: parent
    columns: 2
    columnSpacing: 0

    Rectangle {
        Layout.preferredWidth: parent.width * 0.2;
        Layout.preferredHeight: 50
        color: "orange"
    }
    Rectangle {
        Layout.fillWidth: true
        Layout.preferredHeight: 50
        color: "green"
    }
}

Answered By – folibis

Answer Checked By – Timothy Miller (BugsFixing Admin)