QT quick layout segmentation by percentage

Question

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.

Answer 1

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"
    }
}