add list & list item & demo

doric-Qt/example/app/main.qml

@@ -100,7 +100,7 @@ ApplicationWindow {
                     ListView {
                         id: list
                         width: content.width
-                        model: 24
+                        model: 25
                         boundsBehavior: Flickable.StopAtBounds
 
                         function getSource(index) : string {
@@ -126,32 +126,34 @@ ApplicationWindow {
                                 case 9:
                                     return "LayoutTestDemo.js"
                                 case 10:
-                                    return "ModalDemo.js"
+                                    return "ListDemo.js"
                                 case 11:
-                                    return "ModularDemo.js"
+                                    return "ModalDemo.js"
                                 case 12:
-                                    return "NavBarDemo.js"
+                                    return "ModularDemo.js"
                                 case 13:
-                                    return "NavigatorDemo.js"
+                                    return "NavBarDemo.js"
                                 case 14:
-                                    return "NetworkDemo.js"
+                                    return "NavigatorDemo.js"
                                 case 15:
-                                    return "NotificationDemo.js"
+                                    return "NetworkDemo.js"
                                 case 16:
-                                    return "PopoverDemo.js"
+                                    return "NotificationDemo.js"
                                 case 17:
-                                    return "ScrollerDemo.js"
+                                    return "PopoverDemo.js"
                                 case 18:
-                                    return "SimpleDemo.js"
+                                    return "ScrollerDemo.js"
                                 case 19:
-                                    return "SliderDemo.js"
+                                    return "SimpleDemo.js"
                                 case 20:
-                                    return "Snake.js"
+                                    return "SliderDemo.js"
                                 case 21:
-                                    return "StorageDemo.js"
+                                    return "Snake.js"
                                 case 22:
-                                    return "SwitchDemo.js"
+                                    return "StorageDemo.js"
                                 case 23:
+                                    return "SwitchDemo.js"
+                                case 24:
                                     return "TextDemo.js"
                             }
                         }

doric-Qt/example/app/qml.qrc

@@ -18,6 +18,7 @@
         <file alias="ImageDemo.js">../../../doric-demo/bundle/src/ImageDemo.js</file>
         <file alias="InputDemo.js">../../../doric-demo/bundle/src/InputDemo.js</file>
         <file alias="LayoutDemo.js">../../../doric-demo/bundle/src/LayoutDemo.js</file>
+        <file alias="ListDemo.js">../../../doric-demo/bundle/src/ListDemo.js</file>
         <file alias="LayoutTestDemo.js">../../../doric-demo/bundle/src/LayoutTestDemo.js</file>
         <file alias="ModalDemo.js">../../../doric-demo/bundle/src/ModalDemo.js</file>
         <file alias="ModularDemo.js">../../../doric-demo/bundle/src/ModularDemo.js</file>
@@ -54,6 +55,8 @@
         <file alias="switch.qml">../doric/resources/switch.qml</file>
         <file alias="draggable.qml">../doric/resources/draggable.qml</file>
         <file alias="flex.qml">../doric/resources/flex.qml</file>
+        <file alias="list.qml">../doric/resources/list.qml</file>
+        <file alias="list-item.qml">../doric/resources/list-item.qml</file>
 
         <file alias="toast.qml">../doric/resources/toast.qml</file>
         <file alias="alert.qml">../doric/resources/alert.qml</file>

doric-Qt/example/doric/DoricRegistry.cpp

@@ -21,6 +21,8 @@
 #include "shader/DoricSwitchNode.h"
 #include "shader/DoricTextNode.h"
 #include "shader/DoricVLayoutNode.h"
+#include "shader/list/DoricListItemNode.h"
+#include "shader/list/DoricListNode.h"
 #include "shader/slider/DoricSlideItemNode.h"
 #include "shader/slider/DoricSliderNode.h"
 
@@ -49,6 +51,8 @@ DoricRegistry::DoricRegistry() {
   registerViewNode<DoricSwitchNode>("Switch");
   registerViewNode<DoricDraggableNode>("Draggable");
   registerViewNode<DoricFlexNode>("FlexLayout");
+  registerViewNode<DoricListNode>("List");
+  registerViewNode<DoricListItemNode>("ListItem");
 }
 
 bool DoricRegistry::acquirePluginInfo(QString name) {

doric-Qt/example/doric/doric.pro

@@ -60,6 +60,8 @@ SOURCES += \
         shader/DoricTextNode.cpp \
         shader/DoricVLayoutNode.cpp \
         shader/DoricViewNode.cpp \
+        shader/list/DoricListItemNode.cpp \
+        shader/list/DoricListNode.cpp \
         shader/slider/DoricSlideItemNode.cpp \
         shader/slider/DoricSliderNode.cpp \
         utils/DoricConstant.cpp \
@@ -153,6 +155,8 @@ HEADERS += \
     shader/DoricTextNode.h \
     shader/DoricVLayoutNode.h \
     shader/DoricViewNode.h \
+    shader/list/DoricListItemNode.h \
+    shader/list/DoricListNode.h \
     shader/slider/DoricSlideItemNode.h \
     shader/slider/DoricSliderNode.h \
     template/DoricSingleton.h \

doric-Qt/example/doric/resources/list-item.qml

@@ -0,0 +1,184 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.12
+
+import "util.mjs" as Util
+
+Rectangle {
+    id: root
+    property var wrapper
+
+    clip: true
+
+    property var uuid: Util.uuidv4()
+
+    property var tag: "ListItem"
+
+    onWidthChanged: {
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+
+        updateGradient()
+
+        slideItemBridge.apply(wrapper)
+    }
+
+    onHeightChanged: {
+        console.log(tag, uuid + " onHeightChanged: " + this.height)
+
+        updateGradient()
+
+        slideItemBridge.apply(wrapper)
+    }
+
+    color: 'transparent'
+
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        color = backgroundColor
+    }
+
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        border.color = borderColor
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            console.log(tag, uuid + " wrapper: " + wrapper)
+            mouseAreaBridge.onClick(wrapper)
+        }
+    }
+
+    property var shadowColor
+    property var shadowRadius
+    property var shadowOffsetX
+    property var shadowOffsetY
+    property var shadowOpacity
+
+    onShadowOpacityChanged: {
+        if (shadowOpacity > 0) {
+            layer.enabled = true
+        } else {
+            layer.enabled = false
+        }
+    }
+
+    layer.enabled: false
+    layer.effect: DropShadow {
+        horizontalOffset: shadowOffsetX
+        verticalOffset: shadowOffsetY
+        radius: shadowRadius
+        samples: 16
+        color: shadowColor
+        transparentBorder: true
+    }
+
+
+    property var backgroundColorIsObject: false
+    onBackgroundColorIsObjectChanged: {
+        if (backgroundColorIsObject) {
+            lineGradient.anchors.fill = root
+        } else {
+            lineGradient.anchors.fill = null
+        }
+    }
+
+    property variant gradientColors: []
+    property variant gradientLocations: []
+
+    onGradientColorsChanged: {
+        console.log(tag, uuid + " onGradientColorsChanged: " + gradientColors)
+        if (gradientColors.length > 0) {
+            let stops = []
+
+            if (gradientLocations.length == 0) {
+                let unit = 1 / (gradientColors.length - 1)
+                for (let i = 0;i !== gradientColors.length;i++) {
+                    let a = ((gradientColors[i] >> 24) & 0xff) / 255;
+                    let r = ((gradientColors[i] >> 16) & 0xff) / 255;
+                    let g = ((gradientColors[i] >> 8) & 0xff) / 255;
+                    let b = ((gradientColors[i] >> 0) & 0xff) / 255;
+                    let stop = stopComponent.createObject(root, {"position": unit * i, "color": Qt.rgba(r, g, b, a)})
+                    console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + unit * i + " color: " + Qt.rgba(r, g, b, a))
+                    stops.push(stop)
+                }
+            } else {
+                for (let i = 0;i !== gradientColors.length;i++) {
+                    let a = ((gradientColors[i] >> 24) & 0xff) / 255;
+                    let r = ((gradientColors[i] >> 16) & 0xff) / 255;
+                    let g = ((gradientColors[i] >> 8) & 0xff) / 255;
+                    let b = ((gradientColors[i] >> 0) & 0xff) / 255;
+                    let stop = stopComponent.createObject(root, {"position": gradientLocations[i], "color": Qt.rgba(r, g, b, a)})
+                    console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + gradientLocations[i] + " color: " + Qt.rgba(r, g, b, a))
+                    stops.push(stop)
+                }
+            }
+
+            innerGradient.stops = stops
+        }
+    }
+
+    property var orientation: 0
+
+    function updateGradient() {
+        switch (orientation) {
+        case 0:
+            lineGradient.start = Qt.point(0, 0)
+            lineGradient.end = Qt.point(0, root.height)
+            break
+        case 1:
+            lineGradient.start = Qt.point(root.width, 0)
+            lineGradient.end = Qt.point(0, root.height)
+            break
+        case 2:
+            lineGradient.start = Qt.point(root.width, 0)
+            lineGradient.end = Qt.point(0, 0)
+            break
+        case 3:
+            lineGradient.start = Qt.point(root.width, root.height)
+            lineGradient.end = Qt.point(0, 0)
+            break
+        case 4:
+            lineGradient.start = Qt.point(0, root.height)
+            lineGradient.end = Qt.point(0, 0)
+            break
+        case 5:
+            lineGradient.start = Qt.point(0, root.height)
+            lineGradient.end = Qt.point(root.width, 0)
+            break
+        case 6:
+            lineGradient.start = Qt.point(0, 0)
+            lineGradient.end = Qt.point(root.width, 0)
+            break
+        case 7:
+            lineGradient.start = Qt.point(0, 0)
+            lineGradient.end = Qt.point(root.width, root.height)
+            break
+        }
+    }
+    onOrientationChanged: {
+        console.log(tag, uuid + " onOrientationChanged: " + orientation)
+
+        updateGradient()
+    }
+
+    LinearGradient {
+        Component {
+            id:stopComponent
+            GradientStop {}
+        }
+
+        id: lineGradient
+        gradient: Gradient {
+            id: innerGradient
+        }
+    }
+}

doric-Qt/example/doric/resources/list.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+
+import "util.mjs" as Util
+
+ListView {
+    property var wrapper
+
+    property var uuid: Util.uuidv4()
+
+    property var tag: "List"
+
+    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)
+    }
+
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        bg.border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        bg.border.color = borderColor
+    }
+
+    onCurrentIndexChanged: {
+        console.log(tag, uuid + " onCurrentIndexChanged: " + this.currentIndex)
+    }
+
+}

doric-Qt/example/doric/shader/list/DoricListItemNode.cpp

@@ -0,0 +1,22 @@
+#include "DoricListItemNode.h"
+
+QQuickItem *DoricListItemNode::build() {
+  QQmlComponent component(getContext()->getQmlEngine());
+
+  const QUrl url(QStringLiteral("qrc:/doric/qml/list-item.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 DoricListItemNode::apply() { getLayouts()->apply(); }

doric-Qt/example/doric/shader/list/DoricListItemNode.h

@@ -0,0 +1,17 @@
+#ifndef DORICLISTITEMNODE_H
+#define DORICLISTITEMNODE_H
+
+#include "DoricExport.h"
+
+#include "shader/DoricStackNode.h"
+
+class DORIC_EXPORT DoricListItemNode : public DoricStackNode {
+public:
+  using DoricStackNode::DoricStackNode;
+
+  QQuickItem *build() override;
+
+  void apply();
+};
+
+#endif // DORICLISTITEMNODE_H

doric-Qt/example/doric/shader/list/DoricListNode.cpp

@@ -0,0 +1,26 @@
+#include "DoricListNode.h"
+
+QQuickItem *DoricListNode::build() {
+  QQmlComponent component(getContext()->getQmlEngine());
+
+  const QUrl url(QStringLiteral("qrc:/doric/qml/list.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;
+}
+
+DoricViewNode *DoricListNode::getSubNodeById(QString id) {}
+
+void DoricListNode::blendSubNode(QJsonValue subProperties) {}
+
+void DoricListNode::blend(QQuickItem *view, QString name, QJsonValue prop) {}
+
+void DoricListNode::afterBlended(QJsonValue prop) {}

doric-Qt/example/doric/shader/list/DoricListNode.h

@@ -0,0 +1,36 @@
+#ifndef DORICLISTNODE_H
+#define DORICLISTNODE_H
+
+#include "DoricExport.h"
+
+#include "DoricListItemNode.h"
+#include "shader/DoricSuperNode.h"
+
+class DORIC_EXPORT DoricListNode : public DoricSuperNode {
+
+private:
+  QString renderItemFuncId;
+  int itemCount = 0;
+  int batchCount = 15;
+  QString onLoadMoreFuncId;
+  bool loadMore = false;
+  QString loadMoreViewId;
+  QString onScrollFuncId;
+  QString onScrollEndFuncId;
+  QList<DoricListItemNode *> childNodes;
+
+public:
+  using DoricSuperNode::DoricSuperNode;
+
+  QQuickItem *build() override;
+
+  virtual DoricViewNode *getSubNodeById(QString id) override;
+
+  virtual void blendSubNode(QJsonValue subProperties) override;
+
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
+
+  virtual void afterBlended(QJsonValue prop) override;
+};
+
+#endif // DORICLISTNODE_H