Unsolved 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.4Window
{
visible : true
width : 600
height : 250Rectangle { 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 }
}