split project with app & doric module

doric-Qt/example/doric/shader/DoricGroupNode.cpp

@@ -0,0 +1,155 @@
+#include "DoricGroupNode.h"
+
+void DoricGroupNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
+  if (name == "children") {
+    mChildViewIds.clear();
+    if (prop.isArray()) {
+      QJsonArray array = prop.toArray();
+      const int length = array.size();
+      for (int i = 0; i < length; ++i) {
+        QJsonValue value = array.at(i);
+        if (value.isString()) {
+          mChildViewIds.append(value.toString());
+        }
+      }
+    }
+  } else {
+    DoricSuperNode::blend(view, name, prop);
+  }
+}
+
+void DoricGroupNode::blend(QJsonValue jsValue) {
+  DoricViewNode::blend(jsValue);
+}
+
+void DoricGroupNode::afterBlended(QJsonValue props) { configChildNode(); }
+
+void DoricGroupNode::configChildNode() {
+  QQuickItem *parent = mView;
+
+  for (int idx = 0; idx < mChildViewIds.size(); idx++) {
+    QString id = mChildViewIds.at(idx);
+    QJsonValue model = getSubModel(id);
+    if (model.isUndefined()) {
+      DoricRegistry *registry = getContext()->getDriver()->getRegistry();
+      qCritical() << "model.isUndefined()";
+      continue;
+    }
+    QString type = model["type"].toString();
+    if (idx < mChildNodes.size()) {
+      DoricViewNode *oldNode = mChildNodes.at(idx);
+      if (id == oldNode->getId()) {
+        // The same, skip
+      } else {
+        if (mReusable) {
+          if (oldNode->getType() == type) {
+            // Same type,can be reused
+            oldNode->setId(id);
+            oldNode->blend(model["props"]);
+          } else {
+            // Replace this view
+            mChildNodes.removeAt(idx);
+            oldNode->getNodeView()->setParent(nullptr);
+            oldNode->getNodeView()->setParentItem(nullptr);
+            oldNode->getNodeView()->deleteLater();
+
+            DoricViewNode *newNode = DoricViewNode::create(getContext(), type);
+            if (newNode != nullptr) {
+              newNode->setId(id);
+              newNode->init(this);
+
+              if (idx >= mChildNodes.size()) {
+                mChildNodes.append(newNode);
+                newNode->getNodeView()->setParentItem(parent);
+              } else {
+                mChildNodes.insert(idx, newNode);
+                newNode->getNodeView()->setParentItem(parent);
+                newNode->getNodeView()->stackBefore(
+                    parent->childItems().at(idx));
+              }
+
+              newNode->blend(model["props"]);
+            }
+          }
+        } else {
+          // Find in remain nodes
+          int position = -1;
+          for (int start = idx + 1; start < mChildNodes.size(); start++) {
+            DoricViewNode *node = mChildNodes.at(start);
+            if (id == node->getId()) {
+              // Found
+              position = start;
+              break;
+            }
+          }
+          if (position >= 0) {
+            // Found swap idx,position
+            mChildNodes.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);
+
+              if (idx >= mChildNodes.size()) {
+                mChildNodes.append(newNode);
+                newNode->getNodeView()->setParentItem(parent);
+              } else {
+                mChildNodes.insert(idx, newNode);
+                newNode->getNodeView()->setParentItem(parent);
+                newNode->getNodeView()->stackBefore(
+                    parent->childItems().at(idx));
+              }
+
+              newNode->blend(model["props"]);
+            }
+          }
+        }
+      }
+    } else {
+      // Insert
+      DoricViewNode *newNode = DoricViewNode::create(getContext(), type);
+      if (newNode != nullptr) {
+        newNode->setId(id);
+        newNode->init(this);
+
+        if (idx >= mChildNodes.size()) {
+          mChildNodes.append(newNode);
+          newNode->getNodeView()->setParentItem(parent);
+        } else {
+          mChildNodes.insert(idx, newNode);
+          newNode->getNodeView()->setParentItem(parent);
+          newNode->getNodeView()->stackBefore(parent->childItems().at(idx));
+        }
+
+        newNode->blend(model["props"]);
+      }
+    }
+  }
+
+  int size = mChildNodes.size();
+  for (int idx = mChildViewIds.size(); idx < size; idx++) {
+    DoricViewNode *viewNode = mChildNodes.at(mChildViewIds.size());
+    mChildNodes.removeAt(mChildViewIds.size());
+    viewNode->getNodeView()->setParent(nullptr);
+    viewNode->getNodeView()->setParentItem(nullptr);
+    viewNode->getNodeView()->deleteLater();
+  }
+}
+
+void DoricGroupNode::blendSubNode(QJsonValue subProperties) {
+  QString subNodeId = subProperties["id"].toString();
+  for (DoricViewNode *node : mChildNodes) {
+    if (subNodeId == node->getId()) {
+      node->blend(subProperties["props"]);
+      break;
+    }
+  }
+}
+
+void DoricGroupNode::requestLayout() {
+  DoricSuperNode::requestLayout();
+  foreach (DoricViewNode *node, this->mChildNodes) { node->requestLayout(); }
+}

