diff --git a/doric-demo/src/ComponetDemo.ts b/doric-demo/src/ComponetDemo.ts
index 7c32e794..3131fdf7 100644
--- a/doric-demo/src/ComponetDemo.ts
+++ b/doric-demo/src/ComponetDemo.ts
@@ -1,14 +1,16 @@
 import { layoutConfig, LayoutSpec, Panel, Root, scroller, vlayout } from "doric";
-import { richTitleView, } from "./components/RichTitleView";
+import { preferenceView } from "./components/PreferenceView";
+import { RichTitleView, richTitleView } from "./components/RichTitleView";
 import logo from "./images/logo_w.png"
 
 @Entry
 class ComponentDemo extends Panel {
     build(root: Root) {
+        let richTitle: RichTitleView
         scroller(
             vlayout(
                 [
-                    richTitleView().applyChild({
+                    richTitle = richTitleView().applyChild({
                         title: {
                             text: "This is title"
                         },
@@ -19,7 +21,39 @@ class ComponentDemo extends Panel {
                             imageBase64: logo,
                         }
                     }),
-
+                    preferenceView().applyChild({
+                        title: {
+                            text: "Show Icon"
+                        },
+                        switch: {
+                            state: true,
+                            onSwitch: (ret) => {
+                                richTitle.icon.hidden = !ret
+                            }
+                        }
+                    }),
+                    preferenceView().applyChild({
+                        title: {
+                            text: "Show Title"
+                        },
+                        switch: {
+                            state: true,
+                            onSwitch: (ret) => {
+                                richTitle.title.hidden = !ret
+                            }
+                        }
+                    }),
+                    preferenceView().applyChild({
+                        title: {
+                            text: "Show Subtitle"
+                        },
+                        switch: {
+                            state: true,
+                            onSwitch: (ret) => {
+                                richTitle.subTitle.hidden = !ret
+                            }
+                        }
+                    }),
                 ],
                 {
                     layoutConfig: {
diff --git a/doric-demo/src/components/PreferenceView.ts b/doric-demo/src/components/PreferenceView.ts
index 824cd740..854d6467 100644
--- a/doric-demo/src/components/PreferenceView.ts
+++ b/doric-demo/src/components/PreferenceView.ts
@@ -1,14 +1,68 @@
-import { hlayout, HLayout, layoutConfig, ViewComponent } from "doric";
+import { Switch, Gravity, hlayout, HLayout, layoutConfig, switchView, Text, text, ViewComponent, vlayout } from "doric";
 
 @ViewComponent
 export class PreferenceView extends HLayout {
-
+    title: Text
+    subTitle: Text
+    switch: Switch
     constructor() {
         super()
         hlayout(
-            [],
+            [
+                vlayout(
+                    [
+                        this.title = text({
+                            textSize: 20,
+                        }),
+                        this.subTitle = text({
+                            textSize: 12,
+                        }),
+                    ],
+                    {
+                        layoutConfig: layoutConfig().fit().configWeight(1),
+                        space: 2,
+                    }),
+                this.switch = switchView({
+                    state: true,
+                }),
+            ],
             {
-                layoutConfig: layoutConfig(),
+                layoutConfig: layoutConfig().mostWidth().fitHeight(),
+                gravity: Gravity.Center,
+                padding: {
+                    left: 10,
+                    right: 10,
+                    top: 10,
+                    bottom: 10,
+                }
             }).in(this)
+        this.layoutConfig = layoutConfig().mostWidth().fitHeight()
     }
+
+    applyChild(config: {
+        title?: Partial<Text>,
+        subTitle?: Partial<Text>,
+        switch?: Partial<Switch>,
+    }) {
+        this.title.hidden = !!!config.title?.text
+        this.subTitle.hidden = !!!config.subTitle?.text
+        if (config.title) {
+            this.title.apply(config.title)
+        }
+        if (config.subTitle) {
+            this.subTitle.apply(config.subTitle)
+        }
+        if (config.switch) {
+            this.switch.apply(config.switch)
+        }
+        return this
+    }
+}
+
+export function preferenceView(config?: Partial<PreferenceView>) {
+    const ret = new PreferenceView
+    if (config) {
+        ret.apply(config)
+    }
+    return ret
 }
\ No newline at end of file