Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. ColumnLayout problem [solved]
Forum Updated to NodeBB v4.3 + New Features

ColumnLayout problem [solved]

Scheduled Pinned Locked Moved QML and Qt Quick
3 Posts 2 Posters 1.7k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    archqt
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • J Offline
      J Offline
      Jens
      wrote on last edited by
      #2

      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.

      1 Reply Last reply
      0
      • A Offline
        A Offline
        archqt
        wrote on last edited by
        #3

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

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved