diff --git a/tdesign-component/example/assets/api/result_api.md b/tdesign-component/example/assets/api/result_api.md new file mode 100644 index 000000000..c72d474f8 --- /dev/null +++ b/tdesign-component/example/assets/api/result_api.md @@ -0,0 +1,11 @@ +## API +### TDResult +#### 默认构造方法 + +| 参数 | 类型 | 默认值 | 说明 | +| --- | --- | --- | --- | +| description | String? | - | 描述文本，用于提供额外信息 | +| icon | Widget? | - | 图标组件，用于在结果中显示一个图标 | +| titleStyle | TextStyle? | - | 自定义字体样式，用于设置标题文本的样式 | +| theme | TDResultTheme | - | 主题样式，定义了结果组件的视觉风格 | +| title | String | - | 标题文本，显示结果的主要信息 | diff --git a/tdesign-component/example/assets/api/search_api.md b/tdesign-component/example/assets/api/search_api.md index ee5aa68b7..ef431c51f 100644 --- a/tdesign-component/example/assets/api/search_api.md +++ b/tdesign-component/example/assets/api/search_api.md @@ -2,21 +2,22 @@ ### TDSearchBar #### 默认构造方法 -| 参数 | 类型 | 默认值 | 说明 | -| --- | --- | --- | --- | -| key | | - | | -| placeHolder | String? | - | 预设文案 | -| action | String? | - | 右侧操作按钮文字 | -| style | TDSearchStyle? | TDSearchStyle.square | 样式 | -| alignment | TDSearchAlignment? | TDSearchAlignment.left | 对齐方式，居中或这头部对齐 | -| onTextChanged | TDSearchBarEvent? | - | 文字改变回调 | -| onSubmitted | TDSearchBarEvent? | - | 提交回调 | -| onEditComplete | TDSearchBarCallBack? | - | 编辑完成回调 | -| onActionClick | TDSearchBarCallBack? | - | 右侧操作按钮点击回调 | -| autoHeight | bool | false | 是否自动计算高度 | -| padding | EdgeInsets | const EdgeInsets.fromLTRB(16, 8, 16, 8) | 内部填充 | -| autoFocus | bool | false | 是否自动获取焦点 | -| mediumStyle | bool | false | 是否在导航栏中的样式 | -| needCancel | bool | false | 是否需要取消按钮 | -| controller | TextEditingController? | - | 控制器 | -| backgroundColor | Color? | Colors.white | 背景颜色 | +| 参数 | 类型 | 默认值 | 说明 | +|-----------------|------------------------|-----------------------------------------|---------------| +| key | | - | | +| placeHolder | String? | - | 预设文案 | +| style | TDSearchStyle? | TDSearchStyle.square | 样式 | +| alignment | TDSearchAlignment? | TDSearchAlignment.left | 对齐方式，居中或这头部对齐 | +| onTextChanged | TDSearchBarEvent? | - | 文字改变回调 | +| onSubmitted | TDSearchBarEvent? | - | 提交回调 | +| onEditComplete | TDSearchBarCallBack? | - | 编辑完成回调 | +| autoHeight | bool | false | 是否自动计算高度 | +| padding | EdgeInsets | const EdgeInsets.fromLTRB(16, 8, 16, 8) | 内部填充 | +| autoFocus | bool | false | 是否自动获取焦点 | +| mediumStyle | bool | false | 是否在导航栏中的样式 | +| needCancel | bool | false | 是否需要取消按钮 | +| action | String | ‘’ | 右侧操作按钮文字 | +| onActionClick | TDSearchBarEvent? | - | 右侧操作按钮点击回调 | +| controller | TextEditingController? | - | 控制器 | +| backgroundColor | Color? | Colors.white | 背景颜色 | + diff --git a/tdesign-component/example/assets/code/result._buildBasicResultDefault.txt b/tdesign-component/example/assets/code/result._buildBasicResultDefault.txt new file mode 100644 index 000000000..8ea334a47 --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildBasicResultDefault.txt @@ -0,0 +1,7 @@ + + TDResult _buildBasicResultDefault(BuildContext context) { + return const TDResult( + title: '默认状态', + theme: TDResultTheme.defaultTheme, + ); + } \ No newline at end of file diff --git a/tdesign-component/example/assets/code/result._buildBasicResultError.txt b/tdesign-component/example/assets/code/result._buildBasicResultError.txt new file mode 100644 index 000000000..44d787a05 --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildBasicResultError.txt @@ -0,0 +1,7 @@ + + TDResult _buildBasicResultError(BuildContext context) { + return const TDResult( + title: '失败状态', + theme: TDResultTheme.error, + ); + } \ No newline at end of file diff --git a/tdesign-component/example/assets/code/result._buildBasicResultSuccess.txt b/tdesign-component/example/assets/code/result._buildBasicResultSuccess.txt new file mode 100644 index 000000000..f59a5bbe8 --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildBasicResultSuccess.txt @@ -0,0 +1,7 @@ + + TDResult _buildBasicResultSuccess(BuildContext context) { + return const TDResult( + title: '成功状态', + theme: TDResultTheme.success, + ); + } \ No newline at end of file diff --git a/tdesign-component/example/assets/code/result._buildBasicResultWarning.txt b/tdesign-component/example/assets/code/result._buildBasicResultWarning.txt new file mode 100644 index 000000000..40d86016f --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildBasicResultWarning.txt @@ -0,0 +1,7 @@ + + TDResult _buildBasicResultWarning(BuildContext context) { + return const TDResult( + title: '警示状态', + theme: TDResultTheme.warning, + ); + } \ No newline at end of file diff --git a/tdesign-component/example/assets/code/result._buildCustomResultContent.txt b/tdesign-component/example/assets/code/result._buildCustomResultContent.txt new file mode 100644 index 000000000..4aab5bec2 --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildCustomResultContent.txt @@ -0,0 +1,7 @@ + + Widget _buildCustomResult(BuildContext context) { + return TDResult( + title: '自定义结果', + icon: Image.asset('assets/img/illustration.png'), + description: '描述文字'); + } \ No newline at end of file diff --git a/tdesign-component/example/assets/code/result._buildResultWithDescriptionDefault.txt b/tdesign-component/example/assets/code/result._buildResultWithDescriptionDefault.txt new file mode 100644 index 000000000..3fee21945 --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildResultWithDescriptionDefault.txt @@ -0,0 +1,8 @@ + + TDResult _buildResultWithDescriptionDefault(BuildContext context) { + return const TDResult( + title: '默认状态', + theme: TDResultTheme.defaultTheme, + description: '描述文字', + ); + } \ No newline at end of file diff --git a/tdesign-component/example/assets/code/result._buildResultWithDescriptionError.txt b/tdesign-component/example/assets/code/result._buildResultWithDescriptionError.txt new file mode 100644 index 000000000..c0740422a --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildResultWithDescriptionError.txt @@ -0,0 +1,8 @@ + + TDResult _buildResultWithDescriptionError(BuildContext context) { + return const TDResult( + title: '失败状态', + theme: TDResultTheme.error, + description: '描述文字', + ); + } \ No newline at end of file diff --git a/tdesign-component/example/assets/code/result._buildResultWithDescriptionSuccess.txt b/tdesign-component/example/assets/code/result._buildResultWithDescriptionSuccess.txt new file mode 100644 index 000000000..48522d226 --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildResultWithDescriptionSuccess.txt @@ -0,0 +1,8 @@ + + TDResult _buildResultWithDescriptionSuccess(BuildContext context) { + return const TDResult( + title: '成功状态', + theme: TDResultTheme.success, + description: '描述文字', + ); + } \ No newline at end of file diff --git a/tdesign-component/example/assets/code/result._buildResultWithDescriptionWarning.txt b/tdesign-component/example/assets/code/result._buildResultWithDescriptionWarning.txt new file mode 100644 index 000000000..dde3581e5 --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildResultWithDescriptionWarning.txt @@ -0,0 +1,8 @@ + + TDResult _buildResultWithDescriptionWarning(BuildContext context) { + return const TDResult( + title: '警示状态', + theme: TDResultTheme.warning, + description: '描述文字', + ); + } \ No newline at end of file diff --git a/tdesign-component/example/assets/code/search._buildSearchBarWithAction.txt b/tdesign-component/example/assets/code/search._buildSearchBarWithAction.txt new file mode 100644 index 000000000..bfab4d164 --- /dev/null +++ b/tdesign-component/example/assets/code/search._buildSearchBarWithAction.txt @@ -0,0 +1,30 @@ + + Widget _buildSearchBarWithAction(BuildContext context) { + return Column( + children: [ + TDSearchBar( + placeHolder: '搜索预设文案', + alignment: TDSearchAlignment.left, + action: '搜索', + onActionClick: (String text) { + setState(() { + searchText = text; + }); + }, + onTextChanged: (String text) { + setState(() { + inputText = text; + }); + }, + ), + const SizedBox(height: 10,), + Container( + padding: const EdgeInsets.only(left: 15), + alignment: Alignment.centerLeft, + child: TDText( + '搜索框输入的内容：${searchText ?? ''}', + ), + ) + ], + ); + } \ No newline at end of file diff --git a/tdesign-component/example/assets/img/illustration.png b/tdesign-component/example/assets/img/illustration.png new file mode 100644 index 000000000..fee3ad5f9 Binary files /dev/null and b/tdesign-component/example/assets/img/illustration.png differ diff --git a/tdesign-component/example/lib/config.dart b/tdesign-component/example/lib/config.dart index 0333b7c0e..5a043f6d6 100644 --- a/tdesign-component/example/lib/config.dart +++ b/tdesign-component/example/lib/config.dart @@ -40,6 +40,7 @@ import 'page/td_popup_page.dart'; import 'page/td_radio_page.dart'; import 'page/td_radius_page.dart'; import 'page/td_refresh_page.dart'; +import 'page/td_result_page.dart'; import 'page/td_search_bar_page.dart'; import 'page/td_shadows_page.dart'; import 'page/td_slider_page.dart'; @@ -190,8 +191,7 @@ Map> exampleMap = { ExamplePageModel( text: 'Result 结果', name: 'result', - isTodo: true, - pageBuilder: _wrapInheritedTheme((context) => const TodoPage())), + pageBuilder: _wrapInheritedTheme((context) => const TDResultPage())), ExamplePageModel( text: 'Skeleton 骨架屏', name: 'skeleton', diff --git a/tdesign-component/example/lib/page/td_result_page.dart b/tdesign-component/example/lib/page/td_result_page.dart new file mode 100644 index 000000000..1f43052ad --- /dev/null +++ b/tdesign-component/example/lib/page/td_result_page.dart @@ -0,0 +1,206 @@ +import 'package:flutter/material.dart'; +import 'package:tdesign_flutter/tdesign_flutter.dart'; +import '../../base/example_widget.dart'; +import '../annotation/demo.dart'; + +class TDResultPage extends StatefulWidget { + const TDResultPage({Key? key}) : super(key: key); + + @override + State createState() => _TDResultPageState(); +} + +class _TDResultPageState extends State { + @override + Widget build(BuildContext context) { + return ExamplePage( + title: 'Result 结果', + desc: '反馈结果状态。', + exampleCodeGroup: 'result', + children: [ + ExampleModule(title: '组件类型', children: [ + ExampleItem( + desc: '基础结果', ignoreCode: true, builder: _buildBasicResult), + ExampleItem( + desc: '带描述的结果', + ignoreCode: true, + builder: _buildResultWithDescription), + ExampleItem( + desc: '自定义结果', ignoreCode: true, builder: _buildCustomResult), + ExampleItem( + desc: '页面示例', ignoreCode: true, builder: _buildPageExample), + ]), + ], + ); + } + + Widget _buildBasicResult(BuildContext context) { + return Column( + children: [ + CodeWrapper( + builder: _buildBasicResultSuccess, + ), + const SizedBox(height: 48), + CodeWrapper( + builder: _buildBasicResultError, + ), + const SizedBox(height: 48), + CodeWrapper( + builder: _buildBasicResultWarning, + ), + const SizedBox(height: 48), + CodeWrapper( + builder: _buildBasicResultDefault, + ), + ], + ); + } + + Widget _buildResultWithDescription(BuildContext context) { + return Column( + children: [ + CodeWrapper( + builder: _buildResultWithDescriptionSuccess, + ), + const SizedBox(height: 48), + CodeWrapper( + builder: _buildResultWithDescriptionError, + ), + const SizedBox(height: 48), + CodeWrapper( + builder: _buildResultWithDescriptionWarning, + ), + const SizedBox(height: 48), + CodeWrapper( + builder: _buildResultWithDescriptionDefault, + ), + ], + ); + } + + Widget _buildCustomResult(BuildContext context) { + return CodeWrapper( + builder: _buildCustomResultContent, + ); + } + + Widget _buildPageExample(BuildContext context) { + return TDButton( + text: '页面示例', + theme: TDButtonTheme.primary, + size: TDButtonSize.large, + type: TDButtonType.outline, + isBlock: true, + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => Scaffold( + appBar: AppBar( + title: const Text('Result 结果'), + ), + body: Column( + children: [ + const SizedBox(height: 48), + const TDResult( + title: '成功状态', + theme: TDResultTheme.success, + description: '描述文字', + ), + const SizedBox(height: 48), + TDButton( + text: '返回', + theme: TDButtonTheme.primary, + size: TDButtonSize.large, + type: TDButtonType.outline, + isBlock: true, + onTap: () { + Navigator.pop(context); + }, + ), + ], + ), + ), + ), + ); + }, + ); + } + + @Demo(group: 'result') + TDResult _buildBasicResultSuccess(BuildContext context) { + return const TDResult( + title: '成功状态', + theme: TDResultTheme.success, + ); + } + + @Demo(group: 'result') + TDResult _buildBasicResultError(BuildContext context) { + return const TDResult( + title: '失败状态', + theme: TDResultTheme.error, + ); + } + + @Demo(group: 'result') + TDResult _buildBasicResultWarning(BuildContext context) { + return const TDResult( + title: '警示状态', + theme: TDResultTheme.warning, + ); + } + + @Demo(group: 'result') + TDResult _buildBasicResultDefault(BuildContext context) { + return const TDResult( + title: '默认状态', + theme: TDResultTheme.defaultTheme, + ); + } + + @Demo(group: 'result') + TDResult _buildResultWithDescriptionSuccess(BuildContext context) { + return const TDResult( + title: '成功状态', + theme: TDResultTheme.success, + description: '描述文字', + ); + } + + @Demo(group: 'result') + TDResult _buildResultWithDescriptionError(BuildContext context) { + return const TDResult( + title: '失败状态', + theme: TDResultTheme.error, + description: '描述文字', + ); + } + + @Demo(group: 'result') + TDResult _buildResultWithDescriptionWarning(BuildContext context) { + return const TDResult( + title: '警示状态', + theme: TDResultTheme.warning, + description: '描述文字', + ); + } + + @Demo(group: 'result') + TDResult _buildResultWithDescriptionDefault(BuildContext context) { + return const TDResult( + title: '默认状态', + theme: TDResultTheme.defaultTheme, + description: '描述文字', + ); + } + + @Demo(group: 'result') + TDResult _buildCustomResultContent(BuildContext context) { + return TDResult( + title: '自定义结果', + icon: Image.asset('assets/img/illustration.png'), + description: '描述文字', + ); + } +} diff --git a/tdesign-component/example/lib/page/td_search_bar_page.dart b/tdesign-component/example/lib/page/td_search_bar_page.dart index f3431a1d7..85cba87b0 100644 --- a/tdesign-component/example/lib/page/td_search_bar_page.dart +++ b/tdesign-component/example/lib/page/td_search_bar_page.dart @@ -13,6 +13,7 @@ class TDSearchBarPage extends StatefulWidget { class _TDSearchBarPageState extends State { String? inputText; + String? searchText; TextEditingController inputController = TextEditingController(); @override @@ -35,9 +36,10 @@ class _TDSearchBarPageState extends State { ExampleItem(desc: '默认状态其他对齐方式', builder: _buildCenterSearchBar), ]), ], - test: [ + test: [ + ExampleItem(desc: '获取焦点后显示自定义操作按钮', builder: _buildSearchBarWithAction), ExampleItem(desc: '自定义获取焦点后显示按钮', builder: _buildFocusSearchBarWithAction), - ]); + ],); } @Demo(group: 'search') @@ -120,6 +122,37 @@ class _TDSearchBarPageState extends State { ); } + @Demo(group: 'search') + Widget _buildSearchBarWithAction(BuildContext context) { + return Column( + children: [ + TDSearchBar( + placeHolder: '搜索预设文案', + alignment: TDSearchAlignment.left, + action: '搜索', + onActionClick: (String text) { + setState(() { + searchText = text; + }); + }, + onTextChanged: (String text) { + setState(() { + inputText = text; + }); + }, + ), + const SizedBox(height: 10,), + Container( + padding: const EdgeInsets.only(left: 15), + alignment: Alignment.centerLeft, + child: TDText( + '搜索框输入的内容：${searchText ?? ''}', + ), + ) + ], + ); + } + @Demo(group: 'search') Widget _buildFocusSearchBarWithAction(BuildContext context) { return TDSearchBar( diff --git a/tdesign-component/lib/src/components/result/td_result.dart b/tdesign-component/lib/src/components/result/td_result.dart new file mode 100644 index 000000000..3632dcd39 --- /dev/null +++ b/tdesign-component/lib/src/components/result/td_result.dart @@ -0,0 +1,78 @@ +import 'package:flutter/material.dart'; +import '../../../tdesign_flutter.dart'; + +enum TDResultTheme { defaultTheme, success, warning, error } + +class TDResult extends StatelessWidget { +// 描述文本，用于提供额外信息 + final String? description; +// 图标组件，用于在结果中显示一个图标 + final Widget? icon; +// 自定义字体样式，用于设置标题文本的样式 + final TextStyle? titleStyle; +// 主题样式，定义了结果组件的视觉风格 + final TDResultTheme theme; +// 标题文本，显示结果的主要信息 + final String title; + + // 构造函数，用于初始化Result组件 + const TDResult({ + Key? key, + this.description, + this.icon, + this.titleStyle, + this.theme = TDResultTheme.defaultTheme, // 默认主题样式为defaultTheme + this.title = '', // 默认标题为空字符串 + }) : super(key: key); + + @override + Widget build(BuildContext context) { + // 根据主题获取默认的图标组件 + Widget displayIcon = icon ?? _getDefaultIconByTheme(context, theme); + // 构建组件布局 + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + child: displayIcon, + ), + // 如果标题不为空，则显示标题 + if (title.isNotEmpty) + Padding( + padding: const EdgeInsets.only(top: 17), + child: TDText( + title, + textColor: TDTheme.of(context).fontGyColor1, + font: TDTheme.of(context).fontTitleExtraLarge, + style: titleStyle, + )), + // 如果描述不为空，则显示描述 + if (description?.isNotEmpty ?? false) + Padding( + padding: const EdgeInsets.only(top: 8), + child: TDText(description!, + textColor: TDTheme.of(context).fontGyColor2, + font: TDTheme.of(context).fontTitleSmall), + ), + ], + ); + } + + // 根据主题返回对应的默认图标组件 + Widget _getDefaultIconByTheme(BuildContext context, TDResultTheme theme) { + switch (theme) { + case TDResultTheme.success: + return Icon(TDIcons.check_circle, + color: TDTheme.of(context).successNormalColor, size: 70); + case TDResultTheme.warning: + return Icon(TDIcons.error_circle, + color: TDTheme.of(context).warningNormalColor, size: 70); + case TDResultTheme.error: + return Icon(TDIcons.close_circle, + color: TDTheme.of(context).errorNormalColor, size: 70); + default: + return Icon(TDIcons.info_circle, + color: TDTheme.of(context).brandNormalColor, size: 70); + } + } +} diff --git a/tdesign-component/lib/src/components/search/td_search_bar.dart b/tdesign-component/lib/src/components/search/td_search_bar.dart index 260e19ccd..55c242361 100644 --- a/tdesign-component/lib/src/components/search/td_search_bar.dart +++ b/tdesign-component/lib/src/components/search/td_search_bar.dart @@ -40,6 +40,8 @@ class TDSearchBar extends StatefulWidget { this.needCancel = false, this.controller, this.backgroundColor = Colors.white, + this.action = '', + this.onActionClick, }) : super(key: key); /// 预设文案 @@ -84,6 +86,11 @@ class TDSearchBar extends StatefulWidget { /// 编辑完成回调 final TDSearchBarCallBack? onEditComplete; + /// 自定义操作文字 + final String action; + + /// 自定义操作回调 + final TDSearchBarEvent? onActionClick; /// 右侧操作按钮点击回调 final TDSearchBarCallBack? onActionClick; @@ -177,6 +184,21 @@ class _TDSearchBarState extends State : TDTheme.of(context).fontBodyLarge; } + Widget actionBtn(BuildContext context, String? text, {String? action, TDSearchBarEvent? onActionClick} ){ + return GestureDetector( + onTap: (){ + onActionClick!(text??''); + }, + child: Container( + padding: const EdgeInsets.only(left: 16), + child: Text(action!, + style: TextStyle( + fontSize: getSize(context)?.size, + color: TDTheme.of(context).brandNormalColor)), + ), + ); + } + @override Widget build(BuildContext context) { return Container( @@ -263,6 +285,48 @@ class _TDSearchBarState extends State ), ), ), + widget.action.isNotEmpty + ? actionBtn( + context, + controller.text, + action: widget.action, + onActionClick: widget.onActionClick ?? (String text) {}, + ) + : Offstage( + offstage: cancelBtnHide || !widget.needCancel, + child: GestureDetector( + onTap: () { + if (widget.onActionClick != null) { + widget.onActionClick!(); + } else { + _cleanInputText(); + if (widget.onTextChanged != null) { + widget.onTextChanged!(''); + } + } + if (_animation == null) { + focusNode.unfocus(); + setState(() { + _status = _TDSearchBarStatus.unFocus; + }); + return; + } + setState(() { + _status = _TDSearchBarStatus.animatingToUnFocus; + }); + focusNode.unfocus(); + _animationController.reverse( + from: _animationController.upperBound); + }, + child: Container( + padding: const EdgeInsets.only(left: 16), + child: Text(context.resource.cancel, + style: TextStyle( + fontSize: getSize(context)?.size, + color: TDTheme.of(context).brandNormalColor)), + ), + ), + ), Offstage( offstage: cancelBtnHide || !widget.needCancel, child: GestureDetector( diff --git a/tdesign-component/lib/src/components/sidebar/td_wrap_sidebar_item.dart b/tdesign-component/lib/src/components/sidebar/td_wrap_sidebar_item.dart index 31e0d5e2e..bf5b46072 100644 --- a/tdesign-component/lib/src/components/sidebar/td_wrap_sidebar_item.dart +++ b/tdesign-component/lib/src/components/sidebar/td_wrap_sidebar_item.dart @@ -40,7 +40,6 @@ class TDWrapSideBarItem extends StatelessWidget { final TDSideBarStyle style; static const preLineWidth = 3.0; - @override Widget build(BuildContext context) { return GestureDetector( @@ -54,9 +53,7 @@ class TDWrapSideBarItem extends StatelessWidget { decoration: BoxDecoration( color: Colors.white, ), - child: ConstrainedBox( - constraints: const BoxConstraints(minHeight: 56), - child: Container( + child:Container( decoration: BoxDecoration( color: selected ? Colors.white : const Color.fromRGBO(243, 243, 243, 1), borderRadius: bottomAdjacent || topAdjacent @@ -70,12 +67,11 @@ class TDWrapSideBarItem extends StatelessWidget { Expanded( child: Padding( padding: contentPadding ?? const EdgeInsets.all(16), - child: renderMainContent(context), + child: renderMainContent(context) )) ], ), ), - ), ); } @@ -83,31 +79,28 @@ class TDWrapSideBarItem extends StatelessWidget { return ConstrainedBox( constraints: const BoxConstraints(minHeight: 56), child: Container( - height: 56, + // height: 86, decoration: const BoxDecoration(color: Color.fromRGBO(246, 246, 246, 1)), - child: Padding( + padding: const EdgeInsets.all(8), + child: Container( + decoration: BoxDecoration( + color: selected && !disabled ? Colors.white : null, borderRadius: BorderRadius.circular(6)), padding: const EdgeInsets.all(8), - child: Container( - decoration: BoxDecoration( - color: selected && !disabled ? Colors.white : null, borderRadius: BorderRadius.circular(6)), - child: Padding( - padding: const EdgeInsets.all(8), - child: renderMainContent(context), - ), - ), + child: renderMainContent(context), ), )); } Widget renderMainContent(BuildContext context) { + return Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ renderIcon(context), Expanded( - child: renderLabel(context), - ), - // renderBadge(context) + child: renderLabel(context)), + if(label.length>4) + renderBadge(context), // SizedBox( // width: !disabled && selected ? 0 : preLineWidth, // ) @@ -116,23 +109,25 @@ class TDWrapSideBarItem extends StatelessWidget { } Widget renderPreLine(BuildContext context) { - return Visibility( - visible: !disabled && selected, - replacement: const SizedBox(width:preLineWidth ,), - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Container( - width: preLineWidth, - height: 14, - decoration: BoxDecoration( - color: selectedTextStyle != null - ? selectedTextStyle?.color - : (selectedColor ?? TDTheme.of(context).brandNormalColor), - borderRadius: BorderRadius.circular(4)), - ) - ], - ), + return Visibility( + visible: !disabled && selected, + replacement: const SizedBox( + width: preLineWidth, + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + width: preLineWidth, + height: 14, + decoration: BoxDecoration( + color: selectedTextStyle != null + ? selectedTextStyle?.color + : (selectedColor ?? TDTheme.of(context).brandNormalColor), + borderRadius: BorderRadius.circular(4)), + ) + ], + ), ); } @@ -156,21 +151,22 @@ class TDWrapSideBarItem extends StatelessWidget { } Widget renderLabel(BuildContext context) { - return TDText.rich( + return TDText.rich( TextSpan( children: [ WidgetSpan( child: TDText( - label, - style: selected ? (selectedTextStyle ?? TextStyle(color: selectedColor)) : textStyle, - fontWeight: selected && !disabled ? FontWeight.w600 : FontWeight.w400, - textColor: disabled - ? TDTheme.of(context).fontGyColor4 - : selected + label, + style: selected ? (selectedTextStyle ?? TextStyle(color: selectedColor)) : textStyle, + fontWeight: selected && !disabled ? FontWeight.w600 : FontWeight.w400, + textColor: disabled + ? TDTheme.of(context).fontGyColor4 + : selected ? selectedColor ?? TDTheme.of(context).brandNormalColor : Colors.black, - forceVerticalCenter: true, - )), + // forceVerticalCenter: true, + )), + if(label.length<4) WidgetSpan( child: SizedBox( width: 1, @@ -190,15 +186,10 @@ class TDWrapSideBarItem extends StatelessWidget { Widget renderBadge(BuildContext context) { return SizedBox( width: 1, + height:40, child: Stack( clipBehavior: Clip.none, - children: [ - Positioned( - child: badge ?? Container(), - left: 0, - top: 0, - ), - ], + children: [badge != null ? Positioned(top: -6, child: badge!) : Container()], ), ); } diff --git a/tdesign-component/lib/tdesign_flutter.dart b/tdesign-component/lib/tdesign_flutter.dart index 6b72b82ae..d37ae4a7b 100644 --- a/tdesign-component/lib/tdesign_flutter.dart +++ b/tdesign-component/lib/tdesign_flutter.dart @@ -45,6 +45,7 @@ export 'src/components/popup/td_popup_panel.dart'; export 'src/components/popup/td_popup_route.dart'; export 'src/components/radio/td_radio.dart'; export 'src/components/refresh/td_refresh_header.dart'; +export 'src/components/result/td_result.dart'; export 'src/components/search/td_search_bar.dart'; export 'src/components/sidebar/td_sidebar.dart'; export 'src/components/sidebar/td_sidebar_controller.dart';