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/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/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 0f52c8843..4fc65f559 100644 --- a/tdesign-component/example/lib/config.dart +++ b/tdesign-component/example/lib/config.dart @@ -30,6 +30,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'; @@ -183,8 +184,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/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/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';