doric-Qt/example/doric/shader/DoricGroupNode.h

@@ -0,0 +1,28 @@
+#ifndef DORICGROUPNODE_H
+#define DORICGROUPNODE_H
+
+#include "DoricSuperNode.h"
+
+class DoricGroupNode : public DoricSuperNode {
+public:
+  using DoricSuperNode::DoricSuperNode;
+
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
+
+  virtual void blend(QJsonValue jsValue) override;
+
+protected:
+  QList<DoricViewNode *> mChildNodes;
+
+  QList<QString> mChildViewIds;
+
+  void configChildNode();
+
+  virtual void blendSubNode(QJsonValue subProperties) override;
+
+  virtual void afterBlended(QJsonValue props) override;
+
+  virtual void requestLayout() override;
+};
+
+#endif // DORICGROUPNODE_H

doric-Qt/example/doric/shader/DoricHLayoutNode.cpp

@@ -0,0 +1,31 @@
+#include "DoricHLayoutNode.h"
+
+QQuickItem *DoricHLayoutNode::build() {
+  QQmlComponent component(getContext()->getQmlEngine());
+
+  const QUrl url(QStringLiteral("qrc:/doric/qml/hlayout.qml"));
+  component.loadUrl(url);
+
+  if (component.isError()) {
+    qCritical() << component.errorString();
+  }
+
+  QQuickItem *item = qobject_cast<QQuickItem *>(component.create());
+  this->createLayouts(item);
+
+  getLayouts()->setLayoutType(DoricLayoutType::DoricHLayout);
+
+  item->setProperty("wrapper", QString::number((qint64)this));
+  return item;
+}
+
+void DoricHLayoutNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
+  QQuickItem *container = view;
+  if (name == "space") {
+    getLayouts()->setSpacing(prop.toDouble());
+  } else if (name == "gravity") {
+    getLayouts()->setGravity(prop.toInt());
+  } else {
+    DoricGroupNode::blend(view, name, prop);
+  }
+}

doric-Qt/example/doric/shader/DoricHLayoutNode.h

@@ -0,0 +1,16 @@
+#ifndef DORICHLAYOUTNODE_H
+#define DORICHLAYOUTNODE_H
+
+
+#include "DoricGroupNode.h"
+
+class DoricHLayoutNode : public DoricGroupNode {
+public:
+  using DoricGroupNode::DoricGroupNode;
+
+  QQuickItem *build() override;
+
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
+};
+
+#endif // DORICHLAYOUTNODE_H

doric-Qt/example/doric/shader/DoricImageNode.cpp

