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. GridLayout Layout.rowSpan and uniformCellHeights
Forum Updated to NodeBB v4.3 + New Features

GridLayout Layout.rowSpan and uniformCellHeights

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
3 Posts 2 Posters 287 Views 2 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.
  • P Offline
    P Offline
    petero3
    wrote on last edited by
    #1
    • Qt 6.7.2 Linux
    • https://doc.qt.io/qt-6/qml-qtquick-layouts-layout.html#rowSpan-attached-prop

    Trying to use GridLayout Layout.rowSpan so that the yellow rectangles are one row high and the cyan rectangles are two rows high.

    But this does not always work?

    It works in this case:

    4226d724-be81-4488-b8b4-665d4778c633-image.png

    import QtQuick
    import QtQuick.Layouts
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Hello World")
    
        GridLayout {
            anchors.fill: parent
            rows: 4
            columns: 2
            uniformCellWidths: true
            uniformCellHeights: true
    
            Rectangle {
                color: "cyan"
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.rowSpan: 2
                Layout.row: 0
                Layout.column: 0
            }
            Rectangle {
                color: "cyan"
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.rowSpan: 2
                Layout.row: 2
                Layout.column: 0
            }
    
            Rectangle {
                color: "yellow"
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.rowSpan: 1
                Layout.row: 0
                Layout.column: 1
            }
            Rectangle {
                color: "yellow"
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.rowSpan: 1
                Layout.row: 1
                Layout.column: 1
            }
            Rectangle {
                color: "yellow"
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.rowSpan: 1
                Layout.row: 2
                Layout.column: 1
            }
        }
    }
    

    But not in this case. Without the third 1 row yellow rectangle, the second cyan rectangle is 1 row high instead of 2?

    e33e92dc-9c99-460b-87d9-0cbf78c1150d-image.png

    import QtQuick
    import QtQuick.Layouts
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Hello World")
    
        GridLayout {
            anchors.fill: parent
            rows: 4
            columns: 2
            uniformCellWidths: true
            uniformCellHeights: true
    
            Rectangle {
                color: "cyan"
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.rowSpan: 2
                Layout.row: 0
                Layout.column: 0
            }
            Rectangle {
                color: "cyan"
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.rowSpan: 2
                Layout.row: 2
                Layout.column: 0
            }
    
            Rectangle {
                color: "yellow"
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.rowSpan: 1
                Layout.row: 0
                Layout.column: 1
            }
            Rectangle {
                color: "yellow"
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.rowSpan: 1
                Layout.row: 1
                Layout.column: 1
            }
            /*
            Rectangle {
                color: "yellow"
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.rowSpan: 1
                Layout.row: 2
                Layout.column: 1
            }
            */
        }
    }
    

    Thank you
    -- Peter

    1 Reply Last reply
    0
    • A Offline
      A Offline
      ankou29666
      wrote on last edited by ankou29666
      #2

      I have the exact same erratic behavior on MacOS Sonoma. Not only the second cyan rectangle is one row high instead of two, but there's only three rows in total when there should be four. Especially when you explicitly declare four rows.
      Commenting the second yellow rectangle instead gives me the intended behavior.

      Adding a Component.onCompleted: console.log ("(id) : " + width + "x" + height) for each rectangle displays

      qml: 2 : 318x237
      qml: 1 : 318x238
      

      in the first case and

      qml: 2 : 318x157
      qml: 1 : 318x318
      

      in the second case. The layout is clearly divided in three rows instead of four.

      From the documentation of GridLayout, uniformCellHeights and uniformCellWidths are still in tech preview

      Note: This API is considered tech preview and may change or be removed in future versions of Qt.

      My advice is report the bug to Qt

      P 1 Reply Last reply
      1
      • A ankou29666

        I have the exact same erratic behavior on MacOS Sonoma. Not only the second cyan rectangle is one row high instead of two, but there's only three rows in total when there should be four. Especially when you explicitly declare four rows.
        Commenting the second yellow rectangle instead gives me the intended behavior.

        Adding a Component.onCompleted: console.log ("(id) : " + width + "x" + height) for each rectangle displays

        qml: 2 : 318x237
        qml: 1 : 318x238
        

        in the first case and

        qml: 2 : 318x157
        qml: 1 : 318x318
        

        in the second case. The layout is clearly divided in three rows instead of four.

        From the documentation of GridLayout, uniformCellHeights and uniformCellWidths are still in tech preview

        Note: This API is considered tech preview and may change or be removed in future versions of Qt.

        My advice is report the bug to Qt

        P Offline
        P Offline
        petero3
        wrote on last edited by
        #3

        @ankou29666

        Thank you, will contact support.

        Workaround meanwhile is to implement my own GridLayout based on the following:
        https://stackoverflow.com/a/61804867
        Surprisingly simple and effective.
        I then added support for rowSpacing and columnSpacing to that.

        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