Hi Bas!
The Grid type automatically sizes it’s columns based on the content, so you can create a grid with different columns widths with something like that:
Grid {
columns: 3
// first col: width 100
Rectangle {
color: "blue"
width: 100
height: 30
}
// 2nd col: width 200
Rectangle {
color: "green"
width: 200
height: 30
}
// 3rd col: width 150
Rectangle {
color: "orange"
width: 150
height: 30
}
}
If you want to have different column width in each row, you can also combine the Column and Row types manually:
// one column that holds several rows
Column {
// first row with independent col widths
Row {
// first col item
Rectangle { }
// 2nd col item
Rectangle { }
// 3rd col item
Rectangle { }
}
// second row with independent col widths
Row {
// first col item
Rectangle { }
// 2nd col item
Rectangle { }
// 3rd col item
Rectangle { }
}
// more rows ...
}
Another option, that is very flexible, would be to use QML Layouts, e.g. a GridLayout. It essentially works like a grid, but allows to specify your desired preferred or minimum cell width/height with attached properties like Layout.preferredWidth.
Best,
Günther