@@ -0,0 +1,79 @@
+#include "DoricImageNode.h"
+#include "DoricSuperNode.h"
+
+#include "../utils/DoricUtils.h"
+
+#include <QQuickItem>
+
+QQuickItem *DoricImageNode::build() {
+  QQmlComponent component(getContext()->getQmlEngine());
+
+  const QUrl url(QStringLiteral("qrc:/doric/qml/image.qml"));
+  component.loadUrl(url);
+
+  if (component.isError()) {
+    qCritical() << component.errorString();
+  }
+
+  QQuickItem *item = qobject_cast<QQuickItem *>(component.create());
+  this->createLayouts(item);
+
+  item->setProperty("wrapper", QString::number((qint64)this));
+  return item;
+}
+
+void DoricImageNode::blend(QJsonValue jsValue) {
+  if (jsValue.toObject().contains("scaleType"))
+    this->contentMode = jsValue["scaleType"].toInt();
+  if (jsValue.toObject().contains("placeHolderColor"))
+    this->placeHolderColor = jsValue["placeHolderColor"].toInt();
+  if (jsValue.toObject().contains("errorColor"))
+    this->errorColor = jsValue["errorColor"].toInt();
+  if (jsValue.toObject().contains("loadCallback"))
+    this->loadCallbackId = jsValue["loadCallback"].toString();
+
+  DoricViewNode::blend(jsValue);
+}
+
+void DoricImageNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
+  QQuickItem *container = view;
+  if (name == "imageUrl") {
+    container->setProperty("fillMode", this->contentMode);
+    container->setProperty("source", prop.toString());
+  } else if (name == "imageBase64") {
+    container->setProperty("fillMode", this->contentMode);
+    container->setProperty("source", prop.toString());
+  } else if (name == "isBlur") {
+    if (prop.toBool()) {
+      container->setProperty("isBlur", prop.toBool());
+    }
+  } else {
+    DoricViewNode::blend(view, name, prop);
+  }
+}
+
+void DoricImageNode::onReady() {
+  if (!this->loadCallbackId.isEmpty()) {
+    QVariantList args;
+
+    QMap<QString, QVariant> map;
+    map.insert("width", mView->width());
+    map.insert("height", mView->height());
+
+    args.append(QVariant::fromValue(map));
+    this->callJSResponse(this->loadCallbackId, args);
+  }
+
+  DoricSuperNode *node = this->mSuperNode;
+  while (node->mSuperNode != nullptr) {
+    node = node->mSuperNode;
+  }
+  node->requestLayout();
+}
+
+void DoricImageNode::onError() {
+  if (!this->loadCallbackId.isEmpty()) {
+    QVariantList args;
+    this->callJSResponse(this->loadCallbackId, args);
+  }
+}

doric-Qt/example/doric/shader/DoricImageNode.h

@@ -0,0 +1,30 @@
+#ifndef DORICIMAGENODE_H
+#define DORICIMAGENODE_H
+
+#include "DoricViewNode.h"
+
+class DoricImageNode : public DoricViewNode {
+public:
+  using DoricViewNode::DoricViewNode;
+
+  QQuickItem *build() override;
+
+  virtual void blend(QJsonValue jsValue) override;
+
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
+
+  void onReady();
+
+  void onError();
+
+private:
+  QString loadCallbackId = "";
+
+  int contentMode = 0;
+
+  int placeHolderColor = -1;
+
+  int errorColor = -1;
+};
+
+#endif // DORICIMAGENODE_H

doric-Qt/example/doric/shader/DoricRootNode.cpp

@@ -0,0 +1,15 @@
+#include "DoricRootNode.h"
+
+void DoricRootNode::setRootView(QQuickItem *rootView) {
+  this->mView = rootView;
+  this->createLayouts(rootView);
+
+  this->getLayouts()->setLayoutType(DoricLayoutType::DoricStack);
+}
+
+QQuickItem *DoricRootNode::getRootView() { return mView; }
+
+void DoricRootNode::requestLayout() {
+  getLayouts()->apply();
+  DoricStackNode::requestLayout();
+}

doric-Qt/example/doric/shader/DoricRootNode.h

@@ -0,0 +1,19 @@
+#ifndef ROOTNODE_H
+#define ROOTNODE_H
+
+#include <QQuickItem>
+
+#include "DoricStackNode.h"
+
+class DoricRootNode : public DoricStackNode {
+public:
+  using DoricStackNode::DoricStackNode;
+
+  void setRootView(QQuickItem *rootView);
+
+  QQuickItem *getRootView();
+
+  virtual void requestLayout() override;
+};
+
+#endif // ROOTNODE_H

doric-Qt/example/doric/shader/DoricScrollerNode.cpp

