From 58ae4c7480795ccce301c41661558ab2acaca0f7 Mon Sep 17 00:00:00 2001 From: shinyina Date: Thu, 4 Jul 2024 23:31:08 +0800 Subject: [PATCH 01/11] =?UTF-8?q?feat(Result=E7=BB=93=E6=9E=9C):=20?= =?UTF-8?q?=E6=96=B0=E5=A2=9EResult=E7=BB=93=E6=9E=9C=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../example/assets/api/result_api.md | 10 ++ .../assets/code/result._buildBasicResult.txt | 26 ++++ .../assets/code/result._buildCustomResult.txt | 7 + .../result._buildResultWithDescription.txt | 30 ++++ .../example/assets/img/illustration.png | Bin 0 -> 6407 bytes tdesign-component/example/lib/config.dart | 4 +- .../example/lib/page/td_result_page.dart | 139 ++++++++++++++++++ .../lib/src/components/result/td_result.dart | 78 ++++++++++ tdesign-component/lib/tdesign_flutter.dart | 1 + 9 files changed, 293 insertions(+), 2 deletions(-) create mode 100644 tdesign-component/example/assets/api/result_api.md create mode 100644 tdesign-component/example/assets/code/result._buildBasicResult.txt create mode 100644 tdesign-component/example/assets/code/result._buildCustomResult.txt create mode 100644 tdesign-component/example/assets/code/result._buildResultWithDescription.txt create mode 100644 tdesign-component/example/assets/img/illustration.png create mode 100644 tdesign-component/example/lib/page/td_result_page.dart create mode 100644 tdesign-component/lib/src/components/result/td_result.dart 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..3260afe98 --- /dev/null +++ b/tdesign-component/example/assets/api/result_api.md @@ -0,0 +1,10 @@ +## API +### TDResult +#### 默认构造方法 + +| 参数 | 类型 | 默认值 | 说明 | +| --- | --- | --- | --- | +| description | String? | - | 描述文本，用于提供额外信息 | +| icon | Widget? | - | 图标组件，用于在结果中显示一个图标 | +| theme | TDResultTheme | - | 主题样式，定义了结果组件的视觉风格 | +| title | String | - | 标题文本，显示结果的主要信息 | \ No newline at end of file diff --git a/tdesign-component/example/assets/code/result._buildBasicResult.txt b/tdesign-component/example/assets/code/result._buildBasicResult.txt new file mode 100644 index 000000000..26b3d46eb --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildBasicResult.txt @@ -0,0 +1,26 @@ + + Widget _buildBasicResult(BuildContext context) { + return const Column( + children: const [ + TDResult( + title: '成功状态', + theme: TDResultTheme.success, + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '失败状态', + theme: TDResultTheme.error, + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '警示状态', + theme: TDResultTheme.warning, + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '默认状态', + theme: TDResultTheme.defaultTheme, + ), + ], + ); + } \ No newline at end of file diff --git a/tdesign-component/example/assets/code/result._buildCustomResult.txt b/tdesign-component/example/assets/code/result._buildCustomResult.txt new file mode 100644 index 000000000..4aab5bec2 --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildCustomResult.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._buildResultWithDescription.txt b/tdesign-component/example/assets/code/result._buildResultWithDescription.txt new file mode 100644 index 000000000..9ef640281 --- /dev/null +++ b/tdesign-component/example/assets/code/result._buildResultWithDescription.txt @@ -0,0 +1,30 @@ + + Widget _buildResultWithDescription(BuildContext context) { + return const Column( + children: const [ + TDResult( + title: '成功状态', + theme: TDResultTheme.success, + description: '描述文字', + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '失败状态', + theme: TDResultTheme.error, + description: '描述文字', + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '警示状态', + theme: TDResultTheme.warning, + description: '描述文字', + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '默认状态', + theme: TDResultTheme.defaultTheme, + description: '描述文字', + ), + ], + ); + } \ 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 0000000000000000000000000000000000000000..fee3ad5f906929dafefd187ebe84f8fb2344cc15 GIT binary patch literal 6407 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 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..f40311de8 --- /dev/null +++ b/tdesign-component/example/lib/page/td_result_page.dart @@ -0,0 +1,139 @@ +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: '基础结果', builder: _buildBasicResult), + ExampleItem(desc: '带描述的结果', builder: _buildResultWithDescription), + ExampleItem(desc: '自定义结果', builder: _buildCustomResult), + ExampleItem(desc: '页面示例',ignoreCode: true, builder: _buildPageExample), + ]), + ], + ); + } + + @Demo(group: 'result') + Widget _buildBasicResult(BuildContext context) { + return const Column( + children: const [ + TDResult( + title: '成功状态', + theme: TDResultTheme.success, + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '失败状态', + theme: TDResultTheme.error, + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '警示状态', + theme: TDResultTheme.warning, + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '默认状态', + theme: TDResultTheme.defaultTheme, + ), + ], + ); + } + + @Demo(group: 'result') + Widget _buildResultWithDescription(BuildContext context) { + return const Column( + children: const [ + TDResult( + title: '成功状态', + theme: TDResultTheme.success, + description: '描述文字', + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '失败状态', + theme: TDResultTheme.error, + description: '描述文字', + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '警示状态', + theme: TDResultTheme.warning, + description: '描述文字', + ), + SizedBox(height: 48), // 添加间距 + TDResult( + title: '默认状态', + theme: TDResultTheme.defaultTheme, + description: '描述文字', + ), + ], + ); + } + + @Demo(group: 'result') + Widget _buildCustomResult(BuildContext context) { + return TDResult( + title: '自定义结果', + icon: Image.asset('assets/img/illustration.png'), + description: '描述文字'); + } + + @Demo(group: 'result') + 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); + }, + ) + ], + ), + )), + ); + }, + ); + } +} \ No newline at end of file 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..b7d098b71 --- /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 TDResultTheme theme; +// 标题文本，显示结果的主要信息 + final String title; + + // 构造函数，用于初始化Result组件 + const TDResult({ + Key? key, + this.description, + this.icon, + this.theme = TDResultTheme.defaultTheme, // 默认主题样式为defaultTheme + this.title = '', // 默认标题为空字符串 + }) : super(key: key); + + @override + Widget build(BuildContext context) { + // 根据主题获取默认的图标组件 + Widget displayIcon = _getDefaultIconByTheme(context, theme); + // 如果提供了自定义图标，则使用自定义图标 + if (icon != null) { + displayIcon = icon!; + } + // 构建组件布局 + 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, + )), + // 如果描述不为空，则显示描述 + if (description != null) + 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/tdesign_flutter.dart b/tdesign-component/lib/tdesign_flutter.dart index daab20a59..8ab391ab0 100644 --- a/tdesign-component/lib/tdesign_flutter.dart +++ b/tdesign-component/lib/tdesign_flutter.dart @@ -29,6 +29,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'; From 9fb6841397a3dd18ada16dec0b350eb91c429d93 Mon Sep 17 00:00:00 2001 From: shinyina Date: Sun, 28 Jul 2024 00:36:34 +0800 Subject: [PATCH 02/11] =?UTF-8?q?feat:=20demo=E5=88=86=E5=89=B2=20|=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0titleStyle=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../example/assets/api/result_api.md | 3 +- .../example/lib/page/td_result_page.dart | 177 +++++++++++------- .../lib/src/components/result/td_result.dart | 10 +- 3 files changed, 113 insertions(+), 77 deletions(-) diff --git a/tdesign-component/example/assets/api/result_api.md b/tdesign-component/example/assets/api/result_api.md index 3260afe98..c72d474f8 100644 --- a/tdesign-component/example/assets/api/result_api.md +++ b/tdesign-component/example/assets/api/result_api.md @@ -6,5 +6,6 @@ | --- | --- | --- | --- | | description | String? | - | 描述文本，用于提供额外信息 | | icon | Widget? | - | 图标组件，用于在结果中显示一个图标 | +| titleStyle | TextStyle? | - | 自定义字体样式，用于设置标题文本的样式 | | theme | TDResultTheme | - | 主题样式，定义了结果组件的视觉风格 | -| title | String | - | 标题文本，显示结果的主要信息 | \ No newline at end of file +| title | String | - | 标题文本，显示结果的主要信息 | diff --git a/tdesign-component/example/lib/page/td_result_page.dart b/tdesign-component/example/lib/page/td_result_page.dart index f40311de8..8a4c90686 100644 --- a/tdesign-component/example/lib/page/td_result_page.dart +++ b/tdesign-component/example/lib/page/td_result_page.dart @@ -19,10 +19,16 @@ class _TDResultPageState extends State { exampleCodeGroup: 'result', children: [ ExampleModule(title: '组件类型', children: [ - ExampleItem(desc: '基础结果', builder: _buildBasicResult), - ExampleItem(desc: '带描述的结果', builder: _buildResultWithDescription), - ExampleItem(desc: '自定义结果', builder: _buildCustomResult), - ExampleItem(desc: '页面示例',ignoreCode: true, builder: _buildPageExample), + ExampleItem( + desc: '基础结果', ignoreCode: true, builder: _buildBasicResult), + ExampleItem( + desc: '带描述的结果', + ignoreCode: true, + builder: _buildResultWithDescription), + ExampleItem( + desc: '自定义结果', ignoreCode: true, builder: _buildCustomResult), + ExampleItem( + desc: '页面示例', ignoreCode: true, builder: _buildPageExample), ]), ], ); @@ -30,26 +36,38 @@ class _TDResultPageState extends State { @Demo(group: 'result') Widget _buildBasicResult(BuildContext context) { - return const Column( - children: const [ - TDResult( - title: '成功状态', - theme: TDResultTheme.success, + return Column( + children: [ + CodeWrapper( + builder: (_) => const TDResult( + title: '成功状态', + theme: TDResultTheme.success, + ), + methodName: '_buildBasicResult', ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '失败状态', - theme: TDResultTheme.error, + const SizedBox(height: 48), + CodeWrapper( + builder: (_) => const TDResult( + title: '失败状态', + theme: TDResultTheme.error, + ), + methodName: '_buildBasicResult', ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '警示状态', - theme: TDResultTheme.warning, + const SizedBox(height: 48), + CodeWrapper( + builder: (_) => const TDResult( + title: '警示状态', + theme: TDResultTheme.warning, + ), + methodName: '_buildBasicResult', ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '默认状态', - theme: TDResultTheme.defaultTheme, + const SizedBox(height: 48), + CodeWrapper( + builder: (_) => const TDResult( + title: '默认状态', + theme: TDResultTheme.defaultTheme, + ), + methodName: '_buildBasicResult', ), ], ); @@ -57,30 +75,42 @@ class _TDResultPageState extends State { @Demo(group: 'result') Widget _buildResultWithDescription(BuildContext context) { - return const Column( - children: const [ - TDResult( - title: '成功状态', - theme: TDResultTheme.success, - description: '描述文字', + return Column( + children: [ + CodeWrapper( + builder: (_) => const TDResult( + title: '成功状态', + theme: TDResultTheme.success, + description: '描述文字', + ), + methodName: '_buildResultWithDescription', ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '失败状态', - theme: TDResultTheme.error, - description: '描述文字', + const SizedBox(height: 48), + CodeWrapper( + builder: (_) => const TDResult( + title: '失败状态', + theme: TDResultTheme.error, + description: '描述文字', + ), + methodName: '_buildResultWithDescription', ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '警示状态', - theme: TDResultTheme.warning, - description: '描述文字', + const SizedBox(height: 48), + CodeWrapper( + builder: (_) => const TDResult( + title: '警示状态', + theme: TDResultTheme.warning, + description: '描述文字', + ), + methodName: '_buildResultWithDescription', ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '默认状态', - theme: TDResultTheme.defaultTheme, - description: '描述文字', + const SizedBox(height: 48), + CodeWrapper( + builder: (_) => const TDResult( + title: '默认状态', + theme: TDResultTheme.defaultTheme, + description: '描述文字', + ), + methodName: '_buildResultWithDescription', ), ], ); @@ -88,10 +118,14 @@ class _TDResultPageState extends State { @Demo(group: 'result') Widget _buildCustomResult(BuildContext context) { - return TDResult( + return CodeWrapper( + builder: (_) => TDResult( title: '自定义结果', icon: Image.asset('assets/img/illustration.png'), - description: '描述文字'); + description: '描述文字', + ), + methodName: '_buildCustomResult', + ); } @Demo(group: 'result') @@ -106,34 +140,35 @@ class _TDResultPageState extends State { 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); - }, - ) - ], - ), - )), + 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); + }, + ), + ], + ), + ), + ), ); }, ); } -} \ No newline at end of file +} diff --git a/tdesign-component/lib/src/components/result/td_result.dart b/tdesign-component/lib/src/components/result/td_result.dart index b7d098b71..1b69a8d48 100644 --- a/tdesign-component/lib/src/components/result/td_result.dart +++ b/tdesign-component/lib/src/components/result/td_result.dart @@ -8,6 +8,8 @@ class TDResult extends StatelessWidget { final String? description; // 图标组件，用于在结果中显示一个图标 final Widget? icon; +// 自定义字体样式，用于设置标题文本的样式 + final TextStyle? titleStyle; // 主题样式，定义了结果组件的视觉风格 final TDResultTheme theme; // 标题文本，显示结果的主要信息 @@ -18,6 +20,7 @@ class TDResult extends StatelessWidget { Key? key, this.description, this.icon, + this.titleStyle, this.theme = TDResultTheme.defaultTheme, // 默认主题样式为defaultTheme this.title = '', // 默认标题为空字符串 }) : super(key: key); @@ -25,11 +28,7 @@ class TDResult extends StatelessWidget { @override Widget build(BuildContext context) { // 根据主题获取默认的图标组件 - Widget displayIcon = _getDefaultIconByTheme(context, theme); - // 如果提供了自定义图标，则使用自定义图标 - if (icon != null) { - displayIcon = icon!; - } + Widget displayIcon = icon ?? _getDefaultIconByTheme(context, theme); // 构建组件布局 return Column( mainAxisSize: MainAxisSize.min, @@ -45,6 +44,7 @@ class TDResult extends StatelessWidget { title, textColor: TDTheme.of(context).fontGyColor1, font: TDTheme.of(context).fontTitleExtraLarge, + style: titleStyle, )), // 如果描述不为空，则显示描述 if (description != null) From 2e1d19202a08c73213acd20a757273fcea26f139 Mon Sep 17 00:00:00 2001 From: shinyina Date: Sun, 28 Jul 2024 00:40:39 +0800 Subject: [PATCH 03/11] =?UTF-8?q?feat:=20description=E5=85=9C=E5=BA=95?= =?UTF-8?q?=E5=88=A4=E6=96=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tdesign-component/lib/src/components/result/td_result.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tdesign-component/lib/src/components/result/td_result.dart b/tdesign-component/lib/src/components/result/td_result.dart index 1b69a8d48..3632dcd39 100644 --- a/tdesign-component/lib/src/components/result/td_result.dart +++ b/tdesign-component/lib/src/components/result/td_result.dart @@ -47,7 +47,7 @@ class TDResult extends StatelessWidget { style: titleStyle, )), // 如果描述不为空，则显示描述 - if (description != null) + if (description?.isNotEmpty ?? false) Padding( padding: const EdgeInsets.only(top: 8), child: TDText(description!, From 5821bfc746d4e2121163093fb37fb57889ea6c8e Mon Sep 17 00:00:00 2001 From: shinyina Date: Wed, 31 Jul 2024 22:29:36 +0800 Subject: [PATCH 04/11] =?UTF-8?q?feat:=20code=20demo=E6=8B=86=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/code/result._buildBasicResult.txt | 26 ---- .../code/result._buildBasicResultDefault.txt | 7 + .../code/result._buildBasicResultError.txt | 7 + .../code/result._buildBasicResultSuccess.txt | 7 + .../code/result._buildBasicResultWarning.txt | 7 + ...t => result._buildCustomResultContent.txt} | 0 .../result._buildResultWithDescription.txt | 30 ---- ...ult._buildResultWithDescriptionDefault.txt | 8 + ...esult._buildResultWithDescriptionError.txt | 8 + ...ult._buildResultWithDescriptionSuccess.txt | 8 + ...ult._buildResultWithDescriptionWarning.txt | 8 + .../example/lib/page/td_result_page.dart | 140 +++++++++++------- 12 files changed, 146 insertions(+), 110 deletions(-) delete mode 100644 tdesign-component/example/assets/code/result._buildBasicResult.txt create mode 100644 tdesign-component/example/assets/code/result._buildBasicResultDefault.txt create mode 100644 tdesign-component/example/assets/code/result._buildBasicResultError.txt create mode 100644 tdesign-component/example/assets/code/result._buildBasicResultSuccess.txt create mode 100644 tdesign-component/example/assets/code/result._buildBasicResultWarning.txt rename tdesign-component/example/assets/code/{result._buildCustomResult.txt => result._buildCustomResultContent.txt} (100%) delete mode 100644 tdesign-component/example/assets/code/result._buildResultWithDescription.txt create mode 100644 tdesign-component/example/assets/code/result._buildResultWithDescriptionDefault.txt create mode 100644 tdesign-component/example/assets/code/result._buildResultWithDescriptionError.txt create mode 100644 tdesign-component/example/assets/code/result._buildResultWithDescriptionSuccess.txt create mode 100644 tdesign-component/example/assets/code/result._buildResultWithDescriptionWarning.txt diff --git a/tdesign-component/example/assets/code/result._buildBasicResult.txt b/tdesign-component/example/assets/code/result._buildBasicResult.txt deleted file mode 100644 index 26b3d46eb..000000000 --- a/tdesign-component/example/assets/code/result._buildBasicResult.txt +++ /dev/null @@ -1,26 +0,0 @@ - - Widget _buildBasicResult(BuildContext context) { - return const Column( - children: const [ - TDResult( - title: '成功状态', - theme: TDResultTheme.success, - ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '失败状态', - theme: TDResultTheme.error, - ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '警示状态', - theme: TDResultTheme.warning, - ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '默认状态', - theme: TDResultTheme.defaultTheme, - ), - ], - ); - } \ No newline at end of file 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._buildCustomResult.txt b/tdesign-component/example/assets/code/result._buildCustomResultContent.txt similarity index 100% rename from tdesign-component/example/assets/code/result._buildCustomResult.txt rename to tdesign-component/example/assets/code/result._buildCustomResultContent.txt diff --git a/tdesign-component/example/assets/code/result._buildResultWithDescription.txt b/tdesign-component/example/assets/code/result._buildResultWithDescription.txt deleted file mode 100644 index 9ef640281..000000000 --- a/tdesign-component/example/assets/code/result._buildResultWithDescription.txt +++ /dev/null @@ -1,30 +0,0 @@ - - Widget _buildResultWithDescription(BuildContext context) { - return const Column( - children: const [ - TDResult( - title: '成功状态', - theme: TDResultTheme.success, - description: '描述文字', - ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '失败状态', - theme: TDResultTheme.error, - description: '描述文字', - ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '警示状态', - theme: TDResultTheme.warning, - description: '描述文字', - ), - SizedBox(height: 48), // 添加间距 - TDResult( - title: '默认状态', - theme: TDResultTheme.defaultTheme, - 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/lib/page/td_result_page.dart b/tdesign-component/example/lib/page/td_result_page.dart index 8a4c90686..584966780 100644 --- a/tdesign-component/example/lib/page/td_result_page.dart +++ b/tdesign-component/example/lib/page/td_result_page.dart @@ -34,101 +34,56 @@ class _TDResultPageState extends State { ); } - @Demo(group: 'result') Widget _buildBasicResult(BuildContext context) { return Column( children: [ CodeWrapper( - builder: (_) => const TDResult( - title: '成功状态', - theme: TDResultTheme.success, - ), - methodName: '_buildBasicResult', + builder: _buildBasicResultSuccess, ), const SizedBox(height: 48), CodeWrapper( - builder: (_) => const TDResult( - title: '失败状态', - theme: TDResultTheme.error, - ), - methodName: '_buildBasicResult', + builder: _buildBasicResultError, ), const SizedBox(height: 48), CodeWrapper( - builder: (_) => const TDResult( - title: '警示状态', - theme: TDResultTheme.warning, - ), - methodName: '_buildBasicResult', + builder: _buildBasicResultWarning, ), const SizedBox(height: 48), CodeWrapper( - builder: (_) => const TDResult( - title: '默认状态', - theme: TDResultTheme.defaultTheme, - ), - methodName: '_buildBasicResult', + builder: _buildBasicResultDefault, ), ], ); } - @Demo(group: 'result') Widget _buildResultWithDescription(BuildContext context) { return Column( children: [ CodeWrapper( - builder: (_) => const TDResult( - title: '成功状态', - theme: TDResultTheme.success, - description: '描述文字', - ), - methodName: '_buildResultWithDescription', + builder: _buildResultWithDescriptionSuccess, ), const SizedBox(height: 48), CodeWrapper( - builder: (_) => const TDResult( - title: '失败状态', - theme: TDResultTheme.error, - description: '描述文字', - ), - methodName: '_buildResultWithDescription', + builder: _buildResultWithDescriptionError, ), const SizedBox(height: 48), CodeWrapper( - builder: (_) => const TDResult( - title: '警示状态', - theme: TDResultTheme.warning, - description: '描述文字', - ), - methodName: '_buildResultWithDescription', + builder: _buildResultWithDescriptionWarning, ), const SizedBox(height: 48), CodeWrapper( - builder: (_) => const TDResult( - title: '默认状态', - theme: TDResultTheme.defaultTheme, - description: '描述文字', - ), - methodName: '_buildResultWithDescription', + builder: _buildResultWithDescriptionDefault, ), ], ); } - @Demo(group: 'result') Widget _buildCustomResult(BuildContext context) { return CodeWrapper( - builder: (_) => TDResult( - title: '自定义结果', - icon: Image.asset('assets/img/illustration.png'), - description: '描述文字', - ), - methodName: '_buildCustomResult', + builder: _buildCustomResultContent, ); } - @Demo(group: 'result') Widget _buildPageExample(BuildContext context) { return TDButton( text: '页面示例', @@ -171,4 +126,81 @@ class _TDResultPageState extends State { }, ); } + + @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: '描述文字', + ); + } } From b56ba0a1873bfdbbe5333a0f425cb99290fa399a Mon Sep 17 00:00:00 2001 From: shinyina Date: Wed, 31 Jul 2024 22:32:06 +0800 Subject: [PATCH 05/11] =?UTF-8?q?fix:=20=E6=96=87=E6=A1=88=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tdesign-component/example/lib/page/td_result_page.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tdesign-component/example/lib/page/td_result_page.dart b/tdesign-component/example/lib/page/td_result_page.dart index 584966780..1f43052ad 100644 --- a/tdesign-component/example/lib/page/td_result_page.dart +++ b/tdesign-component/example/lib/page/td_result_page.dart @@ -15,7 +15,7 @@ class _TDResultPageState extends State { Widget build(BuildContext context) { return ExamplePage( title: 'Result 结果', - desc: '用于空状态时的占位提示。', + desc: '反馈结果状态。', exampleCodeGroup: 'result', children: [ ExampleModule(title: '组件类型', children: [ From ba41ff950cd52378c3c31c77540cb0b4df618b12 Mon Sep 17 00:00:00 2001 From: Limpid-8818 <157373409+Limpid-8818@users.noreply.github.com> Date: Fri, 2 Aug 2024 21:00:00 +0800 Subject: [PATCH 06/11] Add files via upload --- .../example/lib/page/td_search_bar_page.dart | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) 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 4cafaf6cc..ec86723bc 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; @override Widget build(BuildContext context) { @@ -27,6 +28,8 @@ class _TDSearchBarPageState extends State { children: [ ExampleItem(desc: '基础搜索框', builder: _buildDefaultSearchBar), ExampleItem(desc: '获取焦点后显示取消按钮', builder: _buildFocusSearchBar), + ExampleItem( + desc: '获取焦点后显示自定义操作按钮', builder: _buildSearchBarWithAction), ], ), ExampleModule(title: '组件样式', children: [ @@ -115,4 +118,35 @@ 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 ?? ''}', + ), + ) + ], + ); + } } From aa6c653ff02f2c28c0e7e5e9082aeb6a7b947b72 Mon Sep 17 00:00:00 2001 From: Limpid-8818 <157373409+Limpid-8818@users.noreply.github.com> Date: Fri, 2 Aug 2024 21:02:46 +0800 Subject: [PATCH 07/11] Add files via upload --- .../src/components/search/td_search_bar.dart | 92 ++++++++++++------- 1 file changed, 61 insertions(+), 31 deletions(-) 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 4c93e04f5..3b8e6b6ef 100644 --- a/tdesign-component/lib/src/components/search/td_search_bar.dart +++ b/tdesign-component/lib/src/components/search/td_search_bar.dart @@ -38,6 +38,8 @@ class TDSearchBar extends StatefulWidget { this.needCancel = false, this.controller, this.backgroundColor = Colors.white, + this.action = '', + this.onActionClick, }) : super(key: key); /// 预设文案 @@ -79,6 +81,12 @@ class TDSearchBar extends StatefulWidget { /// 编辑完成回调 final TDSearchBarCallBack? onEditComplete; + /// 自定义操作文字 + final String action; + + /// 自定义操作回调 + final TDSearchBarEvent? onActionClick; + @override State createState() => _TDSearchBarState(); } @@ -169,6 +177,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( @@ -255,37 +278,44 @@ class _TDSearchBarState extends State ), ), ), - Offstage( - offstage: cancelBtnHide || !widget.needCancel, - child: GestureDetector( - onTap: () { - _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)), - ), - ), - ), + widget.action.isNotEmpty + ? actionBtn( + context, + controller.text, + action: widget.action, + onActionClick: widget.onActionClick ?? (String text) {}, + ) + : Offstage( + offstage: cancelBtnHide || !widget.needCancel, + child: GestureDetector( + onTap: () { + _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( From f847f624c6a6c1757f23b9b8f2691a6d595f197c Mon Sep 17 00:00:00 2001 From: Limpid-8818 <157373409+Limpid-8818@users.noreply.github.com> Date: Fri, 2 Aug 2024 21:05:54 +0800 Subject: [PATCH 08/11] Add files via upload --- .../example/assets/api/search_api.md | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/tdesign-component/example/assets/api/search_api.md b/tdesign-component/example/assets/api/search_api.md index 299c18a48..46908d44c 100644 --- a/tdesign-component/example/assets/api/search_api.md +++ b/tdesign-component/example/assets/api/search_api.md @@ -2,19 +2,21 @@ ### TDSearchBar #### 默认构造方法 -| 参数 | 类型 | 默认值 | 说明 | -| --- | --- | --- | --- | -| 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 | 是否需要取消按钮 | -| 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 | 背景颜色 | From 528dfe2082ef6f32160382be625e7a620bddb9a1 Mon Sep 17 00:00:00 2001 From: Limpid-8818 <157373409+Limpid-8818@users.noreply.github.com> Date: Fri, 2 Aug 2024 21:07:01 +0800 Subject: [PATCH 09/11] Add files via upload --- .../code/search._buildSearchBarWithAction.txt | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 tdesign-component/example/assets/code/search._buildSearchBarWithAction.txt 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 From 7aceeb4cb8cdfdf43649af4a6e659d85845a323c Mon Sep 17 00:00:00 2001 From: Limpid-8818 <157373409+Limpid-8818@users.noreply.github.com> Date: Sat, 3 Aug 2024 10:14:39 +0800 Subject: [PATCH 10/11] Add files via upload --- .../example/lib/page/td_search_bar_page.dart | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) 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 ec86723bc..42702a367 100644 --- a/tdesign-component/example/lib/page/td_search_bar_page.dart +++ b/tdesign-component/example/lib/page/td_search_bar_page.dart @@ -28,15 +28,16 @@ class _TDSearchBarPageState extends State { children: [ ExampleItem(desc: '基础搜索框', builder: _buildDefaultSearchBar), ExampleItem(desc: '获取焦点后显示取消按钮', builder: _buildFocusSearchBar), - ExampleItem( - desc: '获取焦点后显示自定义操作按钮', builder: _buildSearchBarWithAction), ], ), ExampleModule(title: '组件样式', children: [ ExampleItem(desc: '搜索框形状', builder: _buildSearchBarWithShape), ExampleItem(desc: '默认状态其他对齐方式', builder: _buildCenterSearchBar), - ]) - ]); + ]), + ], + test: [ + ExampleItem(desc: '获取焦点后显示自定义操作按钮', builder: _buildSearchBarWithAction), + ],); } @Demo(group: 'search') From 67851ec549c9a14f2b3b7ab6d9e262cb2ecb9430 Mon Sep 17 00:00:00 2001 From: v_szheshi Date: Fri, 20 Sep 2024 18:21:24 +0800 Subject: [PATCH 11/11] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8D=A2=E8=A1=8C?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sidebar/td_wrap_sidebar_item.dart | 95 +++++++++---------- 1 file changed, 43 insertions(+), 52 deletions(-) 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 f8e4829ea..d80de7d02 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, @@ -189,15 +185,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()], ), ); }