Gallery: make most pages scrollable

Add a ScrollablePage type, which provides the scrolling behavior. The
available space can be quite limited, especially in landscape on low
resolution devices.

Change-Id: I4d2911aa6bfa6d8573a1385b5a06ef2cf3e2e548
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

1 files changed, 24 insertions, 33 deletions

diff --git a/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml b/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml
index 3e08555b..ee8b14dc 100644
--- a/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml
+++ b/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml
@@ -41,46 +41,37 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.0
 
-Flickable {
-    id: flickable
-    contentHeight: pane.height
+ScrollablePage {
+    id: page
 
-    Pane {
-        id: pane
+    Column {
+        spacing: 40
         width: parent.width
 
-        Column {
-            id: column
-            spacing: 40
+        Label {
             width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "CheckBox presents an option button that can be toggled on or off. "
+                + "Check boxes are typically used to select one or more options from a set of options."
+        }
 
-            Label {
-                width: parent.width
-                wrapMode: Label.Wrap
-                horizontalAlignment: Qt.AlignHCenter
-                text: "CheckBox presents an option button that can be toggled on or off. "
-                    + "Check boxes are typically used to select one or more options from a set of options."
-            }
-
-            Column {
-                spacing: 20
-                anchors.horizontalCenter: parent.horizontalCenter
+        Column {
+            spacing: 20
+            anchors.horizontalCenter: parent.horizontalCenter
 
-                CheckBox {
-                    text: "First"
-                    checked: true
-                }
-                CheckBox {
-                    text: "Second"
-                }
-                CheckBox {
-                    text: "Third"
-                    checked: true
-                    enabled: false
-                }
+            CheckBox {
+                text: "First"
+                checked: true
+            }
+            CheckBox {
+                text: "Second"
+            }
+            CheckBox {
+                text: "Third"
+                checked: true
+                enabled: false
             }
         }
     }
-
-    ScrollIndicator.vertical: ScrollIndicator { }
 }