changes

add border for h & v layout, stack, scroller & text
fix background color transparent

doric-Qt/doric/resources/hlayout.qml

@@ -29,6 +29,16 @@ Rectangle {
         color = backgroundColor
     }
 
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        border.color = borderColor
+    }
+
     MouseArea {
         anchors.fill: parent
         onClicked: {

doric-Qt/doric/resources/scroller.qml

@@ -27,6 +27,16 @@ ScrollView {
         bg.color = backgroundColor
     }
 
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        bg.border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        bg.border.color = borderColor
+    }
+
     onWidthChanged: {
         bg.implicitWidth = width
         console.log(tag, uuid + " onWidthChanged: " + this.width)

doric-Qt/doric/resources/stack.qml

@@ -29,6 +29,16 @@ Rectangle {
         color = backgroundColor
     }
 
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        border.color = borderColor
+    }
+
     MouseArea {
         anchors.fill: parent
         onClicked: {

doric-Qt/doric/resources/text.qml

@@ -64,6 +64,20 @@ TextArea {
         this.text = tempText
     }
 
+    onTextChanged: {
+        console.log(tag, uuid + " onTextChanged: " + this.text)
+    }
+
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        bg.border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        bg.border.color = borderColor
+    }
+
     MouseArea {
         anchors.fill: parent
         onClicked: {

doric-Qt/doric/resources/vlayout.qml

@@ -29,6 +29,16 @@ Rectangle {
         color = backgroundColor
     }
 
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        border.color = borderColor
+    }
+
     MouseArea {
         anchors.fill: parent
         onClicked: {

doric-Qt/doric/shader/DoricViewNode.cpp

@@ -105,14 +105,15 @@ void DoricViewNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
   } else if (name == "height") {
     getLayouts()->setHeight(prop.toDouble());
   } else if (name == "backgroundColor") {
-    QString color = DoricUtils::doricColor(prop.toInt()).name();
+    view->setProperty(
-    view->setProperty("backgroundColor", color);
+        "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.toInt());
+    view->setProperty("radius", prop.toDouble());
   } else if (name == "onClick") {
     if (prop.isString())
       clickFunction = prop.toString();
@@ -123,6 +124,11 @@ void DoricViewNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
     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 != "layoutConfig") {
     qCritical() << name << ": " << prop.toString();
   }

doric-demo/src/SimpleDemo.ts

@@ -1,86 +1,47 @@
-import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, layoutConfig, stack, Gravity } from "doric";
+import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, layoutConfig } from "doric";
+import { colors } from "./utils";
 
 @Entry
 class LayoutDemo extends Panel {
     build(rootView: Group) {
-        hlayout([
+        scroller(
-            vlayout([
+            vlayout(
-                stack([], {
+                [
-                    width: 100,
+                    text({
-                    height: 100,
+                        text: "五子棋",
-                    backgroundColor: Color.RED,
+                        layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
-                    layoutConfig: layoutConfig().just()
+                        textSize: 30,
-                }),
+                        textColor: Color.WHITE,
-                stack([], {
+                        backgroundColor: colors[0],
-                    width: 100,
+                        textAlignment: gravity().center(),
-                    height: 100,
+                        height: 50,
-                    backgroundColor: Color.GREEN,
+                    }),
-                    layoutConfig: layoutConfig().just()
+                    hlayout(
-                }),
+                    [
-                stack([], {
+                        text({
-                    width: 100,
+                            text: "当前:",
-                    height: 100,
+                            textSize: 20,
-                    backgroundColor: Color.BLUE,
+                            textColor: Color.WHITE,
-                    layoutConfig: layoutConfig().just()
+                            layoutConfig: layoutConfig().just().configWeight(1),
-                })
+                            height: 50,
+                            backgroundColor: colors[1],
+                        }),
+                        text({
+                            text: "获胜方:",
+                            textSize: 20,
+                            textColor: Color.WHITE,
+                            layoutConfig: layoutConfig().just().configWeight(1),
+                            height: 50,
+                            backgroundColor: colors[2],
+                        }),
+                    ],
+                    {
+                        layoutConfig: layoutConfig().fit().configWidth(LayoutSpec.MOST),
+                    }),
             ], {
-                width: 100,
+                layoutConfig: layoutConfig().most(),
-                height: 300,
+                backgroundColor: Color.parse('#ecf0f1'),
-                layoutConfig: layoutConfig().just()
-            }),
-            vlayout([
-                stack([], {
-                    width: 100,
-                    height: 100,
-                    backgroundColor: Color.GREEN,
-                    layoutConfig: layoutConfig().just()
-                }),
-                stack([], {
-                    width: 100,
-                    height: 100,
-                    backgroundColor: Color.BLUE,
-                    layoutConfig: layoutConfig().just()
-                }),
-                stack([], {
-                    width: 100,
-                    height: 100,
-                    backgroundColor: Color.RED,
-                    layoutConfig: layoutConfig().just()
-                })
-            ], {
-                width: 100,
-                height: 300,
-                layoutConfig: layoutConfig().just()
-            }),
-            vlayout([
-                stack([], {
-                    width: 100,
-                    height: 100,
-                    backgroundColor: Color.BLUE,
-                    layoutConfig: layoutConfig().just()
-                }),
-                stack([], {
-                    width: 100,
-                    height: 100,
-                    backgroundColor: Color.RED,
-                    layoutConfig: layoutConfig().just()
-                }),
-                stack([], {
-                    width: 100,
-                    height: 100,
-                    backgroundColor: Color.GREEN,
-                    layoutConfig: layoutConfig().just()
-                })
-            ], {
-                width: 100,
-                height: 300,
-                layoutConfig: layoutConfig().just()
             })
-        ], {
+        ).in(rootView)
-            width: 400,
-            height: 300,
-            layoutConfig: layoutConfig().just(),
-            backgroundColor: Color.BLACK
-        }).in(rootView)
     }
 }