ColumnLayout problem [solved]
-
Hi,
i can't make layout work as i expect. Here is a simple example, i just want 3 Rectangles to be visible and one can extend to the space not used and others have minimum and maximum size. With messages you can see that width are given to Column and Rectangles but just after it goes to 0.
@import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1ApplicationWindow {
Rectangle {
anchors.fill: parent
onWidthChanged: console.log("Rectangle Width : "+width)
ColumnLayout {
//anchors.fill: parent // Doesn't work with that
//width: 100 // Works with that
width: parent.width
height: parent.height
onWidthChanged: console.log("Column Width : "+width)
Rectangle {
color: "red"
width: parent.width
onWidthChanged: console.log("Rectangle 1 Width : "+width)
Layout.minimumHeight: 50
Layout.maximumHeight: 100
}
Rectangle {
color: "green"
width: parent.width
onWidthChanged: console.log("Rectangle 2 Width : "+width)
Layout.minimumHeight: 100
Layout.maximumHeight: 200
}
Rectangle {
color: "blue"
width: parent.width
onWidthChanged: console.log("Rectangle 3 Width : "+width)
//Layout.minimumHeight: 100 // Rectangle visible if height else it is invisible
Layout.fillHeight: true // Doesn't extend
}
}
}
}
@And the Output :
@Rectangle Width : 194
Column Width : 194
Rectangle 3 Width : 194
Rectangle 2 Width : 194
Rectangle 1 Width : 194
Rectangle 3 Width : 0
Rectangle 2 Width : 0
Rectangle 1 Width : 0
@if someone can help it would be nice.
Thanks
-
The main problem I see is that your rectangles have no size hint. You define a minimum height on each rectangle which will ensure that it gets at least some height but at no point do you tell the layout that it has a width. You are also causing some problematic logic when you tried binding the rectangles size to the layouts size which is supposed to be calculated based on the width of its children.
Setting the width or height property for items in a layout is often counter productive since the whole purpose of a layout is to override and control those properties, which is why it is better to set implicitWidth or Layout.preferredWidth instead when using layouts.
So what you want is either set
implicitWidth, Layout.preferredWidth or Layout.fillWidth:true on each rectangle and it should work.
-
Hi,
thanks it works now, here is the code
@import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1ApplicationWindow {
minimumHeight: 100
maximumHeight: 300
minimumWidth: 100
maximumWidth: 300
width: 300
height: 300
Rectangle {
id: rectangle
anchors.fill: parent
onWidthChanged: console.log("Rectangle Width : "+width)
ColumnLayout {
anchors.fill: parent // Doesn't work with that
//width: 100 // Works with that
onWidthChanged: console.log("Column Width : "+width)
Rectangle {
color: "red"
onWidthChanged: console.log("Rectangle 1 Width : "+width)
Layout.fillHeight: true // Doesn't extend
Layout.fillWidth: true // Doesn't extend
Layout.minimumHeight: 50
Layout.maximumHeight: 100
}
Rectangle {
color: "green"
//width: rectangle.width
height: 100
onWidthChanged: console.log("Rectangle 2 Width : "+width)
Layout.fillHeight: true // Doesn't extend
Layout.fillWidth: true // Doesn't extend
Layout.minimumHeight: 50
Layout.maximumHeight: 100
}
Rectangle {
color: "blue"
onWidthChanged: console.log("Rectangle 3 Width : "+width)
Layout.fillHeight: true // Doesn't extend
Layout.fillWidth: true // Doesn't extend
Layout.minimumHeight: 50
}
}
}
}
@
