TDDrawer定义为一个Widget

tdesign-component/demo_tool/all_build.sh

@@ -17,7 +17,7 @@
 # back_top
 ./bin/demo_tool generate --file ../lib/src/components/backtop/td_backtop.dart --name TDBackTop --folder-name back-top --output ../example/assets/api/ --only-api
 # drawer
-./bin/demo_tool generate --folder ../lib/src/components/drawer --name TDDrawer,TDDrawerItem,TDDrawerStyle --folder-name drawer --output ../example/assets/api/ --only-api --get-comments
+./bin/demo_tool generate --folder ../lib/src/components/drawer --name TDDrawer,TDDrawerWidget,TDDrawerItem,TDDrawerStyle --folder-name drawer --output ../example/assets/api/ --only-api --get-comments
 # indexes
 ./bin/demo_tool generate --folder ../lib/src/components/indexes --name TDIndexes,TDIndexesAnchor,TDIndexesList --folder-name indexes --output ../example/assets/api/ --only-api --get-comments
 # navbar

tdesign-component/example/assets/api/drawer_api.md

@@ -24,6 +24,7 @@
 | backgroundColor | Color? | - | 组件背景颜色 |
 | bordered | bool? | true | 是否显示边框 |
 | isShowLastBordered | bool? | true | 是否显示最后一行分割线 |
+| contentWidget | Widget? | - | 自定义内容，优先级高于[items]/[footer]/[title] |
 
 ```
 ```
@@ -37,3 +38,27 @@
 | title | String? | - | 每列标题 |
 | icon | Widget? | - | 每列图标 |
 | content | Widget? | - | 完全自定义 |
+
+```
+```
+ ### TDDrawerWidget
+#### 简介
+抽屉内容组件
+ 可用于Scaffold中的drawer属性
+#### 默认构造方法
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| key |  | - |  |
+| footer | Widget? | - | 抽屉的底部 |
+| items | List<TDDrawerItem>? | - | 抽屉里的列表项 |
+| contentWidget | Widget? | - | 自定义内容，优先级高于[items]/[footer]/[title] |
+| title | String? | - | 抽屉的标题 |
+| titleWidget | Widget? | - | 抽屉的标题组件 |
+| onItemClick | TDDrawerItemClickCallback? | - | 点击抽屉里的列表项触发 |
+| width | double? | 280 | 宽度 |
+| style | TDCellStyle? | - | 列表自定义样式 |
+| hover | bool? | true | 是否开启点击反馈 |
+| backgroundColor | Color? | - | 组件背景颜色 |
+| bordered | bool? | true | 是否显示边框 |
+| isShowLastBordered | bool? | true | 是否显示最后一行分割线 |

tdesign-component/example/assets/code/theme._buildCustomTheme.txt

@@ -10,7 +10,7 @@
         }, colorMap: {
           'brandNormalColor': Colors.red
         }),
-        // 不能直接在此处使用contxt，这里虽然被包裹在TGTheme中，但是context未更新，因此阿不到最新数据
+        // 不能直接在此处使用context，这里虽然被包裹在TGTheme中，但是context未更新，因此阿不到最新数据
         child: const TestWidget());
 
     // /// 测试控件

tdesign-component/example/lib/page/td_theme_page.dart

@@ -126,7 +126,7 @@ class _TDThemeColorsPageState extends State<TDThemeColorsPage> {
         }, colorMap: {
           'brandNormalColor': Colors.red
         }),
-        // 不能直接在此处使用contxt，这里虽然被包裹在TGTheme中，但是context未更新，因此阿不到最新数据
+        // 不能直接在此处使用context，这里虽然被包裹在TGTheme中，但是context未更新，因此阿不到最新数据
         child: const TestWidget());
 
     // /// 测试控件

tdesign-component/lib/src/components/cell/td_cell_style.dart

@@ -15,6 +15,8 @@ class TDCellStyle {
     this.borderedColor,
     this.groupBorderedColor,
     this.backgroundColor,
+    this.clickBackgroundColor,
+    this.groupTitleStyle,
     this.padding,
     this.cardBorderRadius,
     this.cardPadding,

tdesign-component/lib/src/components/drawer/td_drawer.dart

@@ -8,8 +8,7 @@ import '../cell/td_cell_group.dart';
 import '../cell/td_cell_style.dart';
 import '../icon/td_icons.dart';
 import '../popup/td_popup_route.dart';
-
-typedef TDDrawerItemClickCallback = void Function(int index, TDDrawerItem item);
+import 'td_drawer_widget.dart';
 
 /// 抽屉方向
 enum TDDrawerPlacement { left, right }
@@ -35,6 +34,7 @@ class TDDrawer {
     this.backgroundColor,
     this.bordered = true,
     this.isShowLastBordered = true,
+    this.contentWidget,
   }) {
     if (visible == true) {
       show();
@@ -53,6 +53,9 @@ class TDDrawer {
   /// 抽屉里的列表项
   final List<TDDrawerItem>? items;
 
+  /// 自定义内容，优先级高于[items]/[footer]/[title]
+  final Widget? contentWidget;
+
   /// 抽屉方向
   final TDDrawerPlacement? placement;
 
@@ -109,56 +112,19 @@ class TDDrawer {
       modalBarrierColor: (showOverlay ?? true) ? null : Colors.transparent,
       modalTop: drawerTop,
       builder: (context) {
-        var cellStyle = style;
-        if (cellStyle == null) {
-          cellStyle = TDCellStyle.cellStyle(context);
-          cellStyle.leftIconColor = TDTheme.of(context).fontGyColor1;
-        }
-        var cells = items
-            ?.asMap()
-            .map(
-              (index, item) => MapEntry(
-                index,
-                TDCell(
-                  titleWidget: item.content,
-                  title: item.title,
-                  leftIconWidget: item.icon,
-                  hover: hover,
-                  bordered: bordered,
-                  onClick: (cell) {
-                    if (onItemClick == null) {
-                      return;
-                    }
-                    onItemClick!(index, items![index]);
-                  },
-                ),
-              ),
-            )
-            .values
-            .toList();
-        return Container(
-          color: backgroundColor ?? Colors.white,
-          width: width ?? 280,
-          height: double.infinity,
-          child: Column(
-            children: [
-              Expanded(
-                child: TDCellGroup(
-                  title: title,
-                  titleWidget: titleWidget,
-                  style: cellStyle,
-                  scrollable: true,
-                  isShowLastBordered: isShowLastBordered,
-                  cells: cells ?? [],
-                ),
-              ),
-              if (footer != null)
-                Container(
-                  padding: EdgeInsets.all(TDTheme.of(context).spacer16),
-                  child: footer,
-                ),
-            ],
-          ),
+        return TDDrawerWidget(
+          footer: footer,
+          items: items,
+          contentWidget: contentWidget,
+          title: title,
+          titleWidget: titleWidget,
+          onItemClick: onItemClick,
+          width: width,
+          style: style,
+          hover: hover,
+          backgroundColor: backgroundColor,
+          bordered: bordered,
+          isShowLastBordered: isShowLastBordered,
         );
       },
     );
@@ -168,11 +134,14 @@ class TDDrawer {
     });
   }
 
+  void open() {
+    show();
+  }
+
   @mustCallSuper
   void close() {
     if (_drawerRoute != null) {
       Navigator.of(context).pop();
-      // _deleteRouter();
     }
   }
 
@@ -182,16 +151,3 @@ class TDDrawer {
   }
 }
 
-/// 抽屉里的列表项
-class TDDrawerItem {
-  TDDrawerItem({this.title, this.icon, this.content});
-
-  /// 每列标题
-  final String? title;
-
-  /// 每列图标
-  final Widget? icon;
-
-  /// 完全自定义
-  final Widget? content;
-}

tdesign-component/lib/src/components/drawer/td_drawer_widget.dart

@@ -0,0 +1,141 @@
+import 'package:flutter/material.dart';
+
+import '../../theme/td_colors.dart';
+import '../../theme/td_spacers.dart';
+import '../../theme/td_theme.dart';
+import '../cell/td_cell.dart';
+import '../cell/td_cell_group.dart';
+import '../cell/td_cell_style.dart';
+import 'td_drawer.dart';
+
+typedef TDDrawerItemClickCallback = void Function(int index, TDDrawerItem item);
+
+/// 抽屉内容组件
+/// 可用于Scaffold中的drawer属性
+class TDDrawerWidget extends StatelessWidget {
+  const TDDrawerWidget({
+    super.key,
+    this.footer,
+    this.items,
+    this.contentWidget,
+    this.title,
+    this.titleWidget,
+    this.onItemClick,
+    this.width = 280,
+    this.style,
+    this.hover = true,
+    this.backgroundColor,
+    this.bordered = true,
+    this.isShowLastBordered = true,
+  });
+
+  /// 抽屉的底部
+  final Widget? footer;
+
+  /// 抽屉里的列表项
+  final List<TDDrawerItem>? items;
+
+  /// 自定义内容，优先级高于[items]/[footer]/[title]
+  final Widget? contentWidget;
+
+  /// 抽屉的标题
+  final String? title;
+
+  /// 抽屉的标题组件
+  final Widget? titleWidget;
+
+  /// 点击抽屉里的列表项触发
+  final TDDrawerItemClickCallback? onItemClick;
+
+  /// 宽度
+  final double? width;
+
+  /// 列表自定义样式
+  final TDCellStyle? style;
+
+  /// 是否开启点击反馈
+  final bool? hover;
+
+  /// 组件背景颜色
+  final Color? backgroundColor;
+
+  /// 是否显示边框
+  final bool? bordered;
+
+  /// 是否显示最后一行分割线
+  final bool? isShowLastBordered;
+
+  @override
+  Widget build(BuildContext context) {
+    var content = contentWidget;
+    if (content == null) {
+      var cellStyle = style;
+      if (cellStyle == null) {
+        cellStyle = TDCellStyle.cellStyle(context);
+        cellStyle.leftIconColor = TDTheme.of(context).fontGyColor1;
+      }
+      var cells = items
+          ?.asMap()
+          .map(
+            (index, item) => MapEntry(
+              index,
+              TDCell(
+                titleWidget: item.content,
+                title: item.title,
+                leftIconWidget: item.icon,
+                hover: hover,
+                bordered: bordered,
+                onClick: (cell) {
+                  if (onItemClick == null) {
+                    return;
+                  }
+                  onItemClick!(index, items![index]);
+                },
+              ),
+            ),
+          )
+          .values
+          .toList();
+      content = Column(
+        children: [
+          Expanded(
+            child: TDCellGroup(
+              title: title,
+              titleWidget: titleWidget,
+              style: cellStyle,
+              scrollable: true,
+              isShowLastBordered: isShowLastBordered,
+              cells: cells ?? [],
+            ),
+          ),
+          if (footer != null)
+            Container(
+              padding: EdgeInsets.all(TDTheme.of(context).spacer16),
+              child: footer,
+            ),
+        ],
+      );
+    }
+    return Container(
+      color: backgroundColor ?? Colors.white,
+      width: width ?? 280,
+      height: double.infinity,
+      child: content,
+    );
+  }
+
+}
+
+/// 抽屉里的列表项
+class TDDrawerItem {
+  TDDrawerItem({this.title, this.icon, this.content});
+
+  /// 每列标题
+  final String? title;
+
+  /// 每列图标
+  final Widget? icon;
+
+  /// 完全自定义
+  final Widget? content;
+}

tdesign-component/lib/tdesign_flutter.dart

@@ -17,6 +17,7 @@ export 'src/components/collapse/td_collapse_panel.dart';
 export 'src/components/dialog/td_dialog.dart';
 export 'src/components/divider/td_divider.dart';
 export 'src/components/drawer/td_drawer.dart';
+export 'src/components/drawer/td_drawer_widget.dart';
 export 'src/components/dropdown_menu/td_dropdown_item.dart';
 export 'src/components/dropdown_menu/td_dropdown_menu.dart';
 export 'src/components/empty/td_empty.dart';

tdesign-site/CHANGELOG.md

@@ -16,7 +16,7 @@ docClass: timeline
 - `Calendar`: 新增monthTitleBuilder参数 @hkaikai ([#419](https://github.com/Tencent/tdesign-flutter/pull/419))
 - `Calendar`: 新增pickerHeight、pickerItemCount参数，用于控制时间选择组件高度 @hkaikai ([#421](https://github.com/Tencent/tdesign-flutter/pull/421))
 - `Toast`: 支持自定义蒙层背景色 @ccXxx1aoBai ([#423](https://github.com/Tencent/tdesign-flutter/pull/423))
-- `Rate`: 支持disabeld 参数 @hkaikai ([#357](https://github.com/Tencent/tdesign-flutter/pull/357))
+- `Rate`: 支持disabled 参数 @hkaikai ([#357](https://github.com/Tencent/tdesign-flutter/pull/357))
 - `Calendar`: 修改CalendarBuilder返回值为Widget @Luozf12345 ([#396](https://github.com/Tencent/tdesign-flutter/pull/396))
 - `SearchBar`: 新增只读属性与点击事件 @shizhe2018 ([#393](https://github.com/Tencent/tdesign-flutter/pull/393))
 - `Dialog`: TDDialogButtonOptions新增属性字体大小 @shizhe2018 ([#381](https://github.com/Tencent/tdesign-flutter/pull/381))