From 6db3bc101705d81171c20c699808f178f1c72dc6 Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sun, 23 Jun 2024 01:41:01 +0800 Subject: [PATCH 01/13] feat(feature/steps): add steps component --- tdesign-component/example/lib/config.dart | 2 + .../example/lib/page/td_steps_page.dart | 89 +++++++++ .../lib/src/components/steps/td_steps.dart | 62 +++++++ .../components/steps/td_steps_horizontal.dart | 43 +++++ .../steps/td_steps_horizontal_item.dart | 173 ++++++++++++++++++ .../components/steps/td_steps_vertical.dart | 27 +++ tdesign-component/lib/tdesign_flutter.dart | 1 + 7 files changed, 397 insertions(+) create mode 100644 tdesign-component/example/lib/page/td_steps_page.dart create mode 100644 tdesign-component/lib/src/components/steps/td_steps.dart create mode 100644 tdesign-component/lib/src/components/steps/td_steps_horizontal.dart create mode 100644 tdesign-component/lib/src/components/steps/td_steps_horizontal_item.dart create mode 100644 tdesign-component/lib/src/components/steps/td_steps_vertical.dart diff --git a/tdesign-component/example/lib/config.dart b/tdesign-component/example/lib/config.dart index 0f52c8843..b262ff80b 100644 --- a/tdesign-component/example/lib/config.dart +++ b/tdesign-component/example/lib/config.dart @@ -34,6 +34,7 @@ import 'page/td_search_bar_page.dart'; import 'page/td_shadows_page.dart'; import 'page/td_slider_page.dart'; import 'page/td_stepper_page.dart'; +import 'page/td_steps_page.dart'; import 'page/td_swiper_page.dart'; import 'page/td_switch_page.dart'; import 'page/td_tabs_page.dart'; @@ -198,6 +199,7 @@ Map> exampleMap = { ExamplePageModel( text: 'Swiper 轮播图', name: 'swiper', pageBuilder: _wrapInheritedTheme((context) => const TDSwiperPage())), ExamplePageModel(text: 'Tag 标签', name: 'tag', pageBuilder: _wrapInheritedTheme((context) => const TDTagPage())), + ExamplePageModel(text: 'Steps 步骤条', name: 'steps', pageBuilder: _wrapInheritedTheme((context) => const TDStepsPage())), ], '反馈': [ ExamplePageModel( diff --git a/tdesign-component/example/lib/page/td_steps_page.dart b/tdesign-component/example/lib/page/td_steps_page.dart new file mode 100644 index 000000000..66ef7db95 --- /dev/null +++ b/tdesign-component/example/lib/page/td_steps_page.dart @@ -0,0 +1,89 @@ +import 'package:flutter/material.dart'; +import 'package:tdesign_flutter/tdesign_flutter.dart'; + +import '../../base/example_widget.dart'; +import '../annotation/demo.dart'; + +class TDStepsPage extends StatefulWidget { + const TDStepsPage({Key? key}) : super(key: key); + + @override + State createState() => _TDStepsPageState(); +} + +class _TDStepsPageState extends State { + @override + Widget build(BuildContext context) { + return ExamplePage( + backgroundColor: TDTheme.of(context).whiteColor1, + title: tdTitle(), + exampleCodeGroup: 'steps', + desc: 'steps步骤条', + children: [ + ExampleModule(title: '组件类型', children: [ + ExampleItem( + desc: '基本步骤', + builder: _buildBasicSteps), + ]), + ExampleModule(title: '组件类型', children: [ + ExampleItem( + desc: '简略步骤', + builder: _buildSimpleSteps), + ]), + ], + ); + } + + List basicStepsListData = [ + StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + StepsItemData(title: 'steps2', content: 'content2'), + StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + StepsItemData(title: 'steps4', content: 'content4', successIcon: TDIcons.call), + ]; + /// 基本步骤1 + @Demo(group: 'steps') + Widget _buildBasicSteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: basicStepsListData, + direction: StatusDirection.horizontal, + activeIndex: 2, + ), + ) + ], + ), + ); + } + + List simpleStepsListData = [ + StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + StepsItemData(title: 'steps2', content: 'content2'), + StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + StepsItemData(title: 'steps4', content: 'content4'), + ]; + /// 基本步骤2 + @Demo(group: 'steps') + Widget _buildSimpleSteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: simpleStepsListData, + direction: StatusDirection.horizontal, + activeIndex: 1, + simple: true, + ), + ) + ], + ), + ); + } +} diff --git a/tdesign-component/lib/src/components/steps/td_steps.dart b/tdesign-component/lib/src/components/steps/td_steps.dart new file mode 100644 index 000000000..8c51fbbec --- /dev/null +++ b/tdesign-component/lib/src/components/steps/td_steps.dart @@ -0,0 +1,62 @@ +import 'package:flutter/material.dart'; +import 'package:tdesign_flutter/src/components/steps/td_steps_horizontal.dart'; +import 'package:tdesign_flutter/src/components/steps/td_steps_vertical.dart'; +import '../../../tdesign_flutter.dart'; + +/// Steps步骤条数据类型 +class StepsItemData { + final String title; + final String content; + + final IconData? successIcon; + final IconData? errorIcon; + + StepsItemData({ + required this.title, + required this.content, + this.successIcon, + this.errorIcon, + }); +} + +/// Steps步骤条方向 +enum StatusDirection { + vertical, + horizontal, +} + +/// steps步骤条状态 +enum StepsStatus { + success, + error, +} + +/// Steps步骤条 +class TDSteps extends StatefulWidget { + final List steps; + final StatusDirection direction; + final int activeIndex; + final StepsStatus status; + final bool simple; + const TDSteps({ + super.key, + required this.steps, + required this.activeIndex, + this.direction = StatusDirection.horizontal, + this.status = StepsStatus.success, + this.simple = false, + }); + + @override + _TDStepsState createState() => _TDStepsState(); + +} +class _TDStepsState extends State { + @override + Widget build(BuildContext context) { + return widget.direction == StatusDirection.horizontal ? + TDStepsHorizontal(steps: widget.steps, activeIndex: widget.activeIndex, status: widget.status, simple: widget.simple): + Container(); + } + +} diff --git a/tdesign-component/lib/src/components/steps/td_steps_horizontal.dart b/tdesign-component/lib/src/components/steps/td_steps_horizontal.dart new file mode 100644 index 000000000..106e76f23 --- /dev/null +++ b/tdesign-component/lib/src/components/steps/td_steps_horizontal.dart @@ -0,0 +1,43 @@ +import 'package:flutter/material.dart'; +import 'package:tdesign_flutter/src/components/steps/td_steps_horizontal_item.dart'; +import '../../../tdesign_flutter.dart'; + +/// Steps步骤条,水平步骤 +class TDStepsHorizontal extends StatelessWidget { + final List steps; + final int activeIndex; + final StepsStatus status; + final bool simple; + const TDStepsHorizontal({ + super.key, + required this.steps, + required this.activeIndex, + required this.status, + required this.simple, + }); + + @override + Widget build(BuildContext context) { + final stepsCount = steps.length; + List stepsHorizontalItem = steps.asMap().entries.map((item){ + return Expanded( + flex: 1, + child: TDStepsHorizontalItem( + index: item.key, + data: item.value, + stepsCount: stepsCount, + activeIndex: activeIndex, + status: status, + simple: simple, + ), + ); + }).toList(); + + return Row( + mainAxisAlignment: MainAxisAlignment.center, + children: stepsHorizontalItem, + ); + } + +} + 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 new file mode 100644 index 000000000..0de8ccde9 --- /dev/null +++ b/tdesign-component/lib/src/components/steps/td_steps_horizontal_item.dart @@ -0,0 +1,173 @@ +import 'package:flutter/material.dart'; +import '../../../tdesign_flutter.dart'; + +/// Steps步骤条,水平步骤item +class TDStepsHorizontalItem extends StatelessWidget { + final StepsItemData data; + final int index; + final int stepsCount; + final int activeIndex; + final StepsStatus status; + final bool simple; + const TDStepsHorizontalItem({ + super.key, + required this.data, + required this.index, + required this.stepsCount, + required this.activeIndex, + required this.status, + required this.simple, + }); + + @override + Widget build(BuildContext context) { + /// 步骤条数字背景色 + var stepsNumberBgColor = TDTheme.of(context).brandNormalColor; + /// 步骤条数字颜色 + var stepsNumberTextColor = TDTheme.of(context).whiteColor1; + /// 步骤条标题颜色 + var stepsTitleColor = TDTheme.of(context).brandColor7; + /// 步骤条icon颜色 + var stepsIconColor = TDTheme.of(context).brandColor7; + /// 简略步骤条icon颜色 + var simpleStepsIconColor = TDTheme.of(context).brandColor7; + + Widget? completeIconWidget; + + /// 激活索引大于当前索引 + if (activeIndex > index) { + stepsNumberBgColor = TDTheme.of(context).brandColor1; + stepsNumberTextColor = TDTheme.of(context).brandColor7; + stepsTitleColor = TDTheme.of(context).fontGyColor1; + /// 已完成的用icon图标显示 + completeIconWidget = Icon(TDIcons.check, color: TDTheme.of(context).brandColor7, size: 16,); + }else if (activeIndex < index) { + /// 激活索引小于当前索引 + stepsNumberBgColor = TDTheme.of(context).grayColor1; + stepsNumberTextColor = TDTheme.of(context).fontGyColor3; + stepsTitleColor = TDTheme.of(context).fontGyColor3; + stepsIconColor = TDTheme.of(context).fontGyColor3; + simpleStepsIconColor = TDTheme.of(context).grayColor4; + } + + /// 步骤条icon图标组件,默认为索引文字 + Widget? stepsIconWidget = Text( + (index + 1).toString(), + style: TextStyle( + color: stepsNumberTextColor, + fontWeight: FontWeight.w400, + fontSize: 14, + ), + ); + + /// 已完成的用icon图标显示 + if (completeIconWidget != null) { + stepsIconWidget = completeIconWidget; + } + + /// 步骤条icon图标背景和形状 + BoxDecoration? iconWidgetDecoration = BoxDecoration( + color: stepsNumberBgColor, + shape: BoxShape.circle, + ); + + /// 传递了成功的icon图标 + if (data.successIcon != null) { + stepsIconWidget = Icon(data.successIcon, color: stepsIconColor, size: 22,); + /// 传了图标则不用设置背景色 + iconWidgetDecoration = null; + } + // icon组件容器大小 + double iconContainerSize = 22; + + /// 简略步骤条 + if (simple) { + iconContainerSize = 8; + stepsIconWidget = null; + /// 简略步骤条BoxDecoration + var simpleDecoration = BoxDecoration( + color: Colors.transparent, + shape: BoxShape.circle, + border: Border.all( + color: simpleStepsIconColor, + width: 1, + ), + ); + if (activeIndex == index) { + simpleDecoration = BoxDecoration( + color: TDTheme.of(context).brandColor7, + shape: BoxShape.circle, + ); + } + iconWidgetDecoration = simpleDecoration; + } + + return Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Expanded( + flex: 1, + child: Opacity( + opacity: index == 0 ? 0 : 1, + child: Container( + width: double.infinity, + height: 1, + color: activeIndex >= index ? TDTheme.of(context).brandColor7 : TDTheme.of(context).grayColor4 + ), + ), + ), + Container( + width: iconContainerSize, + height: iconContainerSize, + alignment: Alignment.center, + margin: const EdgeInsets.only(left: 8, right: 8), + decoration: iconWidgetDecoration, + child: stepsIconWidget, + ), + Expanded( + flex: 1, + child: Opacity( + opacity: index == stepsCount - 1 ? 0 : 1, + child: Container( + width: double.infinity, + height: 1, + color: activeIndex > index ? TDTheme.of(context).brandColor7 : TDTheme.of(context).grayColor4, + ), + ), + ), + ], + ), + Container( + margin: const EdgeInsets.only(top: 8), + alignment: Alignment.center, + child: TDText( + data.title, + style: TextStyle( + fontWeight: activeIndex == index ? FontWeight.w600 : FontWeight.w400, + color: stepsTitleColor, + fontSize: 14, + ), + ), + ), + 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, + ), + ), + ), + ], + ); + } + +} + diff --git a/tdesign-component/lib/src/components/steps/td_steps_vertical.dart b/tdesign-component/lib/src/components/steps/td_steps_vertical.dart new file mode 100644 index 000000000..f57062b13 --- /dev/null +++ b/tdesign-component/lib/src/components/steps/td_steps_vertical.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; +import 'package:tdesign_flutter/src/components/steps/td_steps_horizontal_item.dart'; +import '../../../tdesign_flutter.dart'; + +/// Steps步骤条,垂直步骤 +class TDStepsVertical extends StatelessWidget { + final List steps; + const TDStepsVertical({super.key, required this.steps,}); + + @override + Widget build(BuildContext context) { + // final stepsCount = steps.length; + List stepsHorizontalItem = steps.asMap().entries.map((item){ + return Expanded( + flex: 1, + child: Container(), + ); + }).toList(); + + return Row( + mainAxisAlignment: MainAxisAlignment.center, + children: stepsHorizontalItem, + ); + } + +} + diff --git a/tdesign-component/lib/tdesign_flutter.dart b/tdesign-component/lib/tdesign_flutter.dart index daab20a59..c7b422cbc 100644 --- a/tdesign-component/lib/tdesign_flutter.dart +++ b/tdesign-component/lib/tdesign_flutter.dart @@ -36,6 +36,7 @@ export 'src/components/sidebar/td_sidebar_item.dart'; export 'src/components/slider/td_slider.dart'; export 'src/components/slider/td_slider_theme.dart'; export 'src/components/stepper/td_stepper.dart'; +export 'src/components/steps/td_steps.dart'; export 'src/components/swiper/td_page_transform.dart'; export 'src/components/swiper/td_swiper.dart'; export 'src/components/switch/td_switch.dart'; From 3287a0ec66ed03dc68d1ae152e9c05b0c6218f62 Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sun, 23 Jun 2024 10:34:52 +0800 Subject: [PATCH 02/13] refactor(feature/steps): update steps component example --- .../example/lib/page/td_steps_page.dart | 236 ++++++++++++++++-- 1 file changed, 219 insertions(+), 17 deletions(-) diff --git a/tdesign-component/example/lib/page/td_steps_page.dart b/tdesign-component/example/lib/page/td_steps_page.dart index 66ef7db95..3cd08dc76 100644 --- a/tdesign-component/example/lib/page/td_steps_page.dart +++ b/tdesign-component/example/lib/page/td_steps_page.dart @@ -20,29 +20,105 @@ class _TDStepsPageState extends State { exampleCodeGroup: 'steps', desc: 'steps步骤条', children: [ - ExampleModule(title: '组件类型', children: [ + ExampleModule(title: '水平默认步骤条', children: [ ExampleItem( - desc: '基本步骤', - builder: _buildBasicSteps), + desc: '水平默认步骤条1', + builder: _buildBasicHSteps1), + ExampleItem( + desc: '水平默认步骤条2', + builder: _buildBasicHSteps2), + ExampleItem( + desc: '水平默认步骤条3', + builder: _buildBasicHSteps3), + ]), + ExampleModule(title: '水平图标步骤条', children: [ + ExampleItem( + desc: '水平图标步骤条1', + builder: _buildHIconSteps1), + ExampleItem( + desc: '水平图标步骤条2', + builder: _buildHIconSteps2), + ExampleItem( + desc: '水平图标步骤条3', + builder: _buildHIconSteps3), ]), - ExampleModule(title: '组件类型', children: [ + ExampleModule(title: '水平简略步骤条', children: [ + ExampleItem( + desc: '水平简略步骤条1', + builder: _buildSimpleHSteps1), + ExampleItem( + desc: '水平简略步骤条2', + builder: _buildSimpleHSteps2), ExampleItem( - desc: '简略步骤', - builder: _buildSimpleSteps), + desc: '水平简略步骤条3', + builder: _buildSimpleHSteps3), ]), ], ); } - List basicStepsListData = [ + List basicHStepsListData1 = [ + StepsItemData(title: 'steps1', content: 'content1'), + StepsItemData(title: 'steps2', content: 'content2'), + ]; + /// 基本步骤1 + @Demo(group: 'steps') + Widget _buildBasicHSteps1(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: basicHStepsListData1, + direction: StatusDirection.horizontal, + activeIndex: 0, + ), + ) + ], + ), + ); + } + List basicHStepsListData2 = [ + StepsItemData(title: 'steps1', content: 'content1'), + StepsItemData(title: 'steps2', content: 'content2'), + StepsItemData(title: 'steps3', content: 'content3'), + ]; + /// 基本步骤2 + @Demo(group: 'steps') + Widget _buildBasicHSteps2(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: basicHStepsListData2, + direction: StatusDirection.horizontal, + activeIndex: 1, + ), + ) + ], + ), + ); + } + List basicHStepsListData3 = [ + StepsItemData(title: 'steps1', content: 'content1'), + StepsItemData(title: 'steps2', content: 'content2'), + StepsItemData(title: 'steps3', content: 'content3'), + StepsItemData(title: 'steps4', content: 'content4'), + ]; + List basicStepsListData4 = [ StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), StepsItemData(title: 'steps2', content: 'content2'), StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), StepsItemData(title: 'steps4', content: 'content4', successIcon: TDIcons.call), ]; - /// 基本步骤1 + /// 基本步骤3 @Demo(group: 'steps') - Widget _buildBasicSteps(BuildContext context){ + Widget _buildBasicHSteps3(BuildContext context){ return Padding( padding: const EdgeInsets.only(left: 16, right: 16), child: Row( @@ -50,9 +126,9 @@ class _TDStepsPageState extends State { Expanded( flex: 1, child: TDSteps( - steps: basicStepsListData, + steps: basicHStepsListData3, direction: StatusDirection.horizontal, - activeIndex: 2, + activeIndex: 1, ), ) ], @@ -60,15 +136,141 @@ class _TDStepsPageState extends State { ); } - List simpleStepsListData = [ + List hIconStepsListData1 = [ StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + ]; + /// 水平图标步骤条1 + @Demo(group: 'steps') + Widget _buildHIconSteps1(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: hIconStepsListData1, + direction: StatusDirection.horizontal, + activeIndex: 0, + ), + ) + ], + ), + ); + } + + List hIconStepsListData2 = [ + StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + ]; + /// 水平图标步骤条1 + @Demo(group: 'steps') + Widget _buildHIconSteps2(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: hIconStepsListData2, + direction: StatusDirection.horizontal, + activeIndex: 1, + ), + ) + ], + ), + ); + } + + List hIconStepsListData3 = [ + StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + ]; + /// 水平图标步骤条1 + @Demo(group: 'steps') + Widget _buildHIconSteps3(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: hIconStepsListData3, + direction: StatusDirection.horizontal, + activeIndex: 1, + ), + ) + ], + ), + ); + } + + List simpleHStepsListData1 = [ + StepsItemData(title: 'steps1', content: 'content1'), StepsItemData(title: 'steps2', content: 'content2'), - StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), - StepsItemData(title: 'steps4', content: 'content4'), ]; - /// 基本步骤2 + /// 水平简略步骤条1 + @Demo(group: 'steps') + Widget _buildSimpleHSteps1(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: simpleHStepsListData1, + direction: StatusDirection.horizontal, + activeIndex: 0, + simple: true, + ), + ) + ], + ), + ); + } + + List simpleHStepsListData2 = [ + StepsItemData(title: 'steps1', content: 'content1'), + StepsItemData(title: 'steps2', content: 'content2'), + StepsItemData(title: 'steps3', content: 'content3'), + ]; + /// 水平简略步骤条2 + @Demo(group: 'steps') + Widget _buildSimpleHSteps2(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: simpleHStepsListData2, + direction: StatusDirection.horizontal, + activeIndex: 1, + simple: true, + ), + ) + ], + ), + ); + } + + List simpleHStepsListData3 = [ + StepsItemData(title: 'steps1', content: 'content1'), + StepsItemData(title: 'steps2', content: 'content2'), + StepsItemData(title: 'steps3', content: 'content3'), + StepsItemData(title: 'steps3', content: 'content3'), + ]; + /// 水平简略步骤条3 @Demo(group: 'steps') - Widget _buildSimpleSteps(BuildContext context){ + Widget _buildSimpleHSteps3(BuildContext context){ return Padding( padding: const EdgeInsets.only(left: 16, right: 16), child: Row( @@ -76,7 +278,7 @@ class _TDStepsPageState extends State { Expanded( flex: 1, child: TDSteps( - steps: simpleStepsListData, + steps: simpleHStepsListData3, direction: StatusDirection.horizontal, activeIndex: 1, simple: true, From aadf12f21389d6e13bb289ce3bf0c56d1f3db8d1 Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sun, 23 Jun 2024 12:44:36 +0800 Subject: [PATCH 03/13] feat(feature/steps): steps component support status style. --- .../example/lib/page/td_steps_page.dart | 94 +++++++++++++++++++ .../lib/src/components/steps/td_steps.dart | 4 +- .../steps/td_steps_horizontal_item.dart | 42 +++++++-- 3 files changed, 130 insertions(+), 10 deletions(-) diff --git a/tdesign-component/example/lib/page/td_steps_page.dart b/tdesign-component/example/lib/page/td_steps_page.dart index 3cd08dc76..2fd9a1639 100644 --- a/tdesign-component/example/lib/page/td_steps_page.dart +++ b/tdesign-component/example/lib/page/td_steps_page.dart @@ -53,6 +53,17 @@ class _TDStepsPageState extends State { desc: '水平简略步骤条3', builder: _buildSimpleHSteps3), ]), + ExampleModule(title: '水平错误状态步骤条', children: [ + ExampleItem( + desc: '水平错误状态基本步骤条', + builder: _buildHErrorSteps1), + ExampleItem( + desc: '水平错误状态图标步骤条', + builder: _buildHErrorSteps2), + ExampleItem( + desc: '水平错误状态简略步骤条', + builder: _buildHErrorSteps3), + ]), ], ); } @@ -288,4 +299,87 @@ class _TDStepsPageState extends State { ), ); } + + List hErrorStepsListData1 = [ + StepsItemData(title: 'steps1', content: 'content1'), + StepsItemData(title: 'Error', content: 'content2'), + StepsItemData(title: 'steps3', content: 'content3'), + StepsItemData(title: 'steps3', content: 'content3'), + ]; + /// 水平简略步骤条3 + @Demo(group: 'steps') + Widget _buildHErrorSteps1(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: hErrorStepsListData1, + direction: StatusDirection.horizontal, + activeIndex: 1, + status: StepsStatus.error, + ), + ) + ], + ), + ); + } + + List hErrorStepsListData2 = [ + StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + StepsItemData(title: 'Error', content: 'content2', successIcon: TDIcons.call, errorIcon: TDIcons.close_circle), + StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + ]; + /// 水平简略步骤条3 + @Demo(group: 'steps') + Widget _buildHErrorSteps2(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: hErrorStepsListData2, + direction: StatusDirection.horizontal, + activeIndex: 1, + status: StepsStatus.error, + ), + ) + ], + ), + ); + } + + List hErrorStepsListData3 = [ + StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + StepsItemData(title: 'Error', content: 'content2', successIcon: TDIcons.call, errorIcon: TDIcons.close_circle), + StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + ]; + /// 水平简略步骤条3 + @Demo(group: 'steps') + Widget _buildHErrorSteps3(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: hErrorStepsListData3, + direction: StatusDirection.horizontal, + activeIndex: 1, + status: StepsStatus.error, + simple: true, + ), + ) + ], + ), + ); + } + } diff --git a/tdesign-component/lib/src/components/steps/td_steps.dart b/tdesign-component/lib/src/components/steps/td_steps.dart index 8c51fbbec..2498b5c84 100644 --- a/tdesign-component/lib/src/components/steps/td_steps.dart +++ b/tdesign-component/lib/src/components/steps/td_steps.dart @@ -54,8 +54,10 @@ class TDSteps extends StatefulWidget { class _TDStepsState extends State { @override Widget build(BuildContext context) { + /// 当前激活的step索引 + final currentActiveIndex = widget.activeIndex < 0 ? 0 : (widget.activeIndex >= widget.steps.length ? widget.steps.length - 1 : widget.activeIndex); return widget.direction == StatusDirection.horizontal ? - TDStepsHorizontal(steps: widget.steps, activeIndex: widget.activeIndex, status: widget.status, simple: widget.simple): + TDStepsHorizontal(steps: widget.steps, activeIndex: currentActiveIndex, status: widget.status, simple: widget.simple): Container(); } 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 0de8ccde9..a53748384 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 @@ -32,7 +32,12 @@ class TDStepsHorizontalItem extends StatelessWidget { /// 简略步骤条icon颜色 var simpleStepsIconColor = TDTheme.of(context).brandColor7; + /// 是否要设置步骤图标widget的Decoration + bool shouldSetIconWidgetDecoration = true; + Widget? completeIconWidget; + /// 错误icon图标显示 + Widget errorIconWidget = Icon(TDIcons.close, color: TDTheme.of(context).errorColor6, size: 16,); /// 激活索引大于当前索引 if (activeIndex > index) { @@ -65,18 +70,37 @@ class TDStepsHorizontalItem extends StatelessWidget { stepsIconWidget = completeIconWidget; } - /// 步骤条icon图标背景和形状 - BoxDecoration? iconWidgetDecoration = BoxDecoration( - color: stepsNumberBgColor, - shape: BoxShape.circle, - ); - - /// 传递了成功的icon图标 + /// 传递了成功的icon图标, 已完成的step都需要显示 if (data.successIcon != null) { stepsIconWidget = Icon(data.successIcon, color: stepsIconColor, size: 22,); /// 传了图标则不用设置背景色 - iconWidgetDecoration = null; + shouldSetIconWidgetDecoration = false; } + + /// 状态是错误状态,激活索引是当前索引,只有当前激活索引才需要显示 + if (status == StepsStatus.error && activeIndex == index) { + /// 显示错误颜色 + stepsNumberBgColor = TDTheme.of(context).errorColor1; + stepsTitleColor = TDTheme.of(context).errorColor6; + /// 显示错误图标 + stepsIconWidget = errorIconWidget; + if (data.errorIcon != null) { + stepsIconWidget = Icon(data.errorIcon, color: TDTheme.of(context).errorColor6, size: 22,); + } + /// 传了图标则不用设置背景色等Decoration + shouldSetIconWidgetDecoration = data.errorIcon == null; + if (simple) { + simpleStepsIconColor = TDTheme.of(context).errorColor6; + } + } + + /// 步骤条icon图标背景和形状 + BoxDecoration? iconWidgetDecoration = shouldSetIconWidgetDecoration ? BoxDecoration( + color: stepsNumberBgColor, + shape: BoxShape.circle, + ): null; + + // icon组件容器大小 double iconContainerSize = 22; @@ -95,7 +119,7 @@ class TDStepsHorizontalItem extends StatelessWidget { ); if (activeIndex == index) { simpleDecoration = BoxDecoration( - color: TDTheme.of(context).brandColor7, + color: simpleStepsIconColor, shape: BoxShape.circle, ); } From 85c79efa55cbc997afb20fe6cb6deb336313e077 Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sun, 23 Jun 2024 16:58:21 +0800 Subject: [PATCH 04/13] feat(feature/steps): steps component support vertical style. --- .../example/lib/page/td_steps_page.dart | 182 ++++++++++++++++ .../lib/src/components/steps/td_steps.dart | 2 +- .../components/steps/td_steps_vertical.dart | 33 ++- .../steps/td_steps_vertical_item.dart | 206 ++++++++++++++++++ 4 files changed, 412 insertions(+), 11 deletions(-) create mode 100644 tdesign-component/lib/src/components/steps/td_steps_vertical_item.dart diff --git a/tdesign-component/example/lib/page/td_steps_page.dart b/tdesign-component/example/lib/page/td_steps_page.dart index 2fd9a1639..882287259 100644 --- a/tdesign-component/example/lib/page/td_steps_page.dart +++ b/tdesign-component/example/lib/page/td_steps_page.dart @@ -64,6 +64,27 @@ class _TDStepsPageState extends State { desc: '水平错误状态简略步骤条', builder: _buildHErrorSteps3), ]), + + ExampleModule(title: '垂直步骤条', children: [ + ExampleItem( + desc: '垂直默认步骤条', + builder: _buildVBasicSteps), + ExampleItem( + desc: '垂直图标步骤条', + builder: _buildVIconSteps), + ExampleItem( + desc: '垂直简略步骤条', + builder: _buildVSimpleSteps), + ExampleItem( + desc: '垂直错误状态基本步骤条', + builder: _buildVErrorBasicSteps), + ExampleItem( + desc: '垂直错误状态图标步骤条', + builder: _buildVErrorIconSteps), + ExampleItem( + desc: '垂直错误状态简略步骤条', + builder: _buildVErrorSimpleSteps), + ]), ], ); } @@ -382,4 +403,165 @@ class _TDStepsPageState extends State { ); } + List vBasicStepsListData = [ + StepsItemData(title: 'Filish', content: 'Customize content'), + StepsItemData(title: 'Process', content: 'Customize content'), + StepsItemData(title: 'Default', content: 'Customize content'), + StepsItemData(title: 'Default', content: 'Customize content'), + ]; + /// 垂直默认步骤条 + @Demo(group: 'steps') + Widget _buildVBasicSteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: vBasicStepsListData, + direction: StatusDirection.vertical, + activeIndex: 1, + ), + ) + ], + ), + ); + } + + List vIconStepsListData = [ + StepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), + StepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart), + StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + ]; + /// 垂直图标步骤条 + @Demo(group: 'steps') + Widget _buildVIconSteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: vIconStepsListData, + direction: StatusDirection.vertical, + activeIndex: 1, + ), + ) + ], + ), + ); + } + + List vSimpleStepsListData = [ + StepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), + StepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart), + StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + ]; + /// 垂直简略步骤条 + @Demo(group: 'steps') + Widget _buildVSimpleSteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: vSimpleStepsListData, + direction: StatusDirection.vertical, + activeIndex: 1, + simple: true, + ), + ) + ], + ), + ); + } + + List vErrorBasicStepsListData = [ + StepsItemData(title: 'Filish', content: 'Customize content'), + StepsItemData(title: 'Process', content: 'Customize content'), + StepsItemData(title: 'Default', content: 'Customize content'), + StepsItemData(title: 'Default', content: 'Customize content'), + ]; + /// 垂直错误状态基本步骤条 + @Demo(group: 'steps') + Widget _buildVErrorBasicSteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: vErrorBasicStepsListData, + direction: StatusDirection.vertical, + activeIndex: 1, + status: StepsStatus.error, + ), + ) + ], + ), + ); + } + + List vErrorIconStepsListData = [ + StepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), + StepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart, errorIcon: TDIcons.close_circle), + StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + ]; + /// 垂直错误状态图标步骤条 + @Demo(group: 'steps') + Widget _buildVErrorIconSteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: vErrorIconStepsListData, + direction: StatusDirection.vertical, + activeIndex: 1, + status: StepsStatus.error, + ), + ) + ], + ), + ); + } + + List vErrorSimpleStepsListData = [ + StepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), + StepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart), + StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + ]; + /// 垂直错误状态图标步骤条 + @Demo(group: 'steps') + Widget _buildVErrorSimpleSteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: vErrorSimpleStepsListData, + direction: StatusDirection.vertical, + activeIndex: 1, + simple: true, + status: StepsStatus.error, + ), + ) + ], + ), + ); + } + } diff --git a/tdesign-component/lib/src/components/steps/td_steps.dart b/tdesign-component/lib/src/components/steps/td_steps.dart index 2498b5c84..214660249 100644 --- a/tdesign-component/lib/src/components/steps/td_steps.dart +++ b/tdesign-component/lib/src/components/steps/td_steps.dart @@ -58,7 +58,7 @@ class _TDStepsState extends State { final currentActiveIndex = widget.activeIndex < 0 ? 0 : (widget.activeIndex >= widget.steps.length ? widget.steps.length - 1 : widget.activeIndex); return widget.direction == StatusDirection.horizontal ? TDStepsHorizontal(steps: widget.steps, activeIndex: currentActiveIndex, status: widget.status, simple: widget.simple): - Container(); + TDStepsVertical(steps: widget.steps, activeIndex: currentActiveIndex, status: widget.status, simple: widget.simple); } } diff --git a/tdesign-component/lib/src/components/steps/td_steps_vertical.dart b/tdesign-component/lib/src/components/steps/td_steps_vertical.dart index f57062b13..2046f2c8c 100644 --- a/tdesign-component/lib/src/components/steps/td_steps_vertical.dart +++ b/tdesign-component/lib/src/components/steps/td_steps_vertical.dart @@ -1,25 +1,38 @@ import 'package:flutter/material.dart'; -import 'package:tdesign_flutter/src/components/steps/td_steps_horizontal_item.dart'; +import 'package:tdesign_flutter/src/components/steps/td_steps_vertical_item.dart'; import '../../../tdesign_flutter.dart'; /// Steps步骤条,垂直步骤 class TDStepsVertical extends StatelessWidget { final List steps; - const TDStepsVertical({super.key, required this.steps,}); + final int activeIndex; + final StepsStatus status; + final bool simple; + const TDStepsVertical({ + super.key, + required this.steps, + required this.activeIndex, + required this.status, + required this.simple, + }); @override Widget build(BuildContext context) { - // final stepsCount = steps.length; - List stepsHorizontalItem = steps.asMap().entries.map((item){ - return Expanded( - flex: 1, - child: Container(), + final stepsCount = steps.length; + List stepsVerticalItem = steps.asMap().entries.map((item){ + return TDStepsVerticalItem( + index: item.key, + data: item.value, + stepsCount: stepsCount, + activeIndex: activeIndex, + status: status, + simple: simple, ); }).toList(); - return Row( - mainAxisAlignment: MainAxisAlignment.center, - children: stepsHorizontalItem, + return Column( + mainAxisAlignment: MainAxisAlignment.start, + children: stepsVerticalItem, ); } 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 new file mode 100644 index 000000000..4fc1b389e --- /dev/null +++ b/tdesign-component/lib/src/components/steps/td_steps_vertical_item.dart @@ -0,0 +1,206 @@ +import 'package:flutter/material.dart'; +import '../../../tdesign_flutter.dart'; + +/// Steps步骤条,垂直步骤item +class TDStepsVerticalItem extends StatelessWidget { + final StepsItemData data; + final int index; + final int stepsCount; + final int activeIndex; + final StepsStatus status; + final bool simple; + const TDStepsVerticalItem({ + super.key, + required this.data, + required this.index, + required this.stepsCount, + required this.activeIndex, + required this.status, + required this.simple, + }); + + @override + Widget build(BuildContext context) { + /// 步骤条数字背景色 + var stepsNumberBgColor = TDTheme.of(context).brandNormalColor; + /// 步骤条数字颜色 + var stepsNumberTextColor = TDTheme.of(context).whiteColor1; + /// 步骤条标题颜色 + var stepsTitleColor = TDTheme.of(context).brandColor7; + /// 步骤条icon颜色 + var stepsIconColor = TDTheme.of(context).brandColor7; + /// 简略步骤条icon颜色 + var simpleStepsIconColor = TDTheme.of(context).brandColor7; + + /// 是否要设置步骤图标widget的Decoration + bool shouldSetIconWidgetDecoration = true; + + Widget? completeIconWidget; + /// 错误icon图标显示 + Widget errorIconWidget = Icon(TDIcons.close, color: TDTheme.of(context).errorColor6, size: 16,); + + /// 激活索引大于当前索引 + if (activeIndex > index) { + stepsNumberBgColor = TDTheme.of(context).brandColor1; + stepsNumberTextColor = TDTheme.of(context).brandColor7; + stepsTitleColor = TDTheme.of(context).fontGyColor1; + /// 已完成的用icon图标显示 + completeIconWidget = Icon(TDIcons.check, color: TDTheme.of(context).brandColor7, size: 16,); + }else if (activeIndex < index) { + /// 激活索引小于当前索引 + stepsNumberBgColor = TDTheme.of(context).grayColor1; + stepsNumberTextColor = TDTheme.of(context).fontGyColor3; + stepsTitleColor = TDTheme.of(context).fontGyColor3; + stepsIconColor = TDTheme.of(context).fontGyColor3; + simpleStepsIconColor = TDTheme.of(context).grayColor4; + } + + /// 步骤条icon图标组件,默认为索引文字 + Widget? stepsIconWidget = Text( + (index + 1).toString(), + style: TextStyle( + color: stepsNumberTextColor, + fontWeight: FontWeight.w400, + fontSize: 14, + ), + ); + + /// 已完成的用icon图标显示 + if (completeIconWidget != null) { + stepsIconWidget = completeIconWidget; + } + + /// 传递了成功的icon图标, 已完成的step都需要显示 + if (data.successIcon != null) { + stepsIconWidget = Icon(data.successIcon, color: stepsIconColor, size: 22,); + /// 传了图标则不用设置背景色 + shouldSetIconWidgetDecoration = false; + } + + /// 状态是错误状态,激活索引是当前索引,只有当前激活索引才需要显示 + if (status == StepsStatus.error && activeIndex == index) { + /// 显示错误颜色 + stepsNumberBgColor = TDTheme.of(context).errorColor1; + stepsTitleColor = TDTheme.of(context).errorColor6; + /// 显示错误图标 + stepsIconWidget = errorIconWidget; + if (data.errorIcon != null) { + stepsIconWidget = Icon(data.errorIcon, color: TDTheme.of(context).errorColor6, size: 22,); + } + /// 传了图标则不用设置背景色等Decoration + shouldSetIconWidgetDecoration = data.errorIcon == null; + if (simple) { + simpleStepsIconColor = TDTheme.of(context).errorColor6; + } + } + + /// 步骤条icon图标背景和形状 + BoxDecoration? iconWidgetDecoration = shouldSetIconWidgetDecoration ? BoxDecoration( + color: stepsNumberBgColor, + shape: BoxShape.circle, + ): null; + + + // icon组件容器大小 + double iconContainerSize = 22; + + /// 简略步骤条 + if (simple) { + iconContainerSize = 8; + stepsIconWidget = null; + /// 简略步骤条BoxDecoration + var simpleDecoration = BoxDecoration( + color: Colors.transparent, + shape: BoxShape.circle, + border: Border.all( + color: simpleStepsIconColor, + width: 1, + ), + ); + if (activeIndex == index) { + simpleDecoration = BoxDecoration( + color: simpleStepsIconColor, + shape: BoxShape.circle, + ); + } + iconWidgetDecoration = simpleDecoration; + } + + return Container( + margin: const EdgeInsets.only(bottom: 8), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + margin: const EdgeInsets.only(right: 8), + width: 22, + child: IntrinsicHeight( + child: ConstrainedBox( + constraints: const BoxConstraints(minHeight: 62), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Container( + width: iconContainerSize, + height: 22, + alignment: Alignment.center, + margin: const EdgeInsets.only(bottom: 8), + decoration: iconWidgetDecoration, + child: stepsIconWidget, + ), + Expanded( + flex: 1, + child: Opacity( + opacity: index == stepsCount - 1 ? 0 : 1, + child: Container( + width: 1, + height: double.infinity, + color: activeIndex > index ? TDTheme.of(context).brandColor7 : TDTheme.of(context).grayColor4, + ), + ), + ), + ], + ), + ), + ), + ), + Expanded( + flex: 1, + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + height: 22, + margin: const EdgeInsets.only(bottom: 4), + child: TDText( + data.title, + style: TextStyle( + fontWeight: activeIndex == index ? FontWeight.w600 : FontWeight.w400, + color: stepsTitleColor, + fontSize: 14, + height: 1.4, + ), + ), + ), + Container( + child: TDText( + data.content, + style: TextStyle( + fontWeight: FontWeight.w400, + color: TDTheme.of(context).fontGyColor3, + fontSize: 12, + ), + ), + ), + ], + ), + ) + ], + ), + ); + } + +} + From 4c441bc59fc20163b0878342ed1295c1e2fcd8af Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sun, 23 Jun 2024 17:55:01 +0800 Subject: [PATCH 05/13] feat(feature/steps): steps component support readonly style. --- .../example/lib/page/td_steps_page.dart | 95 +++++++++++++++++++ .../lib/src/components/steps/td_steps.dart | 24 ++++- .../components/steps/td_steps_horizontal.dart | 3 + .../steps/td_steps_horizontal_item.dart | 17 +++- .../components/steps/td_steps_vertical.dart | 3 + .../steps/td_steps_vertical_item.dart | 42 +++++--- 6 files changed, 164 insertions(+), 20 deletions(-) diff --git a/tdesign-component/example/lib/page/td_steps_page.dart b/tdesign-component/example/lib/page/td_steps_page.dart index 882287259..1d503ac06 100644 --- a/tdesign-component/example/lib/page/td_steps_page.dart +++ b/tdesign-component/example/lib/page/td_steps_page.dart @@ -84,6 +84,17 @@ class _TDStepsPageState extends State { ExampleItem( desc: '垂直错误状态简略步骤条', builder: _buildVErrorSimpleSteps), + ExampleItem( + desc: '垂直自定义内容基本步骤条', + builder: _buildVCustomContentBaseSteps), + ]), + ExampleModule(title: 'Extension步骤条', children: [ + ExampleItem( + desc: 'Read-only Steps 纯展示水平步骤条', + builder: _buildHReadOnlySteps), + ExampleItem( + desc: 'Read-only Steps 纯展示垂直步骤条', + builder: _buildVReadOnlySteps), ]), ], ); @@ -564,4 +575,88 @@ class _TDStepsPageState extends State { ); } + List vCustomContentBasicStepsListData = [ + StepsItemData(title: 'Filish', content: 'Customize content'), + StepsItemData(title: 'Process', content: 'Customize content', customContent: const TDImage( + assetUrl: 'assets/img/image.png', + type: TDImageType.square, + )), + StepsItemData(title: 'Default', content: 'Customize content'), + StepsItemData(title: 'Default', content: 'Customize content'), + ]; + /// 垂直自定义内容基本步骤条 + @Demo(group: 'steps') + Widget _buildVCustomContentBaseSteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: vCustomContentBasicStepsListData, + direction: StatusDirection.vertical, + activeIndex: 1, + ), + ) + ], + ), + ); + } + + List hReadOnlyStepsListData = [ + StepsItemData(title: 'Filish', content: 'content'), + StepsItemData(title: 'Process', content: 'content'), + StepsItemData(title: 'Default', content: 'content'), + StepsItemData(title: 'Default', content: 'content'), + ]; + /// 水平自定义内容基本步骤条 + @Demo(group: 'steps') + Widget _buildHReadOnlySteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: hReadOnlyStepsListData, + direction: StatusDirection.horizontal, + activeIndex: 0, + readOnly: true, + ), + ) + ], + ), + ); + } + + + List vReadOnlyStepsListData = [ + StepsItemData(title: 'Filish', content: 'Customize content'), + StepsItemData(title: 'Process', content: 'Customize content'), + StepsItemData(title: 'Default', content: 'Customize content'), + StepsItemData(title: 'Default', content: 'Customize content'), + ]; + /// 垂直自定义内容基本步骤条 + @Demo(group: 'steps') + Widget _buildVReadOnlySteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: vReadOnlyStepsListData, + direction: StatusDirection.vertical, + activeIndex: 0, + readOnly: true, + ), + ) + ], + ), + ); + } + } diff --git a/tdesign-component/lib/src/components/steps/td_steps.dart b/tdesign-component/lib/src/components/steps/td_steps.dart index 214660249..15d63de40 100644 --- a/tdesign-component/lib/src/components/steps/td_steps.dart +++ b/tdesign-component/lib/src/components/steps/td_steps.dart @@ -11,11 +11,14 @@ class StepsItemData { final IconData? successIcon; final IconData? errorIcon; + final Widget? customContent; + StepsItemData({ required this.title, required this.content, this.successIcon, this.errorIcon, + this.customContent, }); } @@ -38,6 +41,7 @@ class TDSteps extends StatefulWidget { final int activeIndex; final StepsStatus status; final bool simple; + final bool readOnly; const TDSteps({ super.key, required this.steps, @@ -45,6 +49,7 @@ class TDSteps extends StatefulWidget { this.direction = StatusDirection.horizontal, this.status = StepsStatus.success, this.simple = false, + this.readOnly = false, }); @override @@ -55,10 +60,23 @@ class _TDStepsState extends State { @override Widget build(BuildContext context) { /// 当前激活的step索引 - final currentActiveIndex = widget.activeIndex < 0 ? 0 : (widget.activeIndex >= widget.steps.length ? widget.steps.length - 1 : widget.activeIndex); + final currentActiveIndex = widget.activeIndex < 0 ? 0 : + (widget.activeIndex >= widget.steps.length ? widget.steps.length - 1 : widget.activeIndex); return widget.direction == StatusDirection.horizontal ? - TDStepsHorizontal(steps: widget.steps, activeIndex: currentActiveIndex, status: widget.status, simple: widget.simple): - TDStepsVertical(steps: widget.steps, activeIndex: currentActiveIndex, status: widget.status, simple: widget.simple); + TDStepsHorizontal( + steps: widget.steps, + activeIndex: currentActiveIndex, + status: widget.status, + simple: widget.simple, + readOnly: widget.readOnly + ): + TDStepsVertical( + steps: widget.steps, + activeIndex: currentActiveIndex, + status: widget.status, + simple: widget.simple, + readOnly: widget.readOnly, + ); } } diff --git a/tdesign-component/lib/src/components/steps/td_steps_horizontal.dart b/tdesign-component/lib/src/components/steps/td_steps_horizontal.dart index 106e76f23..a55b2c492 100644 --- a/tdesign-component/lib/src/components/steps/td_steps_horizontal.dart +++ b/tdesign-component/lib/src/components/steps/td_steps_horizontal.dart @@ -8,12 +8,14 @@ class TDStepsHorizontal extends StatelessWidget { final int activeIndex; final StepsStatus status; final bool simple; + final bool readOnly; const TDStepsHorizontal({ super.key, required this.steps, required this.activeIndex, required this.status, required this.simple, + required this.readOnly, }); @override @@ -29,6 +31,7 @@ class TDStepsHorizontal extends StatelessWidget { activeIndex: activeIndex, status: status, simple: simple, + readOnly: readOnly, ), ); }).toList(); 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 a53748384..39016d452 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 @@ -9,6 +9,7 @@ class TDStepsHorizontalItem extends StatelessWidget { final int activeIndex; final StepsStatus status; final bool simple; + final bool readOnly; const TDStepsHorizontalItem({ super.key, required this.data, @@ -17,6 +18,7 @@ class TDStepsHorizontalItem extends StatelessWidget { required this.activeIndex, required this.status, required this.simple, + required this.readOnly, }); @override @@ -105,7 +107,12 @@ class TDStepsHorizontalItem extends StatelessWidget { double iconContainerSize = 22; /// 简略步骤条 - if (simple) { + if (simple || readOnly) { + /// readOnly纯展示 + if (readOnly) { + simpleStepsIconColor = TDTheme.of(context).brandColor7; + stepsTitleColor = TDTheme.of(context).fontGyColor1; + } iconContainerSize = 8; stepsIconWidget = null; /// 简略步骤条BoxDecoration @@ -117,7 +124,7 @@ class TDStepsHorizontalItem extends StatelessWidget { width: 1, ), ); - if (activeIndex == index) { + if (activeIndex == index && !readOnly) { simpleDecoration = BoxDecoration( color: simpleStepsIconColor, shape: BoxShape.circle, @@ -140,7 +147,7 @@ class TDStepsHorizontalItem extends StatelessWidget { child: Container( width: double.infinity, height: 1, - color: activeIndex >= index ? TDTheme.of(context).brandColor7 : TDTheme.of(context).grayColor4 + color: (activeIndex >= index || readOnly) ? TDTheme.of(context).brandColor7 : TDTheme.of(context).grayColor4 ), ), ), @@ -159,7 +166,7 @@ class TDStepsHorizontalItem extends StatelessWidget { child: Container( width: double.infinity, height: 1, - color: activeIndex > index ? TDTheme.of(context).brandColor7 : TDTheme.of(context).grayColor4, + color: (activeIndex > index || readOnly) ? TDTheme.of(context).brandColor7 : TDTheme.of(context).grayColor4, ), ), ), @@ -171,7 +178,7 @@ class TDStepsHorizontalItem extends StatelessWidget { child: TDText( data.title, style: TextStyle( - fontWeight: activeIndex == index ? FontWeight.w600 : FontWeight.w400, + fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400, color: stepsTitleColor, fontSize: 14, ), diff --git a/tdesign-component/lib/src/components/steps/td_steps_vertical.dart b/tdesign-component/lib/src/components/steps/td_steps_vertical.dart index 2046f2c8c..c2a609550 100644 --- a/tdesign-component/lib/src/components/steps/td_steps_vertical.dart +++ b/tdesign-component/lib/src/components/steps/td_steps_vertical.dart @@ -8,12 +8,14 @@ class TDStepsVertical extends StatelessWidget { final int activeIndex; final StepsStatus status; final bool simple; + final bool readOnly; const TDStepsVertical({ super.key, required this.steps, required this.activeIndex, required this.status, required this.simple, + required this.readOnly, }); @override @@ -27,6 +29,7 @@ class TDStepsVertical extends StatelessWidget { activeIndex: activeIndex, status: status, simple: simple, + readOnly: readOnly, ); }).toList(); 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 4fc1b389e..2c63581e6 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 @@ -9,6 +9,7 @@ class TDStepsVerticalItem extends StatelessWidget { final int activeIndex; final StepsStatus status; final bool simple; + final bool readOnly; const TDStepsVerticalItem({ super.key, required this.data, @@ -17,6 +18,7 @@ class TDStepsVerticalItem extends StatelessWidget { required this.activeIndex, required this.status, required this.simple, + required this.readOnly, }); @override @@ -105,7 +107,12 @@ class TDStepsVerticalItem extends StatelessWidget { double iconContainerSize = 22; /// 简略步骤条 - if (simple) { + if (simple || readOnly) { + /// readOnly纯展示 + if (readOnly) { + simpleStepsIconColor = TDTheme.of(context).brandColor7; + stepsTitleColor = TDTheme.of(context).fontGyColor1; + } iconContainerSize = 8; stepsIconWidget = null; /// 简略步骤条BoxDecoration @@ -117,7 +124,7 @@ class TDStepsVerticalItem extends StatelessWidget { width: 1, ), ); - if (activeIndex == index) { + if (activeIndex == index && !readOnly) { simpleDecoration = BoxDecoration( color: simpleStepsIconColor, shape: BoxShape.circle, @@ -126,6 +133,12 @@ class TDStepsVerticalItem extends StatelessWidget { iconWidgetDecoration = simpleDecoration; } + /// 自定义内容 + var customContent = data.customContent != null ? Container( + margin: const EdgeInsets.only(top: 4), + child: data.customContent!, + ) : Container(); + return Container( margin: const EdgeInsets.only(bottom: 8), child: Row( @@ -156,7 +169,7 @@ class TDStepsVerticalItem extends StatelessWidget { child: Container( width: 1, height: double.infinity, - color: activeIndex > index ? TDTheme.of(context).brandColor7 : TDTheme.of(context).grayColor4, + color: (activeIndex > index || readOnly) ? TDTheme.of(context).brandColor7 : TDTheme.of(context).grayColor4, ), ), ), @@ -177,22 +190,27 @@ class TDStepsVerticalItem extends StatelessWidget { child: TDText( data.title, style: TextStyle( - fontWeight: activeIndex == index ? FontWeight.w600 : FontWeight.w400, + fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400, color: stepsTitleColor, fontSize: 14, height: 1.4, ), ), ), - Container( - child: TDText( - data.content, - style: TextStyle( - fontWeight: FontWeight.w400, - color: TDTheme.of(context).fontGyColor3, - fontSize: 12, + Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TDText( + data.content, + style: TextStyle( + fontWeight: FontWeight.w400, + color: TDTheme.of(context).fontGyColor3, + fontSize: 12, + ), ), - ), + customContent, + ] ), ], ), From 84538a0de62f9e3ba0827c6b672b7fafabbff82c Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sun, 23 Jun 2024 18:42:36 +0800 Subject: [PATCH 06/13] refactor(feature/steps): Optimize code variable naming. --- .../example/lib/page/td_steps_page.dart | 256 +++++++++--------- .../lib/src/components/steps/td_steps.dart | 22 +- .../components/steps/td_steps_horizontal.dart | 4 +- .../steps/td_steps_horizontal_item.dart | 6 +- .../components/steps/td_steps_vertical.dart | 4 +- .../steps/td_steps_vertical_item.dart | 6 +- 6 files changed, 149 insertions(+), 149 deletions(-) diff --git a/tdesign-component/example/lib/page/td_steps_page.dart b/tdesign-component/example/lib/page/td_steps_page.dart index 1d503ac06..3aedd18d4 100644 --- a/tdesign-component/example/lib/page/td_steps_page.dart +++ b/tdesign-component/example/lib/page/td_steps_page.dart @@ -100,9 +100,9 @@ class _TDStepsPageState extends State { ); } - List basicHStepsListData1 = [ - StepsItemData(title: 'steps1', content: 'content1'), - StepsItemData(title: 'steps2', content: 'content2'), + List basicHStepsListData1 = [ + TDStepsItemData(title: 'steps1', content: 'content1'), + TDStepsItemData(title: 'steps2', content: 'content2'), ]; /// 基本步骤1 @Demo(group: 'steps') @@ -115,7 +115,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: basicHStepsListData1, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 0, ), ) @@ -123,10 +123,10 @@ class _TDStepsPageState extends State { ), ); } - List basicHStepsListData2 = [ - StepsItemData(title: 'steps1', content: 'content1'), - StepsItemData(title: 'steps2', content: 'content2'), - StepsItemData(title: 'steps3', content: 'content3'), + List basicHStepsListData2 = [ + TDStepsItemData(title: 'steps1', content: 'content1'), + TDStepsItemData(title: 'steps2', content: 'content2'), + TDStepsItemData(title: 'steps3', content: 'content3'), ]; /// 基本步骤2 @Demo(group: 'steps') @@ -139,7 +139,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: basicHStepsListData2, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 1, ), ) @@ -147,17 +147,17 @@ class _TDStepsPageState extends State { ), ); } - List basicHStepsListData3 = [ - StepsItemData(title: 'steps1', content: 'content1'), - StepsItemData(title: 'steps2', content: 'content2'), - StepsItemData(title: 'steps3', content: 'content3'), - StepsItemData(title: 'steps4', content: 'content4'), + List basicHStepsListData3 = [ + TDStepsItemData(title: 'steps1', content: 'content1'), + TDStepsItemData(title: 'steps2', content: 'content2'), + TDStepsItemData(title: 'steps3', content: 'content3'), + TDStepsItemData(title: 'steps4', content: 'content4'), ]; - List basicStepsListData4 = [ - StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - StepsItemData(title: 'steps2', content: 'content2'), - StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), - StepsItemData(title: 'steps4', content: 'content4', successIcon: TDIcons.call), + List basicStepsListData4 = [ + TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'steps2', content: 'content2'), + TDStepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + TDStepsItemData(title: 'steps4', content: 'content4', successIcon: TDIcons.call), ]; /// 基本步骤3 @Demo(group: 'steps') @@ -170,7 +170,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: basicHStepsListData3, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 1, ), ) @@ -179,9 +179,9 @@ class _TDStepsPageState extends State { ); } - List hIconStepsListData1 = [ - StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + List hIconStepsListData1 = [ + TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), ]; /// 水平图标步骤条1 @Demo(group: 'steps') @@ -194,7 +194,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: hIconStepsListData1, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 0, ), ) @@ -203,10 +203,10 @@ class _TDStepsPageState extends State { ); } - List hIconStepsListData2 = [ - StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), - StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + List hIconStepsListData2 = [ + TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), ]; /// 水平图标步骤条1 @Demo(group: 'steps') @@ -219,7 +219,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: hIconStepsListData2, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 1, ), ) @@ -228,11 +228,11 @@ class _TDStepsPageState extends State { ); } - List hIconStepsListData3 = [ - StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), - StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), - StepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + List hIconStepsListData3 = [ + TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), ]; /// 水平图标步骤条1 @Demo(group: 'steps') @@ -245,7 +245,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: hIconStepsListData3, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 1, ), ) @@ -254,9 +254,9 @@ class _TDStepsPageState extends State { ); } - List simpleHStepsListData1 = [ - StepsItemData(title: 'steps1', content: 'content1'), - StepsItemData(title: 'steps2', content: 'content2'), + List simpleHStepsListData1 = [ + TDStepsItemData(title: 'steps1', content: 'content1'), + TDStepsItemData(title: 'steps2', content: 'content2'), ]; /// 水平简略步骤条1 @Demo(group: 'steps') @@ -269,7 +269,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: simpleHStepsListData1, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 0, simple: true, ), @@ -279,10 +279,10 @@ class _TDStepsPageState extends State { ); } - List simpleHStepsListData2 = [ - StepsItemData(title: 'steps1', content: 'content1'), - StepsItemData(title: 'steps2', content: 'content2'), - StepsItemData(title: 'steps3', content: 'content3'), + List simpleHStepsListData2 = [ + TDStepsItemData(title: 'steps1', content: 'content1'), + TDStepsItemData(title: 'steps2', content: 'content2'), + TDStepsItemData(title: 'steps3', content: 'content3'), ]; /// 水平简略步骤条2 @Demo(group: 'steps') @@ -295,7 +295,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: simpleHStepsListData2, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 1, simple: true, ), @@ -305,11 +305,11 @@ class _TDStepsPageState extends State { ); } - List simpleHStepsListData3 = [ - StepsItemData(title: 'steps1', content: 'content1'), - StepsItemData(title: 'steps2', content: 'content2'), - StepsItemData(title: 'steps3', content: 'content3'), - StepsItemData(title: 'steps3', content: 'content3'), + List simpleHStepsListData3 = [ + TDStepsItemData(title: 'steps1', content: 'content1'), + TDStepsItemData(title: 'steps2', content: 'content2'), + TDStepsItemData(title: 'steps3', content: 'content3'), + TDStepsItemData(title: 'steps3', content: 'content3'), ]; /// 水平简略步骤条3 @Demo(group: 'steps') @@ -322,7 +322,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: simpleHStepsListData3, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 1, simple: true, ), @@ -332,11 +332,11 @@ class _TDStepsPageState extends State { ); } - List hErrorStepsListData1 = [ - StepsItemData(title: 'steps1', content: 'content1'), - StepsItemData(title: 'Error', content: 'content2'), - StepsItemData(title: 'steps3', content: 'content3'), - StepsItemData(title: 'steps3', content: 'content3'), + List hErrorStepsListData1 = [ + TDStepsItemData(title: 'steps1', content: 'content1'), + TDStepsItemData(title: 'Error', content: 'content2'), + TDStepsItemData(title: 'steps3', content: 'content3'), + TDStepsItemData(title: 'steps3', content: 'content3'), ]; /// 水平简略步骤条3 @Demo(group: 'steps') @@ -349,9 +349,9 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: hErrorStepsListData1, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 1, - status: StepsStatus.error, + status: TDStepsStatus.error, ), ) ], @@ -359,11 +359,11 @@ class _TDStepsPageState extends State { ); } - List hErrorStepsListData2 = [ - StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - StepsItemData(title: 'Error', content: 'content2', successIcon: TDIcons.call, errorIcon: TDIcons.close_circle), - StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), - StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + List hErrorStepsListData2 = [ + TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'Error', content: 'content2', successIcon: TDIcons.call, errorIcon: TDIcons.close_circle), + TDStepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + TDStepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), ]; /// 水平简略步骤条3 @Demo(group: 'steps') @@ -376,9 +376,9 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: hErrorStepsListData2, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 1, - status: StepsStatus.error, + status: TDStepsStatus.error, ), ) ], @@ -386,11 +386,11 @@ class _TDStepsPageState extends State { ); } - List hErrorStepsListData3 = [ - StepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - StepsItemData(title: 'Error', content: 'content2', successIcon: TDIcons.call, errorIcon: TDIcons.close_circle), - StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), - StepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + List hErrorStepsListData3 = [ + TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'Error', content: 'content2', successIcon: TDIcons.call, errorIcon: TDIcons.close_circle), + TDStepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + TDStepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), ]; /// 水平简略步骤条3 @Demo(group: 'steps') @@ -403,9 +403,9 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: hErrorStepsListData3, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 1, - status: StepsStatus.error, + status: TDStepsStatus.error, simple: true, ), ) @@ -414,11 +414,11 @@ class _TDStepsPageState extends State { ); } - List vBasicStepsListData = [ - StepsItemData(title: 'Filish', content: 'Customize content'), - StepsItemData(title: 'Process', content: 'Customize content'), - StepsItemData(title: 'Default', content: 'Customize content'), - StepsItemData(title: 'Default', content: 'Customize content'), + List vBasicStepsListData = [ + TDStepsItemData(title: 'Filish', content: 'Customize content'), + TDStepsItemData(title: 'Process', content: 'Customize content'), + TDStepsItemData(title: 'Default', content: 'Customize content'), + TDStepsItemData(title: 'Default', content: 'Customize content'), ]; /// 垂直默认步骤条 @Demo(group: 'steps') @@ -431,7 +431,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: vBasicStepsListData, - direction: StatusDirection.vertical, + direction: TDStepsDirection.vertical, activeIndex: 1, ), ) @@ -440,11 +440,11 @@ class _TDStepsPageState extends State { ); } - List vIconStepsListData = [ - StepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), - StepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart), - StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), - StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + List vIconStepsListData = [ + TDStepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), + TDStepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart), + TDStepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + TDStepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), ]; /// 垂直图标步骤条 @Demo(group: 'steps') @@ -457,7 +457,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: vIconStepsListData, - direction: StatusDirection.vertical, + direction: TDStepsDirection.vertical, activeIndex: 1, ), ) @@ -466,11 +466,11 @@ class _TDStepsPageState extends State { ); } - List vSimpleStepsListData = [ - StepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), - StepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart), - StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), - StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + List vSimpleStepsListData = [ + TDStepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), + TDStepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart), + TDStepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + TDStepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), ]; /// 垂直简略步骤条 @Demo(group: 'steps') @@ -483,7 +483,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: vSimpleStepsListData, - direction: StatusDirection.vertical, + direction: TDStepsDirection.vertical, activeIndex: 1, simple: true, ), @@ -493,11 +493,11 @@ class _TDStepsPageState extends State { ); } - List vErrorBasicStepsListData = [ - StepsItemData(title: 'Filish', content: 'Customize content'), - StepsItemData(title: 'Process', content: 'Customize content'), - StepsItemData(title: 'Default', content: 'Customize content'), - StepsItemData(title: 'Default', content: 'Customize content'), + List vErrorBasicStepsListData = [ + TDStepsItemData(title: 'Filish', content: 'Customize content'), + TDStepsItemData(title: 'Process', content: 'Customize content'), + TDStepsItemData(title: 'Default', content: 'Customize content'), + TDStepsItemData(title: 'Default', content: 'Customize content'), ]; /// 垂直错误状态基本步骤条 @Demo(group: 'steps') @@ -510,9 +510,9 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: vErrorBasicStepsListData, - direction: StatusDirection.vertical, + direction: TDStepsDirection.vertical, activeIndex: 1, - status: StepsStatus.error, + status: TDStepsStatus.error, ), ) ], @@ -520,11 +520,11 @@ class _TDStepsPageState extends State { ); } - List vErrorIconStepsListData = [ - StepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), - StepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart, errorIcon: TDIcons.close_circle), - StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), - StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + List vErrorIconStepsListData = [ + TDStepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), + TDStepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart, errorIcon: TDIcons.close_circle), + TDStepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + TDStepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), ]; /// 垂直错误状态图标步骤条 @Demo(group: 'steps') @@ -537,9 +537,9 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: vErrorIconStepsListData, - direction: StatusDirection.vertical, + direction: TDStepsDirection.vertical, activeIndex: 1, - status: StepsStatus.error, + status: TDStepsStatus.error, ), ) ], @@ -547,11 +547,11 @@ class _TDStepsPageState extends State { ); } - List vErrorSimpleStepsListData = [ - StepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), - StepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart), - StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), - StepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + List vErrorSimpleStepsListData = [ + TDStepsItemData(title: 'Filish', content: 'Customize content', successIcon: TDIcons.cart), + TDStepsItemData(title: 'Process', content: 'Customize content', successIcon: TDIcons.cart), + TDStepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), + TDStepsItemData(title: 'Default', content: 'Customize content', successIcon: TDIcons.cart), ]; /// 垂直错误状态图标步骤条 @Demo(group: 'steps') @@ -564,10 +564,10 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: vErrorSimpleStepsListData, - direction: StatusDirection.vertical, + direction: TDStepsDirection.vertical, activeIndex: 1, simple: true, - status: StepsStatus.error, + status: TDStepsStatus.error, ), ) ], @@ -575,14 +575,14 @@ class _TDStepsPageState extends State { ); } - List vCustomContentBasicStepsListData = [ - StepsItemData(title: 'Filish', content: 'Customize content'), - StepsItemData(title: 'Process', content: 'Customize content', customContent: const TDImage( + List vCustomContentBasicStepsListData = [ + TDStepsItemData(title: 'Filish', content: 'Customize content'), + TDStepsItemData(title: 'Process', content: 'Customize content', customContent: const TDImage( assetUrl: 'assets/img/image.png', type: TDImageType.square, )), - StepsItemData(title: 'Default', content: 'Customize content'), - StepsItemData(title: 'Default', content: 'Customize content'), + TDStepsItemData(title: 'Default', content: 'Customize content'), + TDStepsItemData(title: 'Default', content: 'Customize content'), ]; /// 垂直自定义内容基本步骤条 @Demo(group: 'steps') @@ -595,7 +595,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: vCustomContentBasicStepsListData, - direction: StatusDirection.vertical, + direction: TDStepsDirection.vertical, activeIndex: 1, ), ) @@ -604,11 +604,11 @@ class _TDStepsPageState extends State { ); } - List hReadOnlyStepsListData = [ - StepsItemData(title: 'Filish', content: 'content'), - StepsItemData(title: 'Process', content: 'content'), - StepsItemData(title: 'Default', content: 'content'), - StepsItemData(title: 'Default', content: 'content'), + List hReadOnlyStepsListData = [ + TDStepsItemData(title: 'Filish', content: 'content'), + TDStepsItemData(title: 'Process', content: 'content'), + TDStepsItemData(title: 'Default', content: 'content'), + TDStepsItemData(title: 'Default', content: 'content'), ]; /// 水平自定义内容基本步骤条 @Demo(group: 'steps') @@ -621,7 +621,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: hReadOnlyStepsListData, - direction: StatusDirection.horizontal, + direction: TDStepsDirection.horizontal, activeIndex: 0, readOnly: true, ), @@ -632,11 +632,11 @@ class _TDStepsPageState extends State { } - List vReadOnlyStepsListData = [ - StepsItemData(title: 'Filish', content: 'Customize content'), - StepsItemData(title: 'Process', content: 'Customize content'), - StepsItemData(title: 'Default', content: 'Customize content'), - StepsItemData(title: 'Default', content: 'Customize content'), + List vReadOnlyStepsListData = [ + TDStepsItemData(title: 'Filish', content: 'Customize content'), + TDStepsItemData(title: 'Process', content: 'Customize content'), + TDStepsItemData(title: 'Default', content: 'Customize content'), + TDStepsItemData(title: 'Default', content: 'Customize content'), ]; /// 垂直自定义内容基本步骤条 @Demo(group: 'steps') @@ -649,7 +649,7 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: vReadOnlyStepsListData, - direction: StatusDirection.vertical, + direction: TDStepsDirection.vertical, activeIndex: 0, readOnly: true, ), diff --git a/tdesign-component/lib/src/components/steps/td_steps.dart b/tdesign-component/lib/src/components/steps/td_steps.dart index 15d63de40..198c79857 100644 --- a/tdesign-component/lib/src/components/steps/td_steps.dart +++ b/tdesign-component/lib/src/components/steps/td_steps.dart @@ -4,7 +4,7 @@ import 'package:tdesign_flutter/src/components/steps/td_steps_vertical.dart'; import '../../../tdesign_flutter.dart'; /// Steps步骤条数据类型 -class StepsItemData { +class TDStepsItemData { final String title; final String content; @@ -13,7 +13,7 @@ class StepsItemData { final Widget? customContent; - StepsItemData({ + TDStepsItemData({ required this.title, required this.content, this.successIcon, @@ -23,31 +23,31 @@ class StepsItemData { } /// Steps步骤条方向 -enum StatusDirection { - vertical, +enum TDStepsDirection { horizontal, + vertical, } /// steps步骤条状态 -enum StepsStatus { +enum TDStepsStatus { success, error, } /// Steps步骤条 class TDSteps extends StatefulWidget { - final List steps; - final StatusDirection direction; + final List steps; + final TDStepsDirection direction; final int activeIndex; - final StepsStatus status; + final TDStepsStatus status; final bool simple; final bool readOnly; const TDSteps({ super.key, required this.steps, required this.activeIndex, - this.direction = StatusDirection.horizontal, - this.status = StepsStatus.success, + this.direction = TDStepsDirection.horizontal, + this.status = TDStepsStatus.success, this.simple = false, this.readOnly = false, }); @@ -62,7 +62,7 @@ class _TDStepsState extends State { /// 当前激活的step索引 final currentActiveIndex = widget.activeIndex < 0 ? 0 : (widget.activeIndex >= widget.steps.length ? widget.steps.length - 1 : widget.activeIndex); - return widget.direction == StatusDirection.horizontal ? + return widget.direction == TDStepsDirection.horizontal ? TDStepsHorizontal( steps: widget.steps, activeIndex: currentActiveIndex, diff --git a/tdesign-component/lib/src/components/steps/td_steps_horizontal.dart b/tdesign-component/lib/src/components/steps/td_steps_horizontal.dart index a55b2c492..442f76a92 100644 --- a/tdesign-component/lib/src/components/steps/td_steps_horizontal.dart +++ b/tdesign-component/lib/src/components/steps/td_steps_horizontal.dart @@ -4,9 +4,9 @@ import '../../../tdesign_flutter.dart'; /// Steps步骤条,水平步骤 class TDStepsHorizontal extends StatelessWidget { - final List steps; + final List steps; final int activeIndex; - final StepsStatus status; + final TDStepsStatus status; final bool simple; final bool readOnly; const TDStepsHorizontal({ 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 39016d452..5fc931b3a 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 @@ -3,11 +3,11 @@ import '../../../tdesign_flutter.dart'; /// Steps步骤条,水平步骤item class TDStepsHorizontalItem extends StatelessWidget { - final StepsItemData data; + final TDStepsItemData data; final int index; final int stepsCount; final int activeIndex; - final StepsStatus status; + final TDStepsStatus status; final bool simple; final bool readOnly; const TDStepsHorizontalItem({ @@ -80,7 +80,7 @@ class TDStepsHorizontalItem extends StatelessWidget { } /// 状态是错误状态,激活索引是当前索引,只有当前激活索引才需要显示 - if (status == StepsStatus.error && activeIndex == index) { + if (status == TDStepsStatus.error && activeIndex == index) { /// 显示错误颜色 stepsNumberBgColor = TDTheme.of(context).errorColor1; stepsTitleColor = TDTheme.of(context).errorColor6; diff --git a/tdesign-component/lib/src/components/steps/td_steps_vertical.dart b/tdesign-component/lib/src/components/steps/td_steps_vertical.dart index c2a609550..1d4abebc6 100644 --- a/tdesign-component/lib/src/components/steps/td_steps_vertical.dart +++ b/tdesign-component/lib/src/components/steps/td_steps_vertical.dart @@ -4,9 +4,9 @@ import '../../../tdesign_flutter.dart'; /// Steps步骤条,垂直步骤 class TDStepsVertical extends StatelessWidget { - final List steps; + final List steps; final int activeIndex; - final StepsStatus status; + final TDStepsStatus status; final bool simple; final bool readOnly; const TDStepsVertical({ 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 2c63581e6..851a6cd4a 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 @@ -3,11 +3,11 @@ import '../../../tdesign_flutter.dart'; /// Steps步骤条,垂直步骤item class TDStepsVerticalItem extends StatelessWidget { - final StepsItemData data; + final TDStepsItemData data; final int index; final int stepsCount; final int activeIndex; - final StepsStatus status; + final TDStepsStatus status; final bool simple; final bool readOnly; const TDStepsVerticalItem({ @@ -80,7 +80,7 @@ class TDStepsVerticalItem extends StatelessWidget { } /// 状态是错误状态,激活索引是当前索引,只有当前激活索引才需要显示 - if (status == StepsStatus.error && activeIndex == index) { + if (status == TDStepsStatus.error && activeIndex == index) { /// 显示错误颜色 stepsNumberBgColor = TDTheme.of(context).errorColor1; stepsTitleColor = TDTheme.of(context).errorColor6; From b5b6a58e376d0c9f3defad75173703a339c0e848 Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sun, 23 Jun 2024 18:44:13 +0800 Subject: [PATCH 07/13] docs(feature/steps): add steps docs. --- .../example/assets/api/steps_api.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 tdesign-component/example/assets/api/steps_api.md diff --git a/tdesign-component/example/assets/api/steps_api.md b/tdesign-component/example/assets/api/steps_api.md new file mode 100644 index 000000000..985d6c88a --- /dev/null +++ b/tdesign-component/example/assets/api/steps_api.md @@ -0,0 +1,16 @@ +## API +### TDSteps +#### 默认构造方法 + +| 参数 | 类型 | 默认值 | 是否必填 | 说明 | +| --- | --- | --- | --- | --- | +| key | | - | | | +| steps | TDStepsItemData | - | 是 | 步骤条数据 | +| activeIndex | int | - | 是 | 当前激活步骤的索引 | +| direction | TDStepsDirection.horizontal/TDStepsDirection.vertical | - | 是 | 步骤条方向 | +| status | TDStepsStatus.success/TDStepsStatus.error | TDStepsStatus.success | 否 | 步骤条状态 | +| simple | bool | false | 否 | 是否简略模式 | +| readOnly | bool | false | 否 | 是否纯展示readOnly模式 | + + + From 16a0658a2ce520e274528a1d9593c35992f2728e Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sat, 29 Jun 2024 20:49:09 +0800 Subject: [PATCH 08/13] docs(feature/steps): refactor steps docs. --- tdesign-component/example/assets/api/steps_api.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/tdesign-component/example/assets/api/steps_api.md b/tdesign-component/example/assets/api/steps_api.md index 985d6c88a..a95825e7c 100644 --- a/tdesign-component/example/assets/api/steps_api.md +++ b/tdesign-component/example/assets/api/steps_api.md @@ -3,11 +3,10 @@ #### 默认构造方法 | 参数 | 类型 | 默认值 | 是否必填 | 说明 | -| --- | --- | --- | --- | --- | -| key | | - | | | +| --- | --- | --- | -- | --- | | steps | TDStepsItemData | - | 是 | 步骤条数据 | -| activeIndex | int | - | 是 | 当前激活步骤的索引 | -| direction | TDStepsDirection.horizontal/TDStepsDirection.vertical | - | 是 | 步骤条方向 | +| activeIndex | int | 0 | 否 | 当前激活步骤的索引 | +| direction | TDStepsDirection.horizontal/TDStepsDirection.vertical | TDStepsDirection.horizontal | 否 | 步骤条方向 | | status | TDStepsStatus.success/TDStepsStatus.error | TDStepsStatus.success | 否 | 步骤条状态 | | simple | bool | false | 否 | 是否简略模式 | | readOnly | bool | false | 否 | 是否纯展示readOnly模式 | From d4cd1a4c859f9f6c38c511462da872fa5103642a Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sat, 29 Jun 2024 20:49:48 +0800 Subject: [PATCH 09/13] refactor(feature/steps): refactor steps default value. --- tdesign-component/lib/src/components/steps/td_steps.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tdesign-component/lib/src/components/steps/td_steps.dart b/tdesign-component/lib/src/components/steps/td_steps.dart index 198c79857..bb647f248 100644 --- a/tdesign-component/lib/src/components/steps/td_steps.dart +++ b/tdesign-component/lib/src/components/steps/td_steps.dart @@ -45,7 +45,7 @@ class TDSteps extends StatefulWidget { const TDSteps({ super.key, required this.steps, - required this.activeIndex, + this.activeIndex = 0, this.direction = TDStepsDirection.horizontal, this.status = TDStepsStatus.success, this.simple = false, From edde3f800878b5c0ec309162670f323c459993c4 Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sat, 29 Jun 2024 20:52:44 +0800 Subject: [PATCH 10/13] refactor(feature/steps): refactor steps example. --- tdesign-component/example/lib/page/td_steps_page.dart | 4 ---- 1 file changed, 4 deletions(-) diff --git a/tdesign-component/example/lib/page/td_steps_page.dart b/tdesign-component/example/lib/page/td_steps_page.dart index 3aedd18d4..cbbd3b0ee 100644 --- a/tdesign-component/example/lib/page/td_steps_page.dart +++ b/tdesign-component/example/lib/page/td_steps_page.dart @@ -115,8 +115,6 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: basicHStepsListData1, - direction: TDStepsDirection.horizontal, - activeIndex: 0, ), ) ], @@ -621,8 +619,6 @@ class _TDStepsPageState extends State { flex: 1, child: TDSteps( steps: hReadOnlyStepsListData, - direction: TDStepsDirection.horizontal, - activeIndex: 0, readOnly: true, ), ) From 52cc650fe33a110b28b0ad6c14e895e38c5149f8 Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sat, 29 Jun 2024 21:59:23 +0800 Subject: [PATCH 11/13] refactor(feature/steps): refactor and set vertical steps auto height. --- .../steps/td_steps_vertical_item.dart | 90 +++++++++---------- 1 file changed, 45 insertions(+), 45 deletions(-) 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 851a6cd4a..945f2b86f 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 @@ -141,15 +141,15 @@ class TDStepsVerticalItem extends StatelessWidget { return Container( margin: const EdgeInsets.only(bottom: 8), - child: Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - margin: const EdgeInsets.only(right: 8), - width: 22, - child: IntrinsicHeight( - child: ConstrainedBox( + child: IntrinsicHeight( + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + margin: const EdgeInsets.only(right: 8), + width: 22, + child: ConstrainedBox( constraints: const BoxConstraints(minHeight: 62), child: Column( mainAxisAlignment: MainAxisAlignment.start, @@ -177,45 +177,45 @@ class TDStepsVerticalItem extends StatelessWidget { ), ), ), - ), - Expanded( - flex: 1, - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - height: 22, - margin: const EdgeInsets.only(bottom: 4), - child: TDText( - data.title, - style: TextStyle( - fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400, - color: stepsTitleColor, - fontSize: 14, - height: 1.4, - ), - ), - ), - Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - TDText( - data.content, + Expanded( + flex: 1, + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + height: 22, + margin: const EdgeInsets.only(bottom: 4), + child: TDText( + data.title, style: TextStyle( - fontWeight: FontWeight.w400, - color: TDTheme.of(context).fontGyColor3, - fontSize: 12, + fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400, + color: stepsTitleColor, + fontSize: 14, + height: 1.4, ), ), - customContent, - ] - ), - ], - ), - ) - ], + ), + Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TDText( + data.content, + style: TextStyle( + fontWeight: FontWeight.w400, + color: TDTheme.of(context).fontGyColor3, + fontSize: 12, + ), + ), + customContent, + ] + ), + ], + ), + ) + ], + ), ), ); } From d051fc6c81317d311feec9dc5a24e47849acc25c Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sat, 6 Jul 2024 16:13:48 +0800 Subject: [PATCH 12/13] refactor(feature/steps): refactor and add verticalSelect mode. --- .../example/lib/page/td_steps_page.dart | 131 +++++++++++------- .../lib/src/components/steps/td_steps.dart | 11 ++ .../components/steps/td_steps_vertical.dart | 3 + .../steps/td_steps_vertical_item.dart | 34 +++-- 4 files changed, 121 insertions(+), 58 deletions(-) diff --git a/tdesign-component/example/lib/page/td_steps_page.dart b/tdesign-component/example/lib/page/td_steps_page.dart index cbbd3b0ee..a9497d557 100644 --- a/tdesign-component/example/lib/page/td_steps_page.dart +++ b/tdesign-component/example/lib/page/td_steps_page.dart @@ -18,7 +18,7 @@ class _TDStepsPageState extends State { backgroundColor: TDTheme.of(context).whiteColor1, title: tdTitle(), exampleCodeGroup: 'steps', - desc: 'steps步骤条', + desc: 'Steps步骤条', children: [ ExampleModule(title: '水平默认步骤条', children: [ ExampleItem( @@ -95,14 +95,17 @@ class _TDStepsPageState extends State { ExampleItem( desc: 'Read-only Steps 纯展示垂直步骤条', builder: _buildVReadOnlySteps), + ExampleItem( + desc: 'Vertical Customize Steps 垂直自定义步骤条', + builder: _buildVCustomizeSteps), ]), ], ); } List basicHStepsListData1 = [ - TDStepsItemData(title: 'steps1', content: 'content1'), - TDStepsItemData(title: 'steps2', content: 'content2'), + TDStepsItemData(title: 'Steps1', content: 'Content1'), + TDStepsItemData(title: 'Steps2', content: 'Content2'), ]; /// 基本步骤1 @Demo(group: 'steps') @@ -122,9 +125,9 @@ class _TDStepsPageState extends State { ); } List basicHStepsListData2 = [ - TDStepsItemData(title: 'steps1', content: 'content1'), - TDStepsItemData(title: 'steps2', content: 'content2'), - TDStepsItemData(title: 'steps3', content: 'content3'), + TDStepsItemData(title: 'Steps1', content: 'Content1'), + TDStepsItemData(title: 'Steps2', content: 'Content2'), + TDStepsItemData(title: 'Steps3', content: 'Content3'), ]; /// 基本步骤2 @Demo(group: 'steps') @@ -146,16 +149,16 @@ class _TDStepsPageState extends State { ); } List basicHStepsListData3 = [ - TDStepsItemData(title: 'steps1', content: 'content1'), - TDStepsItemData(title: 'steps2', content: 'content2'), - TDStepsItemData(title: 'steps3', content: 'content3'), - TDStepsItemData(title: 'steps4', content: 'content4'), + TDStepsItemData(title: 'Steps1', content: 'Content1'), + TDStepsItemData(title: 'Steps2', content: 'Content2'), + TDStepsItemData(title: 'Steps3', content: 'Content3'), + TDStepsItemData(title: 'Steps4', content: 'Content4'), ]; List basicStepsListData4 = [ - TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - TDStepsItemData(title: 'steps2', content: 'content2'), - TDStepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), - TDStepsItemData(title: 'steps4', content: 'content4', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps1', content: 'Content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps2', content: 'Content2'), + TDStepsItemData(title: 'Steps3', content: 'Content3', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps4', content: 'Content4', successIcon: TDIcons.call), ]; /// 基本步骤3 @Demo(group: 'steps') @@ -178,8 +181,8 @@ class _TDStepsPageState extends State { } List hIconStepsListData1 = [ - TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps1', content: 'Content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps2', content: 'Content2', successIcon: TDIcons.call), ]; /// 水平图标步骤条1 @Demo(group: 'steps') @@ -202,9 +205,9 @@ class _TDStepsPageState extends State { } List hIconStepsListData2 = [ - TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), - TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps1', content: 'Content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps2', content: 'Content2', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps3', content: 'Content3', successIcon: TDIcons.call), ]; /// 水平图标步骤条1 @Demo(group: 'steps') @@ -227,10 +230,10 @@ class _TDStepsPageState extends State { } List hIconStepsListData3 = [ - TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), - TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), - TDStepsItemData(title: 'steps2', content: 'content2', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps1', content: 'Content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps2', content: 'Content2', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps3', content: 'Content3', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps4', content: 'Content4', successIcon: TDIcons.call), ]; /// 水平图标步骤条1 @Demo(group: 'steps') @@ -253,8 +256,8 @@ class _TDStepsPageState extends State { } List simpleHStepsListData1 = [ - TDStepsItemData(title: 'steps1', content: 'content1'), - TDStepsItemData(title: 'steps2', content: 'content2'), + TDStepsItemData(title: 'Steps1', content: 'Content1'), + TDStepsItemData(title: 'Steps2', content: 'Content2'), ]; /// 水平简略步骤条1 @Demo(group: 'steps') @@ -278,9 +281,9 @@ class _TDStepsPageState extends State { } List simpleHStepsListData2 = [ - TDStepsItemData(title: 'steps1', content: 'content1'), - TDStepsItemData(title: 'steps2', content: 'content2'), - TDStepsItemData(title: 'steps3', content: 'content3'), + TDStepsItemData(title: 'Steps1', content: 'Content1'), + TDStepsItemData(title: 'Steps2', content: 'Content2'), + TDStepsItemData(title: 'Steps3', content: 'Content3'), ]; /// 水平简略步骤条2 @Demo(group: 'steps') @@ -304,10 +307,10 @@ class _TDStepsPageState extends State { } List simpleHStepsListData3 = [ - TDStepsItemData(title: 'steps1', content: 'content1'), - TDStepsItemData(title: 'steps2', content: 'content2'), - TDStepsItemData(title: 'steps3', content: 'content3'), - TDStepsItemData(title: 'steps3', content: 'content3'), + TDStepsItemData(title: 'Steps1', content: 'Content1'), + TDStepsItemData(title: 'Steps2', content: 'Content2'), + TDStepsItemData(title: 'Steps3', content: 'Content3'), + TDStepsItemData(title: 'Steps4', content: 'Content4'), ]; /// 水平简略步骤条3 @Demo(group: 'steps') @@ -331,10 +334,10 @@ class _TDStepsPageState extends State { } List hErrorStepsListData1 = [ - TDStepsItemData(title: 'steps1', content: 'content1'), - TDStepsItemData(title: 'Error', content: 'content2'), - TDStepsItemData(title: 'steps3', content: 'content3'), - TDStepsItemData(title: 'steps3', content: 'content3'), + TDStepsItemData(title: 'Steps1', content: 'Content1'), + TDStepsItemData(title: 'Error', content: 'Content2'), + TDStepsItemData(title: 'Steps3', content: 'Content3'), + TDStepsItemData(title: 'Steps4', content: 'Content4'), ]; /// 水平简略步骤条3 @Demo(group: 'steps') @@ -358,10 +361,10 @@ class _TDStepsPageState extends State { } List hErrorStepsListData2 = [ - TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - TDStepsItemData(title: 'Error', content: 'content2', successIcon: TDIcons.call, errorIcon: TDIcons.close_circle), - TDStepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), - TDStepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps1', content: 'Content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'Error', content: 'Content2', successIcon: TDIcons.call, errorIcon: TDIcons.close_circle), + TDStepsItemData(title: 'Steps3', content: 'Content3', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps4', content: 'Content4', successIcon: TDIcons.call), ]; /// 水平简略步骤条3 @Demo(group: 'steps') @@ -385,10 +388,10 @@ class _TDStepsPageState extends State { } List hErrorStepsListData3 = [ - TDStepsItemData(title: 'steps1', content: 'content1', successIcon: TDIcons.call), - TDStepsItemData(title: 'Error', content: 'content2', successIcon: TDIcons.call, errorIcon: TDIcons.close_circle), - TDStepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), - TDStepsItemData(title: 'steps3', content: 'content3', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps1', content: 'Content1', successIcon: TDIcons.call), + TDStepsItemData(title: 'Error', content: 'Content2', successIcon: TDIcons.call, errorIcon: TDIcons.close_circle), + TDStepsItemData(title: 'Steps3', content: 'Content3', successIcon: TDIcons.call), + TDStepsItemData(title: 'Steps4', content: 'Content4', successIcon: TDIcons.call), ]; /// 水平简略步骤条3 @Demo(group: 'steps') @@ -575,9 +578,15 @@ class _TDStepsPageState extends State { List vCustomContentBasicStepsListData = [ TDStepsItemData(title: 'Filish', content: 'Customize content'), - TDStepsItemData(title: 'Process', content: 'Customize content', customContent: const TDImage( - assetUrl: 'assets/img/image.png', - type: TDImageType.square, + TDStepsItemData(title: 'Process', content: 'Customize content', customContent: Container( + margin: const EdgeInsets.only(bottom: 16, top: 4), + child: ClipRRect( + borderRadius: BorderRadius.circular(6), + child: const TDImage( + assetUrl: 'assets/img/image.png', + type: TDImageType.square, + ), + ), )), TDStepsItemData(title: 'Default', content: 'Customize content'), TDStepsItemData(title: 'Default', content: 'Customize content'), @@ -655,4 +664,32 @@ class _TDStepsPageState extends State { ); } + List vCustomizeStepsListData = [ + TDStepsItemData(title: 'Selected', content: ''), + TDStepsItemData(title: 'Selected', content: ''), + TDStepsItemData(title: 'Selected', content: ''), + TDStepsItemData(title: 'Please Selected', content: ''), + ]; + /// Vertical Customize Steps 垂直自定义步骤条 + @Demo(group: 'steps') + Widget _buildVCustomizeSteps(BuildContext context){ + return Padding( + padding: const EdgeInsets.only(left: 16, right: 16), + child: Row( + children: [ + Expanded( + flex: 1, + child: TDSteps( + steps: vCustomizeStepsListData, + direction: TDStepsDirection.vertical, + simple: true, + activeIndex: 3, + verticalSelect: true, + ), + ) + ], + ), + ); + } + } diff --git a/tdesign-component/lib/src/components/steps/td_steps.dart b/tdesign-component/lib/src/components/steps/td_steps.dart index bb647f248..b26f0031b 100644 --- a/tdesign-component/lib/src/components/steps/td_steps.dart +++ b/tdesign-component/lib/src/components/steps/td_steps.dart @@ -36,12 +36,21 @@ enum TDStepsStatus { /// Steps步骤条 class TDSteps extends StatefulWidget { + /// 步骤条数据 final List steps; + /// 步骤条方向 final TDStepsDirection direction; + /// 步骤条当前激活的索引 final int activeIndex; + /// 步骤条状态 final TDStepsStatus status; + /// 步骤条simple模式 final bool simple; + /// 步骤条readOnly模式 final bool readOnly; + /// 步骤条垂直自定义步骤条选择模式 + final bool verticalSelect; + const TDSteps({ super.key, required this.steps, @@ -50,6 +59,7 @@ class TDSteps extends StatefulWidget { this.status = TDStepsStatus.success, this.simple = false, this.readOnly = false, + this.verticalSelect = false, }); @override @@ -76,6 +86,7 @@ class _TDStepsState extends State { status: widget.status, simple: widget.simple, readOnly: widget.readOnly, + verticalSelect: widget.verticalSelect, ); } diff --git a/tdesign-component/lib/src/components/steps/td_steps_vertical.dart b/tdesign-component/lib/src/components/steps/td_steps_vertical.dart index 1d4abebc6..6bcb4618b 100644 --- a/tdesign-component/lib/src/components/steps/td_steps_vertical.dart +++ b/tdesign-component/lib/src/components/steps/td_steps_vertical.dart @@ -9,6 +9,7 @@ class TDStepsVertical extends StatelessWidget { final TDStepsStatus status; final bool simple; final bool readOnly; + final bool verticalSelect; const TDStepsVertical({ super.key, required this.steps, @@ -16,6 +17,7 @@ class TDStepsVertical extends StatelessWidget { required this.status, required this.simple, required this.readOnly, + required this.verticalSelect, }); @override @@ -30,6 +32,7 @@ class TDStepsVertical extends StatelessWidget { status: status, simple: simple, readOnly: readOnly, + verticalSelect: verticalSelect, ); }).toList(); 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 945f2b86f..4b213ffa4 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 @@ -10,6 +10,7 @@ class TDStepsVerticalItem extends StatelessWidget { final TDStepsStatus status; final bool simple; final bool readOnly; + final bool verticalSelect; const TDStepsVerticalItem({ super.key, required this.data, @@ -19,6 +20,7 @@ class TDStepsVerticalItem extends StatelessWidget { required this.status, required this.simple, required this.readOnly, + required this.verticalSelect, }); @override @@ -97,15 +99,18 @@ class TDStepsVerticalItem extends StatelessWidget { } /// 步骤条icon图标背景和形状 - BoxDecoration? iconWidgetDecoration = shouldSetIconWidgetDecoration ? BoxDecoration( + var iconWidgetDecoration = shouldSetIconWidgetDecoration ? BoxDecoration( color: stepsNumberBgColor, shape: BoxShape.circle, ): null; - // icon组件容器大小 + /// icon组件容器大小 double iconContainerSize = 22; + /// icon组件容器margin + double iconMarginBottom = 8; + /// 简略步骤条 if (simple || readOnly) { /// readOnly纯展示 @@ -114,6 +119,7 @@ class TDStepsVerticalItem extends StatelessWidget { stepsTitleColor = TDTheme.of(context).fontGyColor1; } iconContainerSize = 8; + iconMarginBottom = 4; stepsIconWidget = null; /// 简略步骤条BoxDecoration var simpleDecoration = BoxDecoration( @@ -158,7 +164,7 @@ class TDStepsVerticalItem extends StatelessWidget { width: iconContainerSize, height: 22, alignment: Alignment.center, - margin: const EdgeInsets.only(bottom: 8), + margin: EdgeInsets.only(bottom: iconMarginBottom), decoration: iconWidgetDecoration, child: stepsIconWidget, ), @@ -186,14 +192,20 @@ class TDStepsVerticalItem extends StatelessWidget { Container( height: 22, margin: const EdgeInsets.only(bottom: 4), - child: TDText( - data.title, - style: TextStyle( - fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400, - color: stepsTitleColor, - fontSize: 14, - height: 1.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(), + ], ), ), Column( From 0478448742df19b660f21ec2bdc7364e56ee2b7d Mon Sep 17 00:00:00 2001 From: aaronmhl <297546700@qq.com> Date: Sat, 6 Jul 2024 16:14:16 +0800 Subject: [PATCH 13/13] docs(feature/steps): update docs support verticalSelect. --- tdesign-component/example/assets/api/steps_api.md | 1 + 1 file changed, 1 insertion(+) diff --git a/tdesign-component/example/assets/api/steps_api.md b/tdesign-component/example/assets/api/steps_api.md index a95825e7c..9e9700714 100644 --- a/tdesign-component/example/assets/api/steps_api.md +++ b/tdesign-component/example/assets/api/steps_api.md @@ -10,6 +10,7 @@ | status | TDStepsStatus.success/TDStepsStatus.error | TDStepsStatus.success | 否 | 步骤条状态 | | simple | bool | false | 否 | 是否简略模式 | | readOnly | bool | false | 否 | 是否纯展示readOnly模式 | +| verticalSelect | bool | false | 否 | 是否是垂直自定义步骤条选择模式 |