Skip to content

Commit

Permalink
Merge pull request #445 from hkaikai/feature/drawer
Browse files Browse the repository at this point in the history
[TDDrawer] 定义为一个Widget
  • Loading branch information
Luozf12345 authored Jan 9, 2025
2 parents 98be576 + 7e354d1 commit b7b06da
Show file tree
Hide file tree
Showing 9 changed files with 195 additions and 70 deletions.
2 changes: 1 addition & 1 deletion tdesign-component/demo_tool/all_build.sh
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
25 changes: 25 additions & 0 deletions tdesign-component/example/assets/api/drawer_api.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
| backgroundColor | Color? | - | 组件背景颜色 |
| bordered | bool? | true | 是否显示边框 |
| isShowLastBordered | bool? | true | 是否显示最后一行分割线 |
| contentWidget | Widget? | - | 自定义内容,优先级高于[items]/[footer]/[title] |

```
```
Expand All @@ -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 | 是否显示最后一行分割线 |
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
}, colorMap: {
'brandNormalColor': Colors.red
}),
// 不能直接在此处使用contxt,这里虽然被包裹在TGTheme中,但是context未更新,因此阿不到最新数据
// 不能直接在此处使用context,这里虽然被包裹在TGTheme中,但是context未更新,因此阿不到最新数据
child: const TestWidget());

// /// 测试控件
Expand Down
2 changes: 1 addition & 1 deletion tdesign-component/example/lib/page/td_theme_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ class _TDThemeColorsPageState extends State<TDThemeColorsPage> {
}, colorMap: {
'brandNormalColor': Colors.red
}),
// 不能直接在此处使用contxt,这里虽然被包裹在TGTheme中,但是context未更新,因此阿不到最新数据
// 不能直接在此处使用context,这里虽然被包裹在TGTheme中,但是context未更新,因此阿不到最新数据
child: const TestWidget());

// /// 测试控件
Expand Down
2 changes: 2 additions & 0 deletions tdesign-component/lib/src/components/cell/td_cell_style.dart
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ class TDCellStyle {
this.borderedColor,
this.groupBorderedColor,
this.backgroundColor,
this.clickBackgroundColor,
this.groupTitleStyle,
this.padding,
this.cardBorderRadius,
this.cardPadding,
Expand Down
88 changes: 22 additions & 66 deletions tdesign-component/lib/src/components/drawer/td_drawer.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand All @@ -35,6 +34,7 @@ class TDDrawer {
this.backgroundColor,
this.bordered = true,
this.isShowLastBordered = true,
this.contentWidget,
}) {
if (visible == true) {
show();
Expand All @@ -53,6 +53,9 @@ class TDDrawer {
/// 抽屉里的列表项
final List<TDDrawerItem>? items;

/// 自定义内容,优先级高于[items]/[footer]/[title]
final Widget? contentWidget;

/// 抽屉方向
final TDDrawerPlacement? placement;

Expand Down Expand Up @@ -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,
);
},
);
Expand All @@ -168,11 +134,14 @@ class TDDrawer {
});
}

void open() {
show();
}

@mustCallSuper
void close() {
if (_drawerRoute != null) {
Navigator.of(context).pop();
// _deleteRouter();
}
}

Expand All @@ -182,16 +151,3 @@ class TDDrawer {
}
}

/// 抽屉里的列表项
class TDDrawerItem {
TDDrawerItem({this.title, this.icon, this.content});

/// 每列标题
final String? title;

/// 每列图标
final Widget? icon;

/// 完全自定义
final Widget? content;
}
141 changes: 141 additions & 0 deletions tdesign-component/lib/src/components/drawer/td_drawer_widget.dart
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions tdesign-component/lib/tdesign_flutter.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion tdesign-site/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down

0 comments on commit b7b06da

Please sign in to comment.