feat:support component view

2021-05-14 19:24:07 +08:00
parent b6bfb210e1
commit 7ee30d1cd3
12 changed files with 215 additions and 15 deletions
--- a/doric-demo/src/ComponetDemo.ts
+++ b/doric-demo/src/ComponetDemo.ts
@@ -0,0 +1,74 @@
+import { layoutConfig, LayoutSpec, Panel, Root, scroller, vlayout } from "doric";
+import { richTitleView, } from "./components/RichTitleView";
+import logo from "./images/logo_w.png"
+
+@Entry
+class ComponentDemo extends Panel {
+    build(root: Root) {
+        scroller(
+            vlayout(
+                [
+                    richTitleView().applyChild({
+                        title: {
+                            text: "This is title"
+                        },
+                        subTitle: {
+                            text: "This is subtitle",
+                        },
+                        icon: {
+                            imageBase64: logo,
+                        }
+                    }),
+                    richTitleView().applyChild({
+                        title: {
+                            text: "Title"
+                        },
+                        subTitle: {
+                            text: "Subtitle"
+                        },
+                    }),
+                    richTitleView().applyChild({
+                        icon: {
+                            imageBase64: logo,
+                        },
+                        subTitle: {
+                            text: "Subtitle"
+                        },
+                    }),
+                    richTitleView().applyChild({
+                        icon: {
+                            imageBase64: logo,
+                        },
+                        title: {
+                            text: "Title"
+                        },
+                    }),
+                    richTitleView().applyChild({
+                        title: {
+                            text: "Just title"
+                        },
+                    }),
+                    richTitleView().applyChild({
+                        subTitle: {
+                            text: "Just subtitle"
+                        },
+                    }),
+                    richTitleView().applyChild({
+                        icon: {
+                            imageBase64: logo,
+                        },
+                    }),
+                ],
+                {
+                    layoutConfig: {
+                        widthSpec: LayoutSpec.MOST,
+                        heightSpec: LayoutSpec.FIT,
+                    },
+                    space: 10,
+                }),
+            {
+                layoutConfig: layoutConfig().most(),
+            }
+        ).in(root)
+    }
+}
--- a/doric-demo/src/components/RichTitleView.ts
+++ b/doric-demo/src/components/RichTitleView.ts
@@ -0,0 +1,78 @@
+import { Color, Gravity, HLayout, image, Image, layoutConfig, LayoutSpec, text, Text, ViewComponent, vlayout, } from "doric"
+import { colors } from "../utils"
+
+@ViewComponent
+export class RichTitleView extends HLayout {
+    title: Text
+    subTitle: Text
+    icon: Image
+    constructor() {
+        super()
+        this.title = text({
+            textSize: 30,
+            textColor: Color.WHITE,
+            textAlignment: Gravity.Center,
+        })
+        this.subTitle = text({
+            textColor: Color.WHITE,
+            textSize: 12,
+        })
+        this.icon = image({
+            layoutConfig: layoutConfig().just(),
+            width: 80,
+            height: 80,
+        })
+        this.addChild(this.icon)
+        this.addChild(
+            vlayout(
+                [
+                    this.title,
+                    this.subTitle,
+                ],
+                {
+                    gravity: Gravity.Center,
+                    space: 10,
+                }))
+        this.gravity = Gravity.Center
+        this.space = 10
+        this.layoutConfig = {
+            widthSpec: LayoutSpec.MOST,
+            heightSpec: LayoutSpec.FIT,
+        }
+        this.padding = {
+            top: 10,
+            bottom: 10,
+            left: 10,
+            right: 10,
+        }
+        this.backgroundColor = colors[1]
+    }
+
+    applyChild(config: {
+        title?: Partial<Text>,
+        subTitle?: Partial<Text>,
+        icon?: Partial<Image>,
+    }) {
+        this.title.hidden = !!!config.title?.text
+        this.subTitle.hidden = !!!config.subTitle?.text
+        this.icon.hidden = !!!config.icon
+        if (config.title) {
+            this.title.apply(config.title)
+        }
+        if (config.subTitle) {
+            this.subTitle.apply(config.subTitle)
+        }
+        if (config.icon) {
+            this.icon.apply(config.icon)
+        }
+        return this
+    }
+}
+
+export function richTitleView(config?: Partial<RichTitleView>) {
+    const ret = new RichTitleView
+    if (config) {
+        ret.apply(config)
+    }
+    return ret
+}