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

GridLayout as a child of ColumnLayout



  • Hi Forum,
    There is something I do not understand with the ColumnLayout hierarchy.
    If I put a GridLayout in a ColumnLayout, the display behavior becomes difficult to understand. I have attached image and QML code (with some comments in it).
    If anyone could explain to me the right method to do what is expected, that would be nice. I probably misunderstood something in cascaded layouts.
    Thanks a lot.
    Regards,
    David.

    ==== QML code can't be uploaded ====
    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.4

    Window
    {
    visible : true
    width : 600
    height : 250

    Rectangle
    {
        id                                              : backgroundId
        color                                           : "darkblue"
        anchors.fill                                    : parent
    
        // Beginning of ColumnLayout
        ColumnLayout
        {
            id                                          : columnLayoutId
            anchors.fill                                : parent
            anchors.margins                             : 20
    
            // Beginning of GridLayout
            GridLayout
            {
                id                                      : gridLayoutId
                columns                                 : 2
    
    
                // **** SOLUTION 1 ****
                // Works but generate a warning :
                // QML GridLayout: Detected anchors on an item that is managed by a layout. This is undefined behavior; use Layout.alignment instead.
                // Yet we do not want the GridLayout to cover the ColumnLayout space
                // This probably means that if we add items to the gridLayout, they will end up under the other items of the ColumnLayout
                anchors.fill                            : parent
    
    
                // **** SOLUTION 2 ****
                // Doesn't work, the GridLayout width doesn't take the ColumnLayout width
                // Does this mean that there is confusion between the Layout of GridLayout and that of ColumnLayout ?
                //Layout.fillWidth                        : true
    
    
                RoundButton
                {
                    radius                              : 10
                    id                                  : button1Id
                    text                                : "Button 1..."
    
                    // If we specify implicit sizes, it works but not if we use the Layout
                    // In that case, I imagine the Layout references the GridLayout one, but I am wondering !
                    // But if I enable the "SOLUTION 2", a warning is displayed : 'QML Rectangle: Binding loop detected for property "implicitWidth"'
                    implicitHeight                      : 50
                    implicitWidth                       : parent.width/2
                    //Layout.fillWidth: true
                }
    
                Rectangle
                {
                    radius                              : 10
                    color                               : "green"
    
                    // If we specify implicit sizes, it works but not if we use the Layout
                    implicitHeight                      : 50
                    implicitWidth                       : parent.width/2
                    //Layout.fillWidth: true
    
                    Label
                    {
                        text                            : "Label2"
                        color                           : "black"
                        anchors.centerIn                : parent
                    }
                }
    
                Rectangle
                {
                    radius                              : 10
                    color                               : "yellow"
    
                    // If we specify implicit sizes, it works but not if we use the Layout
                    implicitHeight                      : 50
                    implicitWidth                       : parent.width/2
                    //Layout.fillWidth: true
    
                    Label
                    {
                        text                            : "Label3"
                        color                           : "black"
                        anchors.centerIn                : parent
                    }
                }
            }
            // End of GridLayout
    
            // Spacer
            Item
            {
                implicitHeight                          : 5
                Layout.fillWidth                        : true
            }
    
            Rectangle
            {
                radius                                  : 10
                color                                   : "red"
                implicitWidth                           : parent.width
                implicitHeight                          : 50
    
                Label
                {
                    text                                : "Label4"
                    color                               : "black"
                    anchors.centerIn                : parent
                }
            }
        }
        // End of ColumnLayout
    }
    

    }

    2_1556446742637_Solution2.PNG 1_1556446742637_Solution1_withoutImplicitSize.PNG 0_1556446742637_Solution1_expected_rendering.PNG


Log in to reply