Improve the responsive layouts example

- range of useful resizing is greater
- go from 2 to 6 columns during resizing
- don't make the sidebar huge: assume the "content" is more interesting
- required property index
- minor syntax reordering

Pick-to: 6.7 6.8
Task-number: QTBUG-119388
Change-Id: I55d684107e5fc972a1b328b12b4932a1fc85b382
Reviewed-by: Oliver Eftevaag <[email protected]>

1 files changed, 14 insertions, 10 deletions

diff --git a/examples/quick/responsivelayouts/responsivelayouts.qml b/examples/quick/responsivelayouts/responsivelayouts.qml
index f9ef99612d..c7e0c22e38 100644
--- a/examples/quick/responsivelayouts/responsivelayouts.qml
+++ b/examples/quick/responsivelayouts/responsivelayouts.qml
@@ -9,10 +9,10 @@ Window {
     id: appWindow
 
     visible: true
-    title: qsTr("Responsive layouts with LayoutItemProxy")
+    title: qsTr(`Responsive layouts with LayoutItemProxy: ${grid.columns} columns`)
 
-    minimumHeight: 500
-    minimumWidth: 250
+    minimumHeight: 320
+    minimumWidth: 240
 
     //! [item definition]
     Rectangle {
@@ -23,13 +23,16 @@ Window {
         color: "#00414A"
 
         GridLayout {
-            anchors.fill: parent
             id: grid
-            columns: 2
-            anchors.margins: 8
+            anchors {
+                fill: parent
+                margins: 8
+            }
+            columns: Math.min(Math.round(width / 130), 6)
             Repeater {
-                model: 18
-                Rectangle {
+                model: 60
+                delegate: Rectangle {
+                    required property int index
                     Layout.fillWidth: true
                     Layout.margins: 8
                     implicitWidth: 200
@@ -43,7 +46,7 @@ Window {
                         color: "#ffffff"
                         font.pointSize: 22
                         anchors.centerIn: parent
-                        text: index
+                        text: parent.index + 1
                     }
                 }
             }
@@ -126,6 +129,7 @@ Window {
         anchors.fill: parent
         ColumnLayout {
             Layout.minimumWidth: 100
+            Layout.fillWidth: true
             Layout.margins: 2
             LayoutItemProxy{ target: a }
             LayoutItemProxy{ target: b }
@@ -138,7 +142,7 @@ Window {
 
         LayoutItemProxy {
             Layout.fillHeight: true
-            Layout.fillWidth: false
+            Layout.fillWidth: true
             target: contentItem
         }
     }