@@ -0,0 +1,119 @@
+#include "DoricScrollerNode.h"
+
+QQuickItem *DoricScrollerNode::build() {
+  QQmlComponent component(getContext()->getQmlEngine());
+
+  const QUrl url(QStringLiteral("qrc:/doric/qml/scroller.qml"));
+  component.loadUrl(url);
+
+  if (component.isError()) {
+    qCritical() << component.errorString();
+  }
+
+  QQuickItem *item = qobject_cast<QQuickItem *>(component.create());
+  this->createLayouts(item);
+
+  item->setProperty("wrapper", QString::number((qint64)this));
+  return item;
+}
+
+void DoricScrollerNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
+  if (name == "content") {
+    if (!prop.isString()) {
+      return;
+    }
+    mChildViewId = prop.toString();
+  } else if (name == "onScroll") {
+    if (!prop.isString()) {
+      return;
+    }
+    onScrollFuncId = prop.toString();
+  } else if (name == "onScrollEnd") {
+    if (!prop.isString()) {
+      return;
+    }
+    onScrollEndFuncId = prop.toString();
+  } else {
+    DoricSuperNode::blend(view, name, prop);
+  }
+}
+
+void DoricScrollerNode::afterBlended(QJsonValue jsValue) {
+  QJsonValue contentModel = getSubModel(mChildViewId);
+  if (contentModel == QJsonValue::Undefined) {
+    return;
+  }
+
+  QString viewId = contentModel["id"].toString();
+  QString type = contentModel["type"].toString();
+  QJsonValue props = contentModel["props"];
+
+  QQuickItem *parent = mView;
+
+  if (mChildNode != nullptr) {
+    if (viewId == mChildNode->getId()) {
+      // skip
+    } else {
+      if (mReusable && mChildNode->getType() == type) {
+        mChildNode->setId(viewId);
+        mChildNode->blend(props);
+      } else {
+        // remove all views
+        for (int i = 0; i != parent->childItems().size(); i++) {
+          parent->childItems().at(i)->setParent(nullptr);
+          parent->childItems().at(i)->setParentItem(nullptr);
+          parent->childItems().at(i)->deleteLater();
+        }
+
+        mChildNode = DoricViewNode::create(getContext(), type);
+        mChildNode->setId(viewId);
+        mChildNode->init(this);
+        mChildNode->blend(props);
+
+        QQmlListProperty<QQuickItem> contentChildren =
+            qvariant_cast<QQmlListProperty<QQuickItem>>(
+                parent->property("contentChildren"));
+        contentChildren.append(&contentChildren, mChildNode->getNodeView());
+      }
+    }
+  } else {
+    mChildNode = DoricViewNode::create(getContext(), type);
+    mChildNode->setId(viewId);
+    mChildNode->init(this);
+    mChildNode->blend(props);
+
+    QQmlListProperty<QQuickItem> contentChildren =
+        qvariant_cast<QQmlListProperty<QQuickItem>>(
+            parent->property("contentChildren"));
+    contentChildren.append(&contentChildren, mChildNode->getNodeView());
+  }
+}
+
+void DoricScrollerNode::requestLayout() {
+  this->mChildNode->requestLayout();
+  DoricLayouts *layout = (DoricLayouts *)(mChildNode->getNodeView()
+                                              ->property("doricLayout")
+                                              .toULongLong());
+  if (layout != nullptr) {
+    layout->apply(QSizeF(mView->width(), mView->height()));
+
+    mView->setProperty("contentWidth", layout->getMeasuredWidth());
+    mView->setProperty("contentHeight", layout->getMeasuredHeight());
+  }
+}
+
+void DoricScrollerNode::blendSubNode(QJsonValue subProperties) {
+  if (mChildNode != nullptr) {
+    mChildNode->blend(subProperties["props"]);
+  }
+}
+
+QSizeF DoricScrollerNode::sizeThatFits(QSizeF size) {
+  DoricLayouts *layout = (DoricLayouts *)mChildNode->getNodeView()
+                             ->property("doricLayout")
+                             .toULongLong();
+  layout->apply(size);
+
+  return QSizeF(qMin(size.width(), layout->getMeasuredWidth()),
+                qMin(size.height(), layout->getMeasuredHeight()));
+}

doric-Qt/example/doric/shader/DoricScrollerNode.h

@@ -0,0 +1,30 @@
+#ifndef DORICSCROLLERNODE_H
+#define DORICSCROLLERNODE_H
+
+#include "DoricSuperNode.h"
+
+class DoricScrollerNode : public DoricSuperNode {
+private:
+  DoricViewNode *mChildNode = nullptr;
+
+  QString mChildViewId;
+  QString onScrollFuncId;
+  QString onScrollEndFuncId;
+
+public:
+  using DoricSuperNode::DoricSuperNode;
+
+  QQuickItem *build() override;
+
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
+
+  virtual void blendSubNode(QJsonValue subProperties) override;
+
+  virtual void afterBlended(QJsonValue jsValue) override;
+
+  virtual void requestLayout() override;
+
+  QSizeF sizeThatFits(QSizeF size);
+};
+
+#endif // DORICSCROLLERNODE_H

