Proper way to layout 2 blocks of items - qt

Question

I am having some problems with objects layout.
What I need is to create 2 blocks of text items. Second block should follow first.
Here is my code:
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
Window
{
visible: true
id: page
Rectangle
{
id: contentRec
anchors.fill: parent
ColumnLayout
{
spacing: 16
anchors.fill: contentRec
anchors.margins: 16
Rectangle
{
id: hlpRec
color: "#fff"
ColumnLayout
{
anchors.fill: hlpRec
spacing: 8
Text
{
text: "Some text 1"
color: "#434D56"
}
Text
{
text: "Some text 1"
}
Text
{
text: "Some text 2"
}
Text
{
text: "Some text 3"
}
Text
{
text: "Some text 4"
}
}
}
Rectangle
{
Layout.preferredHeight: 16
}
Rectangle
{
id: infoRec
color: "#fff"
ColumnLayout
{
anchors.fill: infoRec
spacing: 8
Text
{
text: "Status text 1"
}
Text
{
text: "Status text 2"
}
Text
{
text: "Status text 3"
}
}
}
}
}
}
The problem is that second block overlaps first. What is wrong with my code?

Answer 1

Both of your inner ColumnLayout components are set to fit their parents, which have neither their width/height nor their anchor properties defined, hence their size is zero. Because those Rectangles don't clip their contents, you see the items overlapping.
When working with Column or ColumnLayout, the content height will be calculated from what you put in those containers. If you do it correctly, you can build pretty flexible and clever layouts without having to keep track of individual heights. However, you have to specify the other dimension by either setting the width property or the appropriate anchors. In case of Column and ColumnLayout you want to "snap" the component's width to fit the parent. At the same time you could leave the height unconstrained, allowing the item to grow vertically. Same goes for Row and RowLayout where the width will be calculated and you have to specify a certain height.
The solution in your case could be either based on ColumnLayout or Column. Note that the hlpRec and infoRec were removed and the anchors of Column/ColumnLayout were set.
Via ColumnLayout:
import QtQuick 2.6
import QtQuick.Layouts 1.1
Rectangle {
anchors.fill: parent
ColumnLayout {
spacing: 16
anchors.fill: parent
anchors.margins: 16
ColumnLayout {
anchors.left: parent.left
anchors.right: parent.right
spacing: 8
Repeater {
model: 5
Text {
text: "top " + index
}
}
}
Rectangle {
Layout.preferredHeight: 16
anchors.left: parent.left
anchors.right: parent.right
color: "#ff00ff"
}
ColumnLayout {
anchors.left: parent.left
anchors.right: parent.right
spacing: 8
Repeater {
model: 5
Text {
text: "bottom " + index
}
}
}
}
}
Via Column:
import QtQuick 2.6
Rectangle {
anchors.fill: parent
Column {
spacing: 16
anchors.fill: parent
anchors.margins: 16
Column {
anchors.left: parent.left
anchors.right: parent.right
spacing: 8
Repeater {
model: 5
Text {
text: "top " + index
}
}
}
Rectangle {
height: 16;
anchors.left: parent.left
anchors.right: parent.right
color: "#ff00ff"
}
Column {
anchors.left: parent.left
anchors.right: parent.right
spacing: 8
Repeater {
model: 5
Text {
text: "bottom " + index
}
}
}
}
}
The ColumnLayout will center content items individually and uses the total height available from the window whereas the Column will align all elements from top to bottom using only the content height. You'll notice the different behavior when changing your window's height.
In case those Rectangles are used to define individual backgrounds, you can do something like this (demonstrated with the Column based approach):
import QtQuick 2.6
Rectangle {
anchors.fill: parent
Column {
spacing: 16
anchors.fill: parent
anchors.margins: 16
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
height: topColumn.height
color: "#ff0000"
Column {
id: topColumn
anchors.left: parent.left
anchors.right: parent.right
spacing: 8
Repeater {
model: 5
Text {
text: "top " + index
}
}
}
}
Rectangle {
height: 16;
anchors.left: parent.left
anchors.right: parent.right
color: "#ff00ff"
}
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
height: bottomColumn.height
color: "#0000ff"
Column {
id: bottomColumn
anchors.left: parent.left
anchors.right: parent.right
spacing: 8
Repeater {
model: 5
Text {
text: "bottom " + index
}
}
}
}
}
}
Hope this helps!