From 2f32bfdbf2df93a889a2b336a4a0535eabdca4e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=8A=B2=E9=B9=8F?= <jingpeng.wang@outlook.com>
Date: Tue, 16 Aug 2022 17:50:54 +0800
Subject: [PATCH] section list demo

---
 doric-demo/src/SectionListDemo.ts | 76 +++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 doric-demo/src/SectionListDemo.ts

diff --git a/doric-demo/src/SectionListDemo.ts b/doric-demo/src/SectionListDemo.ts
new file mode 100644
index 00000000..17417dcf
--- /dev/null
+++ b/doric-demo/src/SectionListDemo.ts
@@ -0,0 +1,76 @@
+import { Panel, Group, layoutConfig, Color, stack, list, listItem, text, loge, Gravity } from "doric"
+import { colors } from "./utils"
+
+@Entry
+class SectionListDemo extends Panel {
+
+    private data = [{
+        // title
+        type: 'title',
+        value: 1
+    }, {
+        type: 'cell',
+        value: 1
+    }, {
+        type: 'cell',
+        value: 2
+    }, {
+        type: 'cell',
+        value: 3
+    }, {
+        // title
+        type: 'title',
+        value: 2
+    }, {
+        type: 'cell',
+        value: 1
+    }, {
+        type: 'cell',
+        value: 2
+    }, {
+        type: 'cell',
+        value: 3
+    }, {
+        type: 'cell',
+        value: 4
+    }]
+
+    build(root: Group) {
+        stack(
+            [
+                list({
+                    itemCount: this.data.length,
+                    renderItem: (idx) => {
+                        if (this.data[idx].type === 'title') {
+                            return listItem(text({
+                                text: `Title :${this.data[idx].value}`,
+                                layoutConfig: layoutConfig().just().configMargin({
+                                    top: (this.data[idx].value === 1) ? 0 : 20
+                                }),
+                                width: root.width,
+                                textAlignment: Gravity.Left,
+                                height: 50,
+                                textColor: Color.WHITE,
+                                backgroundColor: colors[idx % colors.length],
+                            }))
+                        } else {
+                            return listItem(text({
+                                text: `Item :${this.data[idx].value}`,
+                                layoutConfig: layoutConfig().just(),
+                                width: root.width,
+                                height: 100,
+                                textColor: Color.WHITE,
+                                backgroundColor: colors[idx % colors.length],
+                            }))
+                        }
+
+                    },
+                    layoutConfig: layoutConfig().most(),
+                })
+            ],
+            {
+                layoutConfig: layoutConfig().most()
+            }
+        ).in(root)
+    }
+}
\ No newline at end of file