doric-Qt/example/doric/shader/DoricStackNode.cpp

@@ -0,0 +1,30 @@
+#include "DoricStackNode.h"
+
+QQuickItem *DoricStackNode::build() {
+  QQmlComponent component(getContext()->getQmlEngine());
+
+  const QUrl url(QStringLiteral("qrc:/doric/qml/stack.qml"));
+  component.loadUrl(url);
+
+  if (component.isError()) {
+    qCritical() << component.errorString();
+  }
+
+  QQuickItem *item = qobject_cast<QQuickItem *>(component.create());
+  this->createLayouts(item);
+
+  getLayouts()->setLayoutType(DoricLayoutType::DoricStack);
+
+  item->setProperty("wrapper", QString::number((qint64)this));
+  return item;
+}
+
+void DoricStackNode::blendLayoutConfig(QJsonValue jsValue) {
+  DoricViewNode::blendLayoutConfig(jsValue);
+  QJsonValue maxWidth = jsValue["maxWidth"];
+  if (maxWidth.isDouble()) {
+  }
+  QJsonValue maxHeight = jsValue["maxHeight"];
+  if (maxHeight.isDouble()) {
+  }
+}

doric-Qt/example/doric/shader/DoricStackNode.h

@@ -0,0 +1,15 @@
+#ifndef DORICSTACKNODE_H
+#define DORICSTACKNODE_H
+
+#include "DoricGroupNode.h"
+
+class DoricStackNode : public DoricGroupNode {
+public:
+  using DoricGroupNode::DoricGroupNode;
+
+  QQuickItem *build() override;
+
+  void blendLayoutConfig(QJsonValue jsValue) override;
+};
+
+#endif // DORICSTACKNODE_H

doric-Qt/example/doric/shader/DoricSuperNode.cpp

@@ -0,0 +1,56 @@
+#include <QJSValueIterator>
+
+#include "DoricSuperNode.h"
+
+void DoricSuperNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
+  if (name == "subviews") {
+    if (prop.isArray()) {
+      QJsonArray array = prop.toArray();
+      const int length = array.size();
+      for (int i = 0; i < length; ++i) {
+        QJsonValue subNode = array.at(i);
+        mixinSubNode(subNode);
+        blendSubNode(subNode);
+      }
+    }
+  } else {
+    DoricViewNode::blend(view, name, prop);
+  }
+}
+
+void DoricSuperNode::mixinSubNode(QJsonValue subNode) {
+  QString id = subNode["id"].toString();
+  QList<QString> keys = subNodes.keys();
+  if (!keys.contains(id)) {
+    subNodes.insert(id, subNode);
+  } else {
+    mixin(subNode, subNodes.value(id));
+  }
+}
+
+void DoricSuperNode::mixin(QJsonValue src, QJsonValue target) {
+  QJsonValue srcProps = src["props"];
+  QJsonValue targetProps = target["props"];
+
+  foreach (const QString &key, srcProps.toObject().keys()) {
+    QJsonValue value = srcProps[key];
+    if (key == "subviews" && value.isArray()) {
+
+    } else {
+      targetProps.toObject().insert(key, value);
+    }
+  }
+}
+
+QJsonValue DoricSuperNode::getSubModel(QString id) {
+  if (subNodes.keys().contains(id)) {
+    return subNodes.value(id);
+  } else {
+    return QJsonValue::Undefined;
+  }
+}
+
+void DoricSuperNode::blendSubLayoutConfig(DoricViewNode *viewNode,
+                                          QJsonValue jsValue) {
+  viewNode->blendLayoutConfig(jsValue);
+}

doric-Qt/example/doric/shader/DoricSuperNode.h

@@ -0,0 +1,32 @@
+#ifndef DORICSUPERNODE_H
+#define DORICSUPERNODE_H
+
+#include <QJsonArray>
+
+#include "DoricViewNode.h"
+
+class DoricSuperNode : public DoricViewNode {
+private:
+  QMap<QString, QJsonValue> subNodes;
+
+protected:
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
+
+  virtual void blendSubNode(QJsonValue subProperties) = 0;
+
+public:
+  using DoricViewNode::DoricViewNode;
+
+  bool mReusable = false;
+
+  QJsonValue getSubModel(QString id);
+
+  void blendSubLayoutConfig(DoricViewNode *viewNode, QJsonValue jsValue);
+
+private:
+  void mixinSubNode(QJsonValue subNode);
+
+  void mixin(QJsonValue src, QJsonValue target);
+};
+
+#endif // DORICSUPERNODE_H

