4. ColumnLayout problem [solved]

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.1

    ApplicationWindow {
    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

    0

  • 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.

    0

  • Hi,
    thanks it works now, here is the code
    @import QtQuick 2.2
    import QtQuick.Layouts 1.1
    import QtQuick.Controls 1.1

    ApplicationWindow {
    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
    }
    }
    }
    }
    @

    0
Log in to reply