scroller implements

doric-Qt/doric/resources/main.qml

@@ -12,7 +12,7 @@ ApplicationWindow {
 
         ListView {
             width: parent.width
-            model: 4
+            model: 5
             delegate: Rectangle {
                 Column {
                     anchors.centerIn: parent
@@ -24,8 +24,10 @@ ApplicationWindow {
                                 case 1:
                                     return "Gobang.js"
                                 case 2:
-                                    return "SimpleDemo.js"
+                                    return "LayoutDemo.js"
                                 case 3:
+                                    return "SimpleDemo.js"
+                                case 4:
                                     return "Snake.js"
                             }
                         }

doric-Qt/doric/resources/scroller.qml

@@ -4,74 +4,44 @@ import QtQuick.Layouts 1.15
 
 import "util.mjs" as Util
 
-Rectangle {
+ScrollView {
     property var wrapper
 
-    clip: true
-
-    property var tag: "Scroller"
-
     property var uuid: Util.uuidv4()
 
-    property int widthSpec: 0
-    property int heightSpec: 0
-    property int childrenRectWidth: childrenRect.width
-    property int childrenRectHeight: childrenRect.height
+    property var tag: "Scroller"
+
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
+    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+
+    clip: true
+
+    background: Rectangle {
+        id: bg
+        color: 'transparent'
+    }
+
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        bg.color = backgroundColor
+    }
 
     onWidthChanged: {
+        bg.implicitWidth = width
         console.log(tag, uuid + " onWidthChanged: " + this.width)
     }
 
     onHeightChanged: {
+        bg.implicitHeight = height
         console.log(tag, uuid + " onHeightChanged: " + this.height)
     }
 
-    onWidthSpecChanged: {
-        console.log(tag, uuid + " onWidthSpecChanged: " + this.widthSpec)
-        console.log(tag, uuid + " parent width: " + parent.width)
-
-        if (this.widthSpec === 2) {
-            this.width = parent.width
-            children[1].width = parent.width
-        }
-    }
-
-    onHeightSpecChanged: {
-        console.log(tag, uuid + " onHeightSpecChanged: " + this.heightSpec)
-        console.log(tag, uuid + " parent height: " + parent.height)
-
-        if (this.heightSpec === 2) {
-            this.height = parent.height
-            children[1].height = parent.height
-        }
-    }
-
-    onChildrenRectChanged: {
-        console.log(tag, uuid + " widthSpec: " + widthSpec + " heightSpec: " + heightSpec)
-        console.log(tag, uuid + " onChildrenRectChanged: " + childrenRect)
-        this.childrenRectWidth = childrenRect.width
-        this.childrenRectHeight = childrenRect.height
-
-        if (this.widthSpec === 1) {
-            this.width = childrenRectWidth
-        }
-
-        if (this.heightSpec === 1) {
-            this.height = childrenRectHeight
-        }
-    }
-
-    color: 'transparent'
-
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            console.log(tag, uuid + " wrapper: " + wrapper)
-            mouseAreaBridge.onClick(wrapper)
-        }
-    }
-
-    ScrollView {
-
-    }
+//    MouseArea {
+//        anchors.fill: parent
+//        onClicked: {
+//            console.log(tag, uuid + " wrapper: " + wrapper)
+//            mouseAreaBridge.onClick(wrapper)
+//        }
+//    }
 }

doric-Qt/doric/resources/test-layout.qml

@@ -8,32 +8,53 @@ ApplicationWindow {
     height: 800
     title: qsTr("Scroll")
 
-    Rectangle {
-        color: 'red'
-        width: childrenRect.width
-        height: childrenRect.height
+    ScrollView {
+        property var wrapper
 
-        ColumnLayout {
-            property int gravity: 0
-            onGravityChanged: {
-                console.log(children[0].Layout.alignment)
-                children[0].Layout.alignment = 1
+        width: 200
+        height: 200
+
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+
+        clip: true
+
+//        property var uuid: Util.uuidv4()
+
+        property var tag: "Scroller"
+
+        background: Rectangle {
+            id: bg
+            color: 'red'
+        }
+
+        property var backgroundColor
+
+        onBackgroundColorChanged: {
+            bg.color = backgroundColor
+        }
+
+        onWidthChanged: {
+            bg.implicitWidth = width
+            console.log(tag, uuid + " onWidthChanged: " + this.width)
+        }
+
+        onHeightChanged: {
+            bg.implicitHeight = height
+            console.log(tag, uuid + " onHeightChanged: " + this.height)
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                console.log(tag, uuid + " wrapper: " + wrapper)
+                mouseAreaBridge.onClick(wrapper)
             }
+        }
 
-            spacing: 0
-            height: 600
-
-            Rectangle {
-                width: 100
-                height: 100
-                color: 'black'
-            }
-
-            Rectangle {
-                width: 100
-                height: 100
-                color: 'yellow'
-            }
+        Label {
+            text: "ABC"
+            font.pixelSize: 224
         }
     }
 }