From c978291afdc7b81f8d113718f0125f55a5c4b0c4 Mon Sep 17 00:00:00 2001 From: James Zow Date: Sat, 11 Jan 2025 16:10:48 +0800 Subject: [PATCH 1/5] feat(step): Cancel the required title and content fields and modify them to Widget type Tencent#324 --- .../example/assets/api/steps_api.md | 10 ++-- .../lib/src/components/steps/td_steps.dart | 20 +++++--- .../steps/td_steps_horizontal_item.dart | 34 ++++--------- .../steps/td_steps_vertical_item.dart | 51 +++++++------------ 4 files changed, 48 insertions(+), 67 deletions(-) diff --git a/tdesign-component/example/assets/api/steps_api.md b/tdesign-component/example/assets/api/steps_api.md index e9a9416ac..fc796c7a6 100644 --- a/tdesign-component/example/assets/api/steps_api.md +++ b/tdesign-component/example/assets/api/steps_api.md @@ -2,13 +2,13 @@ ### TDStepsItemData #### 默认构造方法 -| 参数 | 类型 | 默认值 | 说明 | -| --- | --- | --- | --- | -| title | String | - | 标题 | -| content | String | - | 内容 | +| 参数 | 类型 | 默认值 | 说明 | +| --- |-----------| --- | --- | +| title | String? | - | 标题 | +| content | String? | - | 内容 | | successIcon | IconData? | - | 成功图标 | | errorIcon | IconData? | - | 失败图标 | -| customContent | Widget? | - | 自定义内容 | +| customContent | Widget? | - | 自定义内容 | ``` ``` diff --git a/tdesign-component/lib/src/components/steps/td_steps.dart b/tdesign-component/lib/src/components/steps/td_steps.dart index 7176b1e6a..f284bf60e 100644 --- a/tdesign-component/lib/src/components/steps/td_steps.dart +++ b/tdesign-component/lib/src/components/steps/td_steps.dart @@ -7,18 +7,20 @@ import '../../../tdesign_flutter.dart'; class TDStepsItemData { TDStepsItemData({ - required this.title, - required this.content, + this.title, + this.content, this.successIcon, this.errorIcon, this.customContent, - }); + }) { + _validate(); + } /// 标题 - final String title; + final String? title; /// 内容 - final String content; + final String? content; /// 成功图标 final IconData? successIcon; @@ -28,6 +30,13 @@ class TDStepsItemData { /// 自定义内容 final Widget? customContent; + + /// 校验参数 + void _validate() { + if (title == null && content == null && customContent == null) { + throw ArgumentError('title, content, customContent needs at least one non-empty value'); + } + } } /// Steps步骤条方向 @@ -98,5 +107,4 @@ class _TDStepsState extends State { verticalSelect: widget.verticalSelect, ); } - } diff --git a/tdesign-component/lib/src/components/steps/td_steps_horizontal_item.dart b/tdesign-component/lib/src/components/steps/td_steps_horizontal_item.dart index 5fc931b3a..8ed6d9285 100644 --- a/tdesign-component/lib/src/components/steps/td_steps_horizontal_item.dart +++ b/tdesign-component/lib/src/components/steps/td_steps_horizontal_item.dart @@ -10,6 +10,7 @@ class TDStepsHorizontalItem extends StatelessWidget { final TDStepsStatus status; final bool simple; final bool readOnly; + const TDStepsHorizontalItem({ super.key, required this.data, @@ -48,7 +49,7 @@ class TDStepsHorizontalItem extends StatelessWidget { stepsTitleColor = TDTheme.of(context).fontGyColor1; /// 已完成的用icon图标显示 completeIconWidget = Icon(TDIcons.check, color: TDTheme.of(context).brandColor7, size: 16,); - }else if (activeIndex < index) { + } else if (activeIndex < index) { /// 激活索引小于当前索引 stepsNumberBgColor = TDTheme.of(context).grayColor1; stepsNumberTextColor = TDTheme.of(context).fontGyColor3; @@ -100,10 +101,9 @@ class TDStepsHorizontalItem extends StatelessWidget { BoxDecoration? iconWidgetDecoration = shouldSetIconWidgetDecoration ? BoxDecoration( color: stepsNumberBgColor, shape: BoxShape.circle, - ): null; - + ) : null; - // icon组件容器大小 + /// icon组件容器大小 double iconContainerSize = 22; /// 简略步骤条 @@ -172,33 +172,19 @@ class TDStepsHorizontalItem extends StatelessWidget { ), ], ), - Container( - margin: const EdgeInsets.only(top: 8), - alignment: Alignment.center, - child: TDText( - data.title, - style: TextStyle( - fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400, - color: stepsTitleColor, - fontSize: 14, - ), + if (data.title != null && data.title!.isNotEmpty) + Container( + margin: const EdgeInsets.only(top: 8), + alignment: Alignment.center, + child: Text(data.title!), // 使用标题字符串 ), - ), Container( margin: const EdgeInsets.only(top: 4), alignment: Alignment.center, - child: TDText( - data.content, - style: TextStyle( - fontWeight: FontWeight.w400, - color: TDTheme.of(context).fontGyColor3, - fontSize: 12, - ), - ), + child: data.customContent ?? Text(data.content ?? ''), // 使用customContent覆盖content ), ], ); } - } diff --git a/tdesign-component/lib/src/components/steps/td_steps_vertical_item.dart b/tdesign-component/lib/src/components/steps/td_steps_vertical_item.dart index 4b213ffa4..b34866fef 100644 --- a/tdesign-component/lib/src/components/steps/td_steps_vertical_item.dart +++ b/tdesign-component/lib/src/components/steps/td_steps_vertical_item.dart @@ -11,6 +11,7 @@ class TDStepsVerticalItem extends StatelessWidget { final bool simple; final bool readOnly; final bool verticalSelect; + const TDStepsVerticalItem({ super.key, required this.data, @@ -50,7 +51,7 @@ class TDStepsVerticalItem extends StatelessWidget { stepsTitleColor = TDTheme.of(context).fontGyColor1; /// 已完成的用icon图标显示 completeIconWidget = Icon(TDIcons.check, color: TDTheme.of(context).brandColor7, size: 16,); - }else if (activeIndex < index) { + } else if (activeIndex < index) { /// 激活索引小于当前索引 stepsNumberBgColor = TDTheme.of(context).grayColor1; stepsNumberTextColor = TDTheme.of(context).fontGyColor3; @@ -102,8 +103,7 @@ class TDStepsVerticalItem extends StatelessWidget { var iconWidgetDecoration = shouldSetIconWidgetDecoration ? BoxDecoration( color: stepsNumberBgColor, shape: BoxShape.circle, - ): null; - + ) : null; /// icon组件容器大小 double iconContainerSize = 22; @@ -189,39 +189,27 @@ class TDStepsVerticalItem extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ - Container( - height: 22, - margin: const EdgeInsets.only(bottom: 4), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - TDText( - data.title, - style: TextStyle( - fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400, - color: stepsTitleColor, - fontSize: 14, - height: 1.2, - ), - ), - verticalSelect ? Icon(TDIcons.chevron_right, color: TDTheme.of(context).fontGyColor1, size: 16,): Container(), - ], + if (data.title != null && data.title!.isNotEmpty) + Container( + height: 22, + margin: const EdgeInsets.only(bottom: 4), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text(data.title!), // 使用标题字符串 + verticalSelect ? Icon(TDIcons.chevron_right, color: TDTheme.of(context).fontGyColor1, size: 16,) : Container(), + ], + ), ), - ), Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ - TDText( - data.content, - style: TextStyle( - fontWeight: FontWeight.w400, - color: TDTheme.of(context).fontGyColor3, - fontSize: 12, - ), - ), - customContent, - ] + if (data.customContent != null) + data.customContent! + else if (data.content != null && data.content!.isNotEmpty) + Text(data.content!), + ], ), ], ), @@ -231,6 +219,5 @@ class TDStepsVerticalItem extends StatelessWidget { ), ); } - } From c73a06671ff4ea649e2f222a804bd930a1e47772 Mon Sep 17 00:00:00 2001 From: James Zow Date: Sat, 11 Jan 2025 16:12:01 +0800 Subject: [PATCH 2/5] feat(pub): add web features or toolkits --- tdesign-component/example/pubspec.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/tdesign-component/example/pubspec.yaml b/tdesign-component/example/pubspec.yaml index f794b07eb..e65532ee1 100644 --- a/tdesign-component/example/pubspec.yaml +++ b/tdesign-component/example/pubspec.yaml @@ -30,6 +30,7 @@ environment: dependencies: flutter: sdk: flutter + web: ^0.4.0 #轮播图组件 flutter_swiper_null_safety: ^1.0.2 From 793017e9c2cd80c34c5fc9e2a7bbac206f5815a6 Mon Sep 17 00:00:00 2001 From: James Zow Date: Sat, 11 Jan 2025 16:13:29 +0800 Subject: [PATCH 3/5] feat(test): add step component test cases --- .../example/lib/component_test/step_test.dart | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 tdesign-component/example/lib/component_test/step_test.dart diff --git a/tdesign-component/example/lib/component_test/step_test.dart b/tdesign-component/example/lib/component_test/step_test.dart new file mode 100644 index 000000000..8044ef674 --- /dev/null +++ b/tdesign-component/example/lib/component_test/step_test.dart @@ -0,0 +1,87 @@ +import 'package:flutter/material.dart'; +import 'package:tdesign_flutter/tdesign_flutter.dart'; + +void main() async { + runApp(StepTestApp()); +} + +class StepTestApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'Flutter Step Test', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: TestPage(), + ); + } +} + +class TestPage extends StatelessWidget { + final GlobalKey _formKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + // 创建水平步骤条的数据 + List horizontalSteps = [ + TDStepsItemData(title: 'Step 1', content: 'Horizontal Step 1'), + TDStepsItemData(title: 'Step 2', content: 'Horizontal Step 2'), + TDStepsItemData(title: 'Step 3', content: 'Horizontal Step 3'), + ]; + + // 创建垂直步骤条的数据 + List verticalSteps = [ + TDStepsItemData( + title: '2025-01-11', + content: '今天是星期六', + customContent: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text('今天是星期六，下面是拍摄的照片'), + Image.asset('assets/img/image.png', width: 100, height: 100), + ], + ), + ), + TDStepsItemData(title: '2025-01-12', content: '今天是星期天'), + TDStepsItemData(content: '今天是星期一'), + ]; + + return Scaffold( + appBar: AppBar( + title: Text('TDSteps Test Page'), + ), + body: Form( + key: _formKey, + child: Column( + children: [ + // 水平步骤条 + Expanded( + child: Padding( + padding: const EdgeInsets.all(16.0), + child: TDSteps( + steps: horizontalSteps, + activeIndex: 1, // 设置当前激活的步骤索引 + direction: TDStepsDirection.horizontal, // 设置步骤条方向为水平 + status: TDStepsStatus.success, // 设置步骤条状态 + ), + ), + ), + // 垂直步骤条 + Expanded( + child: Padding( + padding: const EdgeInsets.all(16.0), + child: TDSteps( + steps: verticalSteps, + activeIndex: 1, // 设置当前激活的步骤索引 + direction: TDStepsDirection.vertical, // 设置步骤条方向为垂直 + status: TDStepsStatus.success, // 设置步骤条状态 + ), + ), + ), + ], + ), + ), + ); + } +} \ No newline at end of file From dab1f64c6db77801d48a06d6f8d76d2b971ab4c4 Mon Sep 17 00:00:00 2001 From: James Zow Date: Sat, 11 Jan 2025 16:37:53 +0800 Subject: [PATCH 4/5] feat(steps): fix style and use tdesign text --- .../example/lib/component_test/step_test.dart | 13 ++++++++++--- .../steps/td_steps_horizontal_item.dart | 18 ++++++++++++++++-- .../steps/td_steps_vertical_item.dart | 19 +++++++++++++++++-- 3 files changed, 43 insertions(+), 7 deletions(-) diff --git a/tdesign-component/example/lib/component_test/step_test.dart b/tdesign-component/example/lib/component_test/step_test.dart index 8044ef674..b37246cf4 100644 --- a/tdesign-component/example/lib/component_test/step_test.dart +++ b/tdesign-component/example/lib/component_test/step_test.dart @@ -38,7 +38,14 @@ class TestPage extends StatelessWidget { customContent: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text('今天是星期六，下面是拍摄的照片'), + TDText( + '今天是星期六，下面是拍摄的照片', + style: TextStyle( + fontWeight: FontWeight.w400, + color: TDTheme.of(context).fontGyColor3, + fontSize: 12, + ), + ), Image.asset('assets/img/image.png', width: 100, height: 100), ], ), @@ -49,7 +56,7 @@ class TestPage extends StatelessWidget { return Scaffold( appBar: AppBar( - title: Text('TDSteps Test Page'), + title: TDText('TDSteps Test Page'), ), body: Form( key: _formKey, @@ -84,4 +91,4 @@ class TestPage extends StatelessWidget { ), ); } -} \ No newline at end of file +} diff --git a/tdesign-component/lib/src/components/steps/td_steps_horizontal_item.dart b/tdesign-component/lib/src/components/steps/td_steps_horizontal_item.dart index 8ed6d9285..37cf07117 100644 --- a/tdesign-component/lib/src/components/steps/td_steps_horizontal_item.dart +++ b/tdesign-component/lib/src/components/steps/td_steps_horizontal_item.dart @@ -176,12 +176,26 @@ class TDStepsHorizontalItem extends StatelessWidget { Container( margin: const EdgeInsets.only(top: 8), alignment: Alignment.center, - child: Text(data.title!), // 使用标题字符串 + child: TDText( + data.title!, + style: TextStyle( + fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400, + color: stepsTitleColor, + fontSize: 14, + ), + ), ), Container( margin: const EdgeInsets.only(top: 4), alignment: Alignment.center, - child: data.customContent ?? Text(data.content ?? ''), // 使用customContent覆盖content + child: data.customContent ?? TDText( + data.content ?? '', + style: TextStyle( + fontWeight: FontWeight.w400, + color: TDTheme.of(context).fontGyColor3, + fontSize: 12, + ), + ), ), ], ); diff --git a/tdesign-component/lib/src/components/steps/td_steps_vertical_item.dart b/tdesign-component/lib/src/components/steps/td_steps_vertical_item.dart index b34866fef..cd08f7501 100644 --- a/tdesign-component/lib/src/components/steps/td_steps_vertical_item.dart +++ b/tdesign-component/lib/src/components/steps/td_steps_vertical_item.dart @@ -196,7 +196,15 @@ class TDStepsVerticalItem extends StatelessWidget { child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Text(data.title!), // 使用标题字符串 + TDText( + data.title!, + style: TextStyle( + fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400, + color: stepsTitleColor, + fontSize: 14, + height: 1.2, + ), + ), verticalSelect ? Icon(TDIcons.chevron_right, color: TDTheme.of(context).fontGyColor1, size: 16,) : Container(), ], ), @@ -208,7 +216,14 @@ class TDStepsVerticalItem extends StatelessWidget { if (data.customContent != null) data.customContent! else if (data.content != null && data.content!.isNotEmpty) - Text(data.content!), + TDText( + data.content!, + style: TextStyle( + fontWeight: FontWeight.w400, + color: TDTheme.of(context).fontGyColor3, + fontSize: 12, + ), + ), ], ), ], From c2412df05b282c5a5ffc46ea9f945a9913882ff2 Mon Sep 17 00:00:00 2001 From: James Zow Date: Mon, 20 Jan 2025 15:44:03 +0800 Subject: [PATCH 5/5] Update flutter web version 0.4.0 -> 0.3.0 --- tdesign-component/example/pubspec.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tdesign-component/example/pubspec.yaml b/tdesign-component/example/pubspec.yaml index e65532ee1..584ad1ace 100644 --- a/tdesign-component/example/pubspec.yaml +++ b/tdesign-component/example/pubspec.yaml @@ -30,7 +30,7 @@ environment: dependencies: flutter: sdk: flutter - web: ^0.4.0 + web: ^0.3.0 #轮播图组件 flutter_swiper_null_safety: ^1.0.2 @@ -120,4 +120,4 @@ AOPMarket: unsupportTips: 请在Flutter 3.+ 运行心悦工程 3.0.0~infinity: path: ./tdesign_flutter_generator - saveDartDependencies: true \ No newline at end of file + saveDartDependencies: true