doric-Qt/example/doric/shader/DoricTextNode.cpp

@@ -0,0 +1,36 @@
+#include "DoricTextNode.h"
+#include "../utils/DoricUtils.h"
+
+QQuickItem *DoricTextNode::build() {
+  QQmlComponent component(getContext()->getQmlEngine());
+
+  const QUrl url(QStringLiteral("qrc:/doric/qml/text.qml"));
+  component.loadUrl(url);
+
+  if (component.isError()) {
+    qCritical() << component.errorString();
+  }
+
+  QQuickItem *item = qobject_cast<QQuickItem *>(component.create());
+  this->createLayouts(item);
+
+  item->setProperty("wrapper", QString::number((qint64)this));
+  return item;
+}
+
+void DoricTextNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
+  if (name == "text") {
+    view->setProperty("text", prop.toString());
+  } else if (name == "textColor") {
+    QString color = DoricUtils::doricColor(prop.toInt()).name();
+    view->setProperty("color", color);
+  } else if (name == "textSize") {
+    QFont font = view->property("font").value<QFont>();
+    font.setPixelSize(prop.toInt());
+    view->setProperty("font", QVariant(font));
+  } else if (name == "textAlignment") {
+    view->setProperty("textAlignment", prop.toInt());
+  } else {
+    DoricViewNode::blend(view, name, prop);
+  }
+}

doric-Qt/example/doric/shader/DoricTextNode.h

@@ -0,0 +1,15 @@
+#ifndef DORICTEXTNODE_H
+#define DORICTEXTNODE_H
+
+#include "DoricViewNode.h"
+
+class DoricTextNode : public DoricViewNode {
+public:
+  using DoricViewNode::DoricViewNode;
+
+  QQuickItem *build() override;
+
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
+};
+
+#endif // DORICTEXTNODE_H

doric-Qt/example/doric/shader/DoricVLayoutNode.cpp

@@ -0,0 +1,31 @@
+#include "DoricVLayoutNode.h"
+
+QQuickItem *DoricVLayoutNode::build() {
+  QQmlComponent component(getContext()->getQmlEngine());
+
+  const QUrl url(QStringLiteral("qrc:/doric/qml/vlayout.qml"));
+  component.loadUrl(url);
+
+  if (component.isError()) {
+    qCritical() << component.errorString();
+  }
+
+  QQuickItem *item = qobject_cast<QQuickItem *>(component.create());
+  this->createLayouts(item);
+
+  getLayouts()->setLayoutType(DoricLayoutType::DoricVLayout);
+
+  item->setProperty("wrapper", QString::number((qint64)this));
+  return item;
+}
+
+void DoricVLayoutNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
+  QQuickItem *container = view;
+  if (name == "space") {
+    getLayouts()->setSpacing(prop.toDouble());
+  } else if (name == "gravity") {
+    getLayouts()->setGravity(prop.toInt());
+  } else {
+    DoricGroupNode::blend(view, name, prop);
+  }
+}

doric-Qt/example/doric/shader/DoricVLayoutNode.h

@@ -0,0 +1,15 @@
+#ifndef DORICVLAYOUTNODE_H
+#define DORICVLAYOUTNODE_H
+
+#include "DoricGroupNode.h"
+
+class DoricVLayoutNode : public DoricGroupNode {
+public:
+  using DoricGroupNode::DoricGroupNode;
+
+  QQuickItem *build() override;
+
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
+};
+
+#endif // DORICVLAYOUTNODE_H

doric-Qt/example/doric/shader/DoricViewNode.cpp

@@ -0,0 +1,177 @@
+#include "DoricViewNode.h"
+#include "../utils/DoricConstant.h"
+#include "../utils/DoricUtils.h"
+#include "DoricSuperNode.h"
+
+void DoricViewNode::blendLayoutConfig(QJsonValue jsValue) {
+  QJsonObject jsObject = jsValue.toObject();
+  if (jsObject.contains("widthSpec"))
+    getLayouts()->setWidthSpec(jsObject["widthSpec"].toInt());
+
+  if (jsObject.contains("heightSpec"))
+    getLayouts()->setHeightSpec(jsObject["heightSpec"].toInt());
+
+  if (jsObject.contains("margin")) {
+    QJsonObject margin = jsObject["margin"].toObject();
+
+    if (margin.contains("left"))
+      getLayouts()->setMarginLeft(margin["left"].toDouble());
+
+    if (margin.contains("top"))
+      getLayouts()->setMarginTop(margin["top"].toDouble());
+
+    if (margin.contains("right"))
+      getLayouts()->setMarginRight(margin["right"].toDouble());
+
+    if (margin.contains("bottom"))
+      getLayouts()->setMarginBottom(margin["bottom"].toDouble());
+  }
+
+  if (jsObject.contains("alignment"))
+    getLayouts()->setAlignment(jsObject["alignment"].toInt());
+
+  if (jsObject.contains("weight"))
+    getLayouts()->setWeight(jsObject["weight"].toInt());
+
+  if (jsObject.contains("maxWidth"))
+    getLayouts()->setMaxWidth(jsObject["maxWidth"].toDouble());
+
+  if (jsObject.contains("maxHeight"))
+    getLayouts()->setMaxHeight(jsObject["maxHeight"].toDouble());
+
+  if (jsObject.contains("minWidth"))
+    getLayouts()->setMinWidth(jsObject["minWidth"].toDouble());
+
+  if (jsObject.contains("minHeight"))
+    getLayouts()->setMinHeight(jsObject["minHeight"].toDouble());
+}
+
+void DoricViewNode::createLayouts(QQuickItem *view) {
+  if (mLayouts == nullptr) {
+    mLayouts = new DoricLayouts();
+    mLayouts->setWidth(view->width());
+    mLayouts->setHeight(view->height());
+    mLayouts->setView(view);
+
+    view->setProperty("doricLayout", QString::number((qint64)mLayouts));
+  }
+}
+
+DoricLayouts *DoricViewNode::getLayouts() { return mLayouts; }
+
+void DoricViewNode::setLayoutConfig(QJsonValue layoutConfig) {
+  if (mSuperNode != nullptr) {
+    mSuperNode->blendSubLayoutConfig(this, layoutConfig);
+  } else {
+    blendLayoutConfig(layoutConfig);
+  }
+}
+
+void DoricViewNode::init(DoricSuperNode *superNode) {
+  if (DoricUtils:: instanceof <DoricSuperNode *>(this)) {
+    DoricSuperNode *thiz = dynamic_cast<DoricSuperNode *>(this);
+    thiz->mReusable = superNode->mReusable;
+  }
+  this->mSuperNode = superNode;
+  this->mView = build();
+  getLayouts();
+}
+
+QString DoricViewNode::getId() { return mId; }
+
+void DoricViewNode::setId(QString id) { mId = id; }
+
+QString DoricViewNode::getType() { return mType; }
+
+QQuickItem *DoricViewNode::getNodeView() { return mView; }
+
+void DoricViewNode::blend(QJsonValue jsValue) {
+  QJsonValue value = jsValue["layoutConfig"];
+  if (value.isObject()) {
+    setLayoutConfig(value);
+  }
+
+  foreach (const QString &key, jsValue.toObject().keys()) {
+    QJsonValue value = jsValue[key];
+    blend(mView, key, value);
+  }
+
+  this->afterBlended(jsValue);
+}
+
+void DoricViewNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
+  if (name == "width") {
+    getLayouts()->setWidth(prop.toDouble());
+  } else if (name == "height") {
+    getLayouts()->setHeight(prop.toDouble());
+  } else if (name == "backgroundColor") {
+    view->setProperty(
+        "backgroundColor",
+        QVariant::fromValue(DoricUtils::doricColor(prop.toInt())));
+  } else if (name == "x") {
+    getLayouts()->setMarginLeft(prop.toDouble());
+  } else if (name == "y") {
+    getLayouts()->setMarginTop(prop.toDouble());
+  } else if (name == "corners") {
+    view->setProperty("radius", prop.toDouble());
+  } else if (name == "onClick") {
+    if (prop.isString())
+      clickFunction = prop.toString();
+  } else if (name == "padding") {
+    getLayouts()->setPaddingLeft(prop["left"].toDouble());
+    getLayouts()->setPaddingRight(prop["right"].toDouble());
+    getLayouts()->setPaddingTop(prop["top"].toDouble());
+    getLayouts()->setPaddingBottom(prop["bottom"].toDouble());
+  } else if (name == "hidden") {
+    getLayouts()->setDisabled(prop.toBool());
+  } else if (name == "border") {
+    qreal borderWidth = prop["width"].toDouble();
+    QString borderColor = DoricUtils::doricColor(prop["color"].toInt()).name();
+    view->setProperty("borderWidth", borderWidth);
+    view->setProperty("borderColor", borderColor);
+  } else if (name == "shadow") {
+    view->setProperty("shadowColor", QVariant::fromValue(DoricUtils::doricColor(
+                                         prop["color"].toInt())));
+    view->setProperty("shadowRadius", prop["radius"].toDouble());
+    view->setProperty("shadowOffsetX", prop["offsetX"].toDouble());
+    view->setProperty("shadowOffsetY", prop["offsetY"].toDouble());
+    view->setProperty("shadowOpacity", prop["opacity"].toDouble());
+  } else if (name != "layoutConfig") {
+    qCritical() << name << ": " << prop.toString();
+  }
+}
+
+void DoricViewNode::afterBlended(QJsonValue prop) {}
+
+QList<QString> DoricViewNode::getIdList() {
+  QList<QString> ids;
+
+  DoricViewNode *viewNode = this;
+  do {
+    ids.insert(0, viewNode->mId);
+    viewNode = viewNode->mSuperNode;
+  } while (viewNode != nullptr);
+
+  return ids;
+}
+
+void DoricViewNode::requestLayout() {}
+
+void DoricViewNode::callJSResponse(QString funcId, QVariantList args) {
+  QVariantList nArgs;
+  QList<QString> idList = getIdList();
+  nArgs.append(QVariant(idList));
+  nArgs.append(funcId);
+  foreach (const QVariant &arg, args)
+    nArgs.append(arg);
+
+  return getContext()->callEntity(DoricConstant::DORIC_ENTITY_RESPONSE, nArgs);
+}
+
+void DoricViewNode::onClick() {
+  if (clickFunction.isEmpty()) {
+    return;
+  }
+  QVariantList args;
+  callJSResponse(clickFunction, args);
+}

doric-Qt/example/doric/shader/DoricViewNode.h

@@ -0,0 +1,82 @@
+#ifndef DORICVIEWNODE_H
+#define DORICVIEWNODE_H
+
+#include <QJsonObject>
+#include <QJsonValue>
+#include <QQuickItem>
+
+#include "../utils/DoricContextHolder.h"
+#include "../utils/DoricLayouts.h"
+
+class DoricSuperNode;
+
+class DoricViewNode : public DoricContextHolder {
+
+protected:
+  QQuickItem *mView;
+
+  DoricLayouts *mLayouts = nullptr;
+
+  virtual QQuickItem *build() = 0;
+
+  void createLayouts(QQuickItem *view);
+
+  DoricLayouts *getLayouts();
+
+  void setLayoutConfig(QJsonValue layoutConfig);
+
+private:
+  QString mId;
+
+  QList<QString> getIdList();
+
+  QString clickFunction;
+
+public:
+  QString mType;
+
+  DoricSuperNode *mSuperNode = nullptr;
+
+  using DoricContextHolder::DoricContextHolder;
+
+  void init(DoricSuperNode *superNode);
+
+  static DoricViewNode *create(DoricContext *context, QString type) {
+    bool classRegistered =
+        context->getDriver()->getRegistry()->acquireNodeInfo(type);
+    if (classRegistered) {
+      QObject *node =
+          context->getDriver()->getRegistry()->nodes.createObject(type);
+      DoricViewNode *castNode = dynamic_cast<DoricViewNode *>(node);
+      castNode->setContext(context);
+      castNode->mType = type;
+      return castNode;
+    } else {
+      qCritical() << "DoricViewNode create error: " + type;
+      return nullptr;
+    }
+  }
+
+  QString getId();
+
+  void setId(QString id);
+
+  QString getType();
+
+  QQuickItem *getNodeView();
+
+  virtual void blend(QJsonValue jsValue);
+
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop);
+
+  virtual void afterBlended(QJsonValue prop);
+
+  virtual void blendLayoutConfig(QJsonValue jsObject);
+
+  virtual void requestLayout();
+
+  void onClick();
+
+  void callJSResponse(QString funcId, QVariantList args);
+};
+#endif // DORICVIEWNODE_H