Add support for Layout margins

Currently, the way to achieve this is to make a proxy item in a layout:
RowLayout {
    Item {
	Text {
	    anchors.fill: parent
	    anchors.margins: 9
	}
    }
}

using Layout margins you can now skip the proxy item and instead write:

RowLayout {
    Text {
        Layout.margins: 9
    }
}

Note that this is not the same as margins in the QLayout world, as this
only controls the margins between the layout container and its items.
This feature adds margins to each individual item inside the layout

The real logic is done by the container classes:
Layouts has the additional logic to adhere to them.

SplitView will be done in a separate commit.

Task-number: QTBUG-39724
Task-number: QTBUG-41559
Change-Id: I9c5c2a1e0ee43c1200b62009216c9f64d2875baf
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

1 files changed, 68 insertions, 0 deletions

diff --git a/tests/auto/controls/data/tst_gridlayout.qml b/tests/auto/controls/data/tst_gridlayout.qml
index e3d9a66b..ff1d2041 100644
--- a/tests/auto/controls/data/tst_gridlayout.qml
+++ b/tests/auto/controls/data/tst_gridlayout.qml
@@ -924,5 +924,73 @@ Item {
 
             layout.destroy()
         }
+
+        Component {
+            id: layout_Margins_Component
+            GridLayout {
+                columns: 2
+                rowSpacing: 0
+                columnSpacing: 0
+                Rectangle {
+                    color: "red"
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 20
+                    Layout.margins: 10
+                    Layout.leftMargin: 2
+                    Layout.topMargin: 3
+                    Layout.rightMargin: 4
+                    Layout.bottomMargin: 4
+                }
+                Rectangle {
+                    color: "red"
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 20
+                    Layout.leftMargin: 4
+                    Layout.topMargin: 5
+                    Layout.rightMargin: 6
+                    Layout.bottomMargin: 6
+                }
+                Rectangle {
+                    color: "red"
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 20
+                    Layout.leftMargin: 3
+                    Layout.topMargin: 4
+                    Layout.rightMargin: 5
+                    Layout.bottomMargin: 5
+                }
+            }
+        }
+
+        function test_Margins()
+        {
+            var layout = layout_Margins_Component.createObject(container)
+
+            compare(layout.implicitWidth, 3 + 20 + 5 + 4 + 20 + 6)
+            compare(layout.implicitHeight, 5 + 20 + 6 + 4 + 20 + 5)
+            layout.width = layout.implicitWidth
+            layout.height = layout.implicitHeight
+
+            waitForRendering(layout)
+
+            var c0 = layout.children[0]
+            var c1 = layout.children[1]
+            var c2 = layout.children[2]
+
+            compare(c0.x, 2)
+            compare(c0.y, 5)
+            compare(c1.x, 3 + 20 + 5 + 4)
+            compare(c1.y, 5)
+            compare(c2.x, 3)
+            compare(c2.y, 5 + 20 + 6 + 4)
+
+            // reset left|rightMargin. It should then use the generic "margins" property
+            c0.Layout.leftMargin = undefined
+            compare(layout.implicitWidth, 10 + 20 + 4 + 4 + 20 + 6)
+            c0.Layout.bottomMargin = undefined
+            compare(layout.implicitHeight, 3 + 20 + 10 + 4 + 20 + 5)
+
+            layout.destroy()
+        }
     }
 }