diff --git a/example/lib/page/td_switch_page.dart b/example/lib/page/td_switch_page.dart
index 3f3b2959f..4e85625c2 100644
--- a/example/lib/page/td_switch_page.dart
+++ b/example/lib/page/td_switch_page.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:tdesign_flutter/td_export.dart';
 
+import '../annotation/demo.dart';
 import '../base/example_widget.dart';
 
 ///
@@ -18,93 +19,35 @@ class TDSwitchPage extends StatefulWidget {
 class TDSwitchPageState extends State<TDSwitchPage> {
   @override
   Widget build(BuildContext context) {
-    var current =
-        ExamplePage(title: 'Switch 开关', desc: '用于控制某个功能的开启和关闭。', children: [
-      ExampleModule(
-        title: '组件类型',
+    var current = ExamplePage(
+        title: 'Switch 开关',
+        exampleCodeGroup: 'switch',
+        desc: '用于控制某个功能的开启和关闭。',
         children: [
-          ExampleItem(builder: (_) => _title('基础开关')),
-          ExampleItem(
-              builder: (_) => Column(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [demoRow(context, '基础开关', on: true)],
-                  )),
-          ExampleItem(builder: (_) => _title('带描述开关')),
-          ExampleItem(
-              builder: (_) => Column(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      demoRow(context, '带文字开关',
-                          on: true, type: TDSwitchType.text),
-                      demoRow(context, '带图标开关',
-                          on: true, type: TDSwitchType.icon)
-                    ],
-                  )),
-          ExampleItem(builder: (_) => _title('自定义颜色开关')),
-          ExampleItem(
-            builder: (_) =>
-                demoRow(context, '自定义颜色开关', on: true, onColor: Colors.green),
+          ExampleModule(
+            title: '组件类型',
+            children: [
+              ExampleItem(desc: '基础开关', builder: _buildSwitchWithBase),
+              ExampleItem(desc: '带描述开关', builder: _buildSwitchWithText),
+              ExampleItem(builder: _buildSwitchWithIcon),
+              ExampleItem(desc: '自定义颜色开关', builder: _buildSwitchWithColor),
+            ],
           ),
-        ],
-      ),
-      ExampleModule(title: '组件状态', children: [
-        ExampleItem(builder: (_) => _title('加载状态')),
-        ExampleItem(
-            builder: (_) => Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    demoRow(
-                      context,
-                      '加载状态',
-                      on: false,
-                      type: TDSwitchType.loading,
-                    ),
-                    demoRow(
-                      context,
-                      '加载状态',
-                      on: true,
-                      type: TDSwitchType.loading,
-                    ),
-                  ],
-                )),
-        ExampleItem(builder: (_) => _title('禁用状态')),
-        ExampleItem(
-            builder: (_) => Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    demoRow(context, '禁用状态', on: false, enable: false),
-                    demoRow(context, '禁用状态', on: true, enable: false),
-                  ],
-                )),
-      ]),
-      ExampleModule(title: '组件样式', children: [
-        ExampleItem(builder: (_) => _title('开关尺寸')),
-        ExampleItem(
-            builder: (_) => Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    demoRow(context, '大尺寸32',
-                        on: true, size: TDSwitchSize.large),
-                    demoRow(context, '中尺寸28',
-                        on: true, size: TDSwitchSize.medium),
-                    demoRow(context, '小尺寸24',
-                        on: true, size: TDSwitchSize.small),
-                  ],
-                )),
-      ]),
-    ]);
+          ExampleModule(title: '组件状态', children: [
+            ExampleItem(desc: '加载状态', builder: _buildSwitchWithLoadingOff),
+            ExampleItem(builder: _buildSwitchWithLoadingOn),
+            ExampleItem(desc: '禁用状态', builder: _buildSwitchWithDisableOff),
+            ExampleItem(builder: _buildSwitchWithDisableOn),
+          ]),
+          ExampleModule(title: '组件样式', children: [
+            ExampleItem(desc: '开关尺寸', builder: _buildSwitchWithSizeLarge),
+            ExampleItem(builder: _buildSwitchWithSizeMed),
+            ExampleItem(builder: _buildSwitchWithSizeSmall),
+          ]),
+        ]);
     return current;
   }
 
-  Widget _title(String title) {
-    return Container(
-      height: 40,
-      padding: const EdgeInsets.only(left: 10),
-      alignment: Alignment.centerLeft,
-      child: Text(title),
-    );
-  }
-
   Widget demoRow(
     BuildContext context,
     String? title, {
@@ -129,14 +72,13 @@ class TDSwitchPageState extends State<TDSwitchPage> {
           textColor: theme.grayColor6,
         ),
         SizedBox(
-          child: TDSwitch(
-            isOn: on,
-            onColor: onColor,
-            enable: enable,
-            offColor: offColor,
-            size: size,
-            type: type,
-          ),
+          child: _buildSwitch(
+              on: on,
+              enable: enable,
+              onColor: onColor,
+              offColor: offColor,
+              size: size,
+              type: type),
         )
       ],
     );
@@ -155,4 +97,178 @@ class TDSwitchPageState extends State<TDSwitchPage> {
     );
     return current;
   }
+
+  /// 每一项的封装
+  @Demo(group: 'switch')
+  Widget _buildItem(BuildContext context, Widget switchItem,
+      {String? title, String? desc}) {
+    final theme = TDTheme.of(context);
+    Widget current = Row(
+      children: [
+        Expanded(
+            child: TDText(
+          title ?? '',
+          textColor: theme.fontGyColor1,
+        )),
+        TDText(
+          desc ?? '',
+          textColor: theme.grayColor6,
+        ),
+        SizedBox(child: switchItem)
+      ],
+    );
+    current = Padding(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      child: SizedBox(
+        child: Container(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16.0),
+            child: current,
+          ),
+          color: Colors.white,
+        ),
+        height: 56,
+      ),
+    );
+    return Column(mainAxisSize: MainAxisSize.min, children: [current]);
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitchWithBase(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(),
+      title: '基础开关',
+    );
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitchWithText(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(isOn: true, type: TDSwitchType.text),
+      title: '带文字开关',
+    );
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitchWithIcon(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(isOn: true, type: TDSwitchType.icon),
+      title: '带图标开关',
+    );
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitchWithColor(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(isOn: true, onColor: Colors.green),
+      title: '自定义颜色开关',
+    );
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitchWithLoadingOff(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(
+        isOn: false,
+        type: TDSwitchType.loading,
+      ),
+      title: '加载状态',
+    );
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitchWithLoadingOn(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(
+        isOn: true,
+        type: TDSwitchType.loading,
+      ),
+      title: '加载状态',
+    );
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitchWithDisableOff(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(
+        enable: false,
+        isOn: false,
+      ),
+      title: '禁用状态',
+    );
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitchWithDisableOn(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(
+        enable: false,
+        isOn: true,
+      ),
+      title: '禁用状态',
+    );
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitchWithSizeLarge(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(
+        isOn: true,
+        size: TDSwitchSize.large,
+      ),
+      title: '大尺寸32',
+    );
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitchWithSizeMed(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(
+        isOn: true,
+        size: TDSwitchSize.medium,
+      ),
+      title: '中尺寸28',
+    );
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitchWithSizeSmall(BuildContext context) {
+    return _buildItem(
+      context,
+      const TDSwitch(
+        isOn: true,
+        size: TDSwitchSize.small,
+      ),
+      title: '中尺寸24',
+    );
+  }
+
+  @Demo(group: 'switch')
+  Widget _buildSwitch({
+    bool on = true,
+    bool enable = true,
+    Color? onColor,
+    Color? offColor,
+    TDSwitchSize? size,
+    TDSwitchType? type,
+  }) {
+    return TDSwitch(
+      isOn: on,
+      onColor: onColor,
+      enable: enable,
+      offColor: offColor,
+      size: size,
+      type: type,
+    );
+  }
 }