From 30b01fde52ec48fd5c2aff10b7b1785a8a3eab71 Mon Sep 17 00:00:00 2001 From: hkaikai <617760820@qq.com> Date: Wed, 8 Jan 2025 16:08:11 +0800 Subject: [PATCH 1/2] =?UTF-8?q?TDDrawer=E5=AE=9A=E4=B9=89=E4=B8=BA?= =?UTF-8?q?=E4=B8=80=E4=B8=AAWidget?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tdesign-component/demo_tool/all_build.sh | 2 +- .../example/assets/api/drawer_api.md | 25 ++++ .../src/components/cell/td_cell_style.dart | 2 + .../lib/src/components/drawer/td_drawer.dart | 88 +++-------- .../components/drawer/td_drawer_widget.dart | 141 ++++++++++++++++++ tdesign-component/lib/tdesign_flutter.dart | 1 + 6 files changed, 192 insertions(+), 67 deletions(-) create mode 100644 tdesign-component/lib/src/components/drawer/td_drawer_widget.dart diff --git a/tdesign-component/demo_tool/all_build.sh b/tdesign-component/demo_tool/all_build.sh index 8aa4e780f..735979b26 100644 --- a/tdesign-component/demo_tool/all_build.sh +++ b/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 diff --git a/tdesign-component/example/assets/api/drawer_api.md b/tdesign-component/example/assets/api/drawer_api.md index 7dfc8a5d4..a3f2ed168 100644 --- a/tdesign-component/example/assets/api/drawer_api.md +++ b/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? | - | 抽屉里的列表项 | +| 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 | 是否显示最后一行分割线 | diff --git a/tdesign-component/lib/src/components/cell/td_cell_style.dart b/tdesign-component/lib/src/components/cell/td_cell_style.dart index dcad94af4..94919cc2e 100644 --- a/tdesign-component/lib/src/components/cell/td_cell_style.dart +++ b/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, diff --git a/tdesign-component/lib/src/components/drawer/td_drawer.dart b/tdesign-component/lib/src/components/drawer/td_drawer.dart index 886a21fe5..1e86f1d34 100644 --- a/tdesign-component/lib/src/components/drawer/td_drawer.dart +++ b/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? 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; -} diff --git a/tdesign-component/lib/src/components/drawer/td_drawer_widget.dart b/tdesign-component/lib/src/components/drawer/td_drawer_widget.dart new file mode 100644 index 000000000..fbeff44a6 --- /dev/null +++ b/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? 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; +} \ No newline at end of file diff --git a/tdesign-component/lib/tdesign_flutter.dart b/tdesign-component/lib/tdesign_flutter.dart index c827559a8..34397fd83 100644 --- a/tdesign-component/lib/tdesign_flutter.dart +++ b/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'; From 7e354d1def9f47a07027e2f14532c84d1ab7d150 Mon Sep 17 00:00:00 2001 From: hkaikai <617760820@qq.com> Date: Wed, 8 Jan 2025 16:21:27 +0800 Subject: [PATCH 2/2] fix Spell Check --- .../example/assets/code/theme._buildCustomTheme.txt | 2 +- tdesign-component/example/lib/page/td_theme_page.dart | 2 +- tdesign-site/CHANGELOG.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/tdesign-component/example/assets/code/theme._buildCustomTheme.txt b/tdesign-component/example/assets/code/theme._buildCustomTheme.txt index 1eb16f5fe..7f9d1a47f 100644 --- a/tdesign-component/example/assets/code/theme._buildCustomTheme.txt +++ b/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()); // /// 测试控件 diff --git a/tdesign-component/example/lib/page/td_theme_page.dart b/tdesign-component/example/lib/page/td_theme_page.dart index d3219d2ad..082378005 100644 --- a/tdesign-component/example/lib/page/td_theme_page.dart +++ b/tdesign-component/example/lib/page/td_theme_page.dart @@ -126,7 +126,7 @@ class _TDThemeColorsPageState extends State { }, colorMap: { 'brandNormalColor': Colors.red }), - // 不能直接在此处使用contxt，这里虽然被包裹在TGTheme中，但是context未更新，因此阿不到最新数据 + // 不能直接在此处使用context，这里虽然被包裹在TGTheme中，但是context未更新，因此阿不到最新数据 child: const TestWidget()); // /// 测试控件 diff --git a/tdesign-site/CHANGELOG.md b/tdesign-site/CHANGELOG.md index 230315f94..9f0ce24df 100644 --- a/tdesign-site/CHANGELOG.md +++ b/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))