scroller implements

doric-Qt/doric/demo/DoricDemoBridge.cpp

@@ -19,9 +19,12 @@ void DoricDemoBridge::navigate(QVariant route) {
     name = "Gobang.js";
     break;
   case 2:
-    name = "SimpleDemo.js";
+    name = "LayoutDemo.js";
     break;
   case 3:
+    name = "SimpleDemo.js";
+    break;
+  case 4:
     name = "Snake.js";
     break;
   }

doric-Qt/doric/qml.qrc

@@ -10,6 +10,7 @@
     <qresource prefix="/doric/bundles">
         <file alias="Counter.js">../../doric-demo/bundle/src/Counter.js</file>
         <file alias="Gobang.js">../../doric-demo/bundle/src/Gobang.js</file>
+        <file alias="LayoutDemo.js">../../doric-demo/bundle/src/LayoutDemo.js</file>
         <file alias="SimpleDemo.js">../../doric-demo/bundle/src/SimpleDemo.js</file>
         <file alias="Snake.js">../../doric-demo/bundle/src/Snake.js</file>
     </qresource>

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
         }
     }
 }

doric-Qt/doric/shader/DoricScrollerNode.cpp

@@ -11,17 +11,14 @@ QQuickItem *DoricScrollerNode::build() {
   }
 
   QQuickItem *item = qobject_cast<QQuickItem *>(component.create());
+  this->createLayouts(item);
+
+  getLayouts()->setLayoutType(DoricLayoutType::DoricStack);
 
   item->setProperty("wrapper", QString::number((qint64)this));
   return item;
 }
 
-void DoricScrollerNode::blendSubNode(QJsonValue subProperties) {
-  if (mChildNode != nullptr) {
-    mChildNode->blend(subProperties["props"]);
-  }
-}
-
 void DoricScrollerNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
   if (name == "content") {
     if (!prop.isString()) {
@@ -43,8 +40,7 @@ void DoricScrollerNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
   }
 }
 
-void DoricScrollerNode::blend(QJsonValue jsValue) {
-  DoricViewNode::blend(jsValue);
+void DoricScrollerNode::afterBlended(QJsonValue jsValue) {
   QJsonValue contentModel = getSubModel(mChildViewId);
   if (contentModel == QJsonValue::Undefined) {
     return;
@@ -54,7 +50,7 @@ void DoricScrollerNode::blend(QJsonValue jsValue) {
   QString type = contentModel["type"].toString();
   QJsonValue props = contentModel["props"];
 
-  QQuickItem *parent = mView->childItems().at(1);
+  QQuickItem *parent = mView;
 
   if (mChildNode != nullptr) {
     if (viewId == mChildNode->getId()) {
@@ -88,3 +84,14 @@ void DoricScrollerNode::blend(QJsonValue jsValue) {
     mChildNode->getNodeView()->setParentItem(parent);
   }
 }
+
+void DoricScrollerNode::requestLayout() {
+  this->mChildNode->requestLayout();
+  getLayouts()->apply(mView->width(), mView->height());
+}
+
+void DoricScrollerNode::blendSubNode(QJsonValue subProperties) {
+  if (mChildNode != nullptr) {
+    mChildNode->blend(subProperties["props"]);
+  }
+}

doric-Qt/doric/shader/DoricScrollerNode.h

@@ -18,9 +18,11 @@ public:
 
   virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
 
-  virtual void blend(QJsonValue jsValue) override;
-
   virtual void blendSubNode(QJsonValue subProperties) override;
+
+  virtual void afterBlended(QJsonValue jsValue) override;
+
+  virtual void requestLayout() override;
 };
 
 #endif // DORICSCROLLERNODE_H