complete fit most & just with children rect & parent width, height

doric-Qt/doric/main.cpp

@@ -11,6 +11,9 @@ int main(int argc, char *argv[]) {
   QGuiApplication app(argc, argv);
 
   QQmlApplicationEngine engine;
+  qmlRegisterType<FlexLayoutService>("pub.doric.widget", 1, 0,
+                                     "FlexLayoutService");
+  //  const QUrl url(QStringLiteral("qrc:/doric/qml/test-layout.qml"));
   const QUrl url(QStringLiteral("qrc:/main.qml"));
   QObject::connect(
       &engine, &QQmlApplicationEngine::objectCreated, &app,
@@ -20,12 +23,11 @@ int main(int argc, char *argv[]) {
       },
       Qt::QueuedConnection);
 
-  DoricDemoBridge *demoBridge = new DoricDemoBridge();
   auto context = engine.rootContext();
+  DoricDemoBridge *demoBridge = new DoricDemoBridge();
   context->setContextProperty("demoBridge", demoBridge);
+
   engine.load(url);
 
-  qmlRegisterType<FlexLayoutService>("pub.doric.widget", 1, 0,
-                                     "FlexLayoutService");
   return app.exec();
 }

doric-Qt/doric/qml.qrc

@@ -1,7 +1,7 @@
 <RCC>
     <qresource prefix="/">
-        <file alias="main.qml">./resources/main.qml</file>
+        <file alias="main.qml">resources/main.qml</file>
-        <file alias="qtquickcontrols2.conf">./resources/qtquickcontrols2.conf</file>
+        <file alias="qtquickcontrols2.conf">resources/qtquickcontrols2.conf</file>
     </qresource>
     <qresource prefix="/doric">
         <file alias="doric-sandbox.es5.js">../../doric-js/bundle/doric-sandbox.es5.js</file>
@@ -12,12 +12,14 @@
         <file alias="Snake.es5.js">../../doric-demo/bundle/src/Snake.es5.js</file>
     </qresource>
     <qresource prefix="/doric/qml">
-        <file alias="Flex.qml">./resources/Flex.qml</file>
+        <file alias="Flex.qml">resources/Flex.qml</file>
-        <file alias="view.qml">./resources/view.qml</file>
+        <file alias="view.qml">resources/view.qml</file>
-        <file alias="panel.qml">./resources/panel.qml</file>
+        <file alias="panel.qml">resources/panel.qml</file>
-        <file alias="stack.qml">./resources/stack.qml</file>
+        <file alias="stack.qml">resources/stack.qml</file>
-        <file alias="vlayout.qml">./resources/vlayout.qml</file>
+        <file alias="vlayout.qml">resources/vlayout.qml</file>
-        <file alias="hlayout.qml">./resources/hlayout.qml</file>
+        <file alias="hlayout.qml">resources/hlayout.qml</file>
-        <file alias="text.qml">./resources/text.qml</file>
+        <file alias="text.qml">resources/text.qml</file>
+        <file alias="util.mjs">resources/util.mjs</file>
+        <file>test-layout.qml</file>
     </qresource>
 </RCC>

doric-Qt/doric/resources/hlayout.qml

@@ -1,9 +1,61 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
 
-Flex {
+import "util.mjs" as Util
-    flexDirection: "row"
+
-    justifyContent: "flexStart"
+Rectangle {
-    alignItems: "flexStart"
+    property var uuid: Util.uuidv4()
-    alignContent: "flexStart"
+    property int widthSpec: 0
+    property int heightSpec: 0
+    property int childrenRectWidth: childrenRect.width
+    property int childrenRectHeight: childrenRect.height
+
+    property var tag: "HLayout"
+
+    onWidthChanged: () => {
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+    }
+
+    onHeightChanged: () => {
+        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
+        }
+    }
+
+    onHeightSpecChanged: () => {
+        console.log(tag, uuid + " onHeightSpecChanged: " + this.heightSpec)
+        console.log(tag, uuid + " parent height: " + parent.height)
+
+        if (this.heightSpec === 2) {
+            this.height = parent.height
+        }
+    }
+
+    onChildrenRectChanged: () => {
+        console.log(tag, uuid + " widthSpec: " + widthSpec + " heightSpec: " + heightSpec)
+        console.log(tag, uuid + " childrenRect: " + 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'
+
+    RowLayout {
+        spacing: 0
+    }
 }

doric-Qt/doric/resources/panel.qml

@@ -1,12 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.5
 
-Flex {
+Rectangle {
-    flexDirection: "row"
-    justifyContent: "flexStart"
-    alignItems: "flexStart"
-    alignContent: "flexStart"
-    flexWrap: "noWrap"
-
     color: 'cyan'
 }

doric-Qt/doric/resources/stack.qml

@@ -1,6 +1,57 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
 
-Flex {
+import "util.mjs" as Util
 
+Rectangle {
+    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: "Stack"
+
+    onWidthChanged: () => {
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+    }
+
+    onHeightChanged: () => {
+        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
+        }
+    }
+
+    onHeightSpecChanged: () => {
+        console.log(tag, uuid + " onHeightSpecChanged: " + this.heightSpec)
+        console.log(tag, uuid + " parent height: " + parent.height)
+
+        if (this.heightSpec === 2) {
+            this.height = parent.height
+        }
+    }
+
+    onChildrenRectChanged: () => {
+        console.log(tag, uuid + " widthSpec: " + widthSpec + " heightSpec: " + heightSpec)
+        console.log(tag, uuid + " childrenRect: " + 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'
 }

doric-Qt/doric/resources/text.qml

@@ -1,7 +1,9 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.5
 
-Flex {
+Rectangle {
+    color: 'transparent'
+
     Text {
 
     }

doric-Qt/doric/resources/util.mjs

@@ -0,0 +1,8 @@
+// util.mjs
+export function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        var r = Math.random() * 16 | 0,
+            v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+}

doric-Qt/doric/resources/vlayout.qml

@@ -1,10 +1,61 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
 
-Flex {
+import "util.mjs" as Util
-    flexDirection: "column"
+
-    justifyContent: "flexStart"
+Rectangle {
-    alignItems: "flexStart"
+    property var uuid: Util.uuidv4()
-    alignContent: "flexStart"
+    property int widthSpec: 0
+    property int heightSpec: 0
+    property int childrenRectWidth: childrenRect.width
+    property int childrenRectHeight: childrenRect.height
+
+    property var tag: "VLayout"
+
+    onWidthChanged: () => {
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+    }
+
+    onHeightChanged: () => {
+        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
+        }
+    }
+
+    onHeightSpecChanged: () => {
+        console.log(tag, uuid + " onHeightSpecChanged: " + this.heightSpec)
+        console.log(tag, uuid + " parent height: " + parent.height)
+
+        if (this.heightSpec === 2) {
+            this.height = parent.height
+        }
+    }
+
+    onChildrenRectChanged: () => {
+        console.log(tag, uuid + " widthSpec: " + widthSpec + " heightSpec: " + heightSpec)
+        console.log(tag, uuid + " childrenRect: " + 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'
+
+    ColumnLayout {
+        spacing: 0
+    }
 }
-

doric-Qt/doric/shader/DoricGroupNode.cpp

@@ -23,6 +23,12 @@ void DoricGroupNode::blend(QJSValue jsValue) {
 }
 
 void DoricGroupNode::configChildNode() {
+  QQuickItem *parent = nullptr;
+  if (mType.isEmpty() || mType == "Stack") {
+    parent = mView;
+  } else {
+    parent = mView->childItems().at(0);
+  }
   for (int idx = 0; idx < mChildViewIds.size(); idx++) {
     QString id = mChildViewIds.at(idx);
     QJSValue model = getSubModel(id);
@@ -53,17 +59,18 @@ void DoricGroupNode::configChildNode() {
             if (newNode != nullptr) {
               newNode->setId(id);
               newNode->init(this);
-              newNode->blend(model.property("props"));
 
               if (idx >= mChildNodes.size()) {
                 mChildNodes.append(newNode);
-                newNode->getNodeView()->setParentItem(mView);
+                newNode->getNodeView()->setParentItem(parent);
               } else {
                 mChildNodes.insert(idx, newNode);
-                newNode->getNodeView()->setParentItem(mView);
+                newNode->getNodeView()->setParentItem(parent);
                 newNode->getNodeView()->stackBefore(
-                    mView->childItems().at(idx));
+                    parent->childItems().at(idx));
               }
+
+              newNode->blend(model.property("props"));
             }
           }
         } else {
@@ -80,24 +87,25 @@ void DoricGroupNode::configChildNode() {
           if (position >= 0) {
             // Found swap idx,position
             mChildNodes.swapItemsAt(position, idx);
-            mView->childItems().swapItemsAt(position, idx);
+            parent->childItems().swapItemsAt(position, idx);
           } else {
             // Not found,insert
             DoricViewNode *newNode = DoricViewNode::create(getContext(), type);
             if (newNode != nullptr) {
               newNode->setId(id);
               newNode->init(this);
-              newNode->blend(model.property("props"));
 
               if (idx >= mChildNodes.size()) {
                 mChildNodes.append(newNode);
-                newNode->getNodeView()->setParentItem(mView);
+                newNode->getNodeView()->setParentItem(parent);
               } else {
                 mChildNodes.insert(idx, newNode);
-                newNode->getNodeView()->setParentItem(mView);
+                newNode->getNodeView()->setParentItem(parent);
                 newNode->getNodeView()->stackBefore(
-                    mView->childItems().at(idx));
+                    parent->childItems().at(idx));
               }
+
+              newNode->blend(model.property("props"));
             }
           }
         }
@@ -108,16 +116,17 @@ void DoricGroupNode::configChildNode() {
       if (newNode != nullptr) {
         newNode->setId(id);
         newNode->init(this);
-        newNode->blend(model.property("props"));
 
         if (idx >= mChildNodes.size()) {
           mChildNodes.append(newNode);
-          newNode->getNodeView()->setParentItem(mView);
+          newNode->getNodeView()->setParentItem(parent);
         } else {
           mChildNodes.insert(idx, newNode);
-          newNode->getNodeView()->setParentItem(mView);
+          newNode->getNodeView()->setParentItem(parent);
-          newNode->getNodeView()->stackBefore(mView->childItems().at(idx));
+          newNode->getNodeView()->stackBefore(parent->childItems().at(idx));
         }
+
+        newNode->blend(model.property("props"));
       }
     }
   }

doric-Qt/doric/shader/DoricHLayoutNode.cpp

@@ -16,7 +16,7 @@ QQuickItem *DoricHLayoutNode::build() {
 
 void DoricHLayoutNode::blend(QQuickItem *view, QString name, QJSValue prop) {
   if (name == "space") {
-    view->setProperty("spacing", prop.toInt());
+    view->childItems().at(0)->setProperty("spacing", prop.toInt());
   } else if (name == "gravity") {
     switch (prop.toInt()) {
     case 1:

doric-Qt/doric/shader/DoricVLayoutNode.cpp

@@ -16,7 +16,7 @@ QQuickItem *DoricVLayoutNode::build() {
 
 void DoricVLayoutNode::blend(QQuickItem *view, QString name, QJSValue prop) {
   if (name == "space") {
-    view->setProperty("spacing", prop.toInt());
+    view->childItems().at(0)->setProperty("spacing", prop.toInt());
   } else if (name == "gravity") {
     switch (prop.toInt()) {
     case 1:

doric-Qt/doric/shader/DoricViewNode.cpp

@@ -5,34 +5,36 @@
 #include "DoricViewNode.h"
 
 void DoricViewNode::blendLayoutConfig(QJSValue jsObject) {
+  this->mLayoutConfig = jsObject;
+
   QJSValue margin = jsObject.property("margin");
   QJSValue widthSpec = jsObject.property("widthSpec");
   QJSValue heightSpec = jsObject.property("heightSpec");
 
   if (widthSpec.isNumber()) {
     switch (widthSpec.toInt()) {
+    case 0:
+      mView->setProperty("widthSpec", 0);
+      break;
     case 1:
-      qCritical() << 1;
+      mView->setProperty("widthSpec", 1);
       break;
     case 2:
-      qCritical() << 2;
+      mView->setProperty("widthSpec", 2);
-      break;
-    default:
-      qCritical() << "default";
       break;
     }
   }
 
   if (heightSpec.isNumber()) {
     switch (heightSpec.toInt()) {
+    case 0:
+      mView->setProperty("heightSpec", 0);
+      break;
     case 1:
-      qCritical() << 1;
+      mView->setProperty("heightSpec", 1);
       break;
     case 2:
-      qCritical() << 2;
+      mView->setProperty("heightSpec", 2);
-      break;
-    default:
-      qCritical() << "default";
       break;
     }
   }
@@ -80,12 +82,30 @@ void DoricViewNode::blend(QQuickItem *view, QString name, QJSValue prop) {
     if (!prop.isNumber()) {
       return;
     }
+    if (this->mLayoutConfig.isUndefined()) {
       view->setWidth(prop.toInt());
+    } else {
+      QJSValue widthSpec = this->mLayoutConfig.property("widthSpec");
+      if (widthSpec.isNumber()) {
+        if (widthSpec.toInt() == 0) {
+          view->setWidth(prop.toInt());
+        }
+      }
+    }
   } else if (name == "height") {
     if (!prop.isNumber()) {
       return;
     }
+    if (this->mLayoutConfig.isUndefined()) {
       view->setHeight(prop.toInt());
+    } else {
+      QJSValue heightSpec = this->mLayoutConfig.property("heightSpec");
+      if (heightSpec.isNumber()) {
+        if (heightSpec.toInt() == 0) {
+          view->setHeight(prop.toInt());
+        }
+      }
+    }
   } else if (name == "backgroundColor") {
     QString color = DoricUtils::doricColor(prop.toNumber()).name();
     view->setProperty("color", color);
@@ -95,6 +115,8 @@ void DoricViewNode::blend(QQuickItem *view, QString name, QJSValue prop) {
     view->setProperty("y", prop.toInt());
   } else if (name == "corners") {
     view->setProperty("radius", prop.toInt());
+  } else if (name == "layoutConfig") {
+
   } else {
     qCritical() << name << ": " << prop.toString();
   }

doric-Qt/doric/shader/DoricViewNode.h

@@ -20,9 +20,12 @@ protected:
 
 private:
   QString mId;
-  QString mType;
+
+  QJSValue mLayoutConfig;
 
 public:
+  QString mType;
+
   using DoricContextHolder::DoricContextHolder;
 
   void init(DoricSuperNode *superNode);

doric-Qt/doric/test-layout.qml

@@ -0,0 +1,54 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
+
+ApplicationWindow {
+    visible: true
+    width: 450
+    height: 800
+    title: qsTr("Scroll")
+
+    Rectangle {
+        color: 'red'
+        width: childrenRect.width
+        height: childrenRect.height
+
+        RowLayout {
+            spacing: 0
+            Rectangle {
+                width: 100
+                height: 100
+                color: 'black'
+                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+            }
+            Rectangle {
+                Layout.topMargin: 30
+                width: 100
+                height: 100
+                color: 'yellow'
+            }
+            Rectangle {
+                Layout.topMargin: 0
+                width: 100
+                height: 100
+                color: 'black'
+                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+            }
+            Rectangle {
+                width: 100
+                height: 100
+                color: 'yellow'
+            }
+            Rectangle {
+                width: 100
+                height: 100
+                color: 'black'
+            }
+            Rectangle {
+                width: 100
+                height: 100
+                color: 'yellow'
+            }
+        }
+    }
+}