Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

GridLayout equal size Text and Rectange



  • Why the following works:

    GridLayout {
            anchors.fill: parent
    
            columns: 2
            rows: 2
    
            Rectangle {
                Layout.column: 0
                Layout.columnSpan: 1
                Layout.row: 0
                Layout.rowSpan: 1
                Layout.fillHeight: true
                Layout.fillWidth: true
    
                color: "red"
            }
    
            Rectangle {
                Layout.column: 1
                Layout.columnSpan: 1
                Layout.row: 0
                Layout.rowSpan: 1
                Layout.fillHeight: true
                Layout.fillWidth: true
    
                color: "green"
            }
    
            Rectangle {
                Layout.column: 0
                Layout.columnSpan: 2
                Layout.row: 1
                Layout.rowSpan: 1
    
                Layout.fillHeight: true
                Layout.fillWidth: true
    
                color: "blue"
            }
        }
    

    But if i replace one of Rectangles with Text, the Text width occupies most of the screen, and not being equal width with the green Rectangle?

    GridLayout {
            anchors.fill: parent
    
            columns: 2
            rows: 2
    
            Text {
                text: "But Why?"
                Layout.column: 0
                Layout.columnSpan: 1
                Layout.row: 0
                Layout.rowSpan: 1
                Layout.fillHeight: true
                Layout.fillWidth: true
    
                color: "red"
            }
    
            Rectangle {
                Layout.column: 1
                Layout.columnSpan: 1
                Layout.row: 0
                Layout.rowSpan: 1
                Layout.fillHeight: true
                Layout.fillWidth: true
    
                color: "green"
            }
    
            Rectangle {
                Layout.column: 0
                Layout.columnSpan: 2
                Layout.row: 1
                Layout.rowSpan: 1
    
                Layout.fillHeight: true
                Layout.fillWidth: true
    
                color: "blue"
            }
        }
    


  • Usual resizing behavior of a grid layout….it gives a text label the space it needs to display its text, to the extent possible.
    I don’t know which behavior you want (fixed label size, cutting the text if necessary? Line wrap?).
    You may wanna check sizePolicy or share more details.



  • @AxelVienna
    I would want my grid columns equal size. The text is not big, there is no need to allocate 90% of grid space for text.
    Run this example, you will see.
    Anyway, fixed this by setting preferredWidth to 0 for text.
    But the inconsistency is annoying.


Log in to reply