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