Feat(step): Update TDesign step components

tdesign-component/example/assets/api/steps_api.md

@@ -2,13 +2,13 @@
 ### TDStepsItemData
 #### 默认构造方法
 
-| 参数 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| title | String | - | 标题 |
-| content | String | - | 内容 |
+| 参数 | 类型        | 默认值 | 说明 |
+| --- |-----------| --- | --- |
+| title | String?   | - | 标题 |
+| content | String?   | - | 内容 |
 | successIcon | IconData? | - | 成功图标 |
 | errorIcon | IconData? | - | 失败图标 |
-| customContent | Widget? | - | 自定义内容 |
+| customContent | Widget?   | - | 自定义内容 |
 
 ```
 ```

tdesign-component/example/lib/component_test/step_test.dart

@@ -0,0 +1,94 @@
+import 'package:flutter/material.dart';
+import 'package:tdesign_flutter/tdesign_flutter.dart';
+
+void main() async {
+  runApp(StepTestApp());
+}
+
+class StepTestApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Step Test',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: TestPage(),
+    );
+  }
+}
+
+class TestPage extends StatelessWidget {
+  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
+
+  @override
+  Widget build(BuildContext context) {
+    // 创建水平步骤条的数据
+    List<TDStepsItemData> horizontalSteps = [
+      TDStepsItemData(title: 'Step 1', content: 'Horizontal Step 1'),
+      TDStepsItemData(title: 'Step 2', content: 'Horizontal Step 2'),
+      TDStepsItemData(title: 'Step 3', content: 'Horizontal Step 3'),
+    ];
+
+    // 创建垂直步骤条的数据
+    List<TDStepsItemData> verticalSteps = [
+      TDStepsItemData(
+        title: '2025-01-11',
+        content: '今天是星期六',
+        customContent: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            TDText(
+              '今天是星期六，下面是拍摄的照片',
+              style: TextStyle(
+                fontWeight: FontWeight.w400,
+                color: TDTheme.of(context).fontGyColor3,
+                fontSize: 12,
+              ),
+            ),
+            Image.asset('assets/img/image.png', width: 100, height: 100),
+          ],
+        ),
+      ),
+      TDStepsItemData(title: '2025-01-12', content: '今天是星期天'),
+      TDStepsItemData(content: '今天是星期一'),
+    ];
+
+    return Scaffold(
+      appBar: AppBar(
+        title: TDText('TDSteps Test Page'),
+      ),
+      body: Form(
+        key: _formKey,
+        child: Column(
+          children: [
+            // 水平步骤条
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: TDSteps(
+                  steps: horizontalSteps,
+                  activeIndex: 1, // 设置当前激活的步骤索引
+                  direction: TDStepsDirection.horizontal, // 设置步骤条方向为水平
+                  status: TDStepsStatus.success, // 设置步骤条状态
+                ),
+              ),
+            ),
+            // 垂直步骤条
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: TDSteps(
+                  steps: verticalSteps,
+                  activeIndex: 1, // 设置当前激活的步骤索引
+                  direction: TDStepsDirection.vertical, // 设置步骤条方向为垂直
+                  status: TDStepsStatus.success, // 设置步骤条状态
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

tdesign-component/example/pubspec.yaml

@@ -30,6 +30,7 @@
 dependencies:
   flutter:
     sdk: flutter
+  web: ^0.3.0
 
   #轮播图组件
   flutter_swiper_null_safety: ^1.0.2
@@ -116,7 +117,7 @@
   compileTarget: frontend_server, dart2js
   versions:
     negativeInfinity~3.0.0:
       unsupportTips: 请在Flutter 3.+ 运行心悦工程
     3.0.0~infinity:
       path: ./tdesign_flutter_generator
-  saveDartDependencies: true
+  saveDartDependencies: true

tdesign-component/lib/src/components/steps/td_steps.dart

@@ -7,18 +7,20 @@ import '../../../tdesign_flutter.dart';
 class TDStepsItemData {
 
   TDStepsItemData({
-    required this.title,
-    required this.content,
+    this.title,
+    this.content,
     this.successIcon,
     this.errorIcon,
     this.customContent,
-  });
+  }) {
+    _validate();
+  }
 
   /// 标题
-  final String title;
+  final String? title;
 
   /// 内容
-  final String content;
+  final String? content;
 
   /// 成功图标
   final IconData? successIcon;
@@ -28,6 +30,13 @@ class TDStepsItemData {
 
   /// 自定义内容
   final Widget? customContent;
+
+  /// 校验参数
+  void _validate() {
+    if (title == null && content == null && customContent == null) {
+      throw ArgumentError('title, content, customContent needs at least one non-empty value');
+    }
+  }
 }
 
 /// Steps步骤条方向
@@ -98,5 +107,4 @@ class _TDStepsState extends State<TDSteps> {
         verticalSelect: widget.verticalSelect,
       );
   }
-
 }

tdesign-component/lib/src/components/steps/td_steps_horizontal_item.dart

@@ -10,6 +10,7 @@ class TDStepsHorizontalItem extends StatelessWidget {
   final TDStepsStatus status;
   final bool simple;
   final bool readOnly;
+
   const TDStepsHorizontalItem({
     super.key,
     required this.data,
@@ -48,7 +49,7 @@ class TDStepsHorizontalItem extends StatelessWidget {
       stepsTitleColor = TDTheme.of(context).fontGyColor1;
       /// 已完成的用icon图标显示
       completeIconWidget = Icon(TDIcons.check, color: TDTheme.of(context).brandColor7, size: 16,);
-    }else if (activeIndex < index) {
+    } else if (activeIndex < index) {
       /// 激活索引小于当前索引
       stepsNumberBgColor = TDTheme.of(context).grayColor1;
       stepsNumberTextColor = TDTheme.of(context).fontGyColor3;
@@ -100,10 +101,9 @@ class TDStepsHorizontalItem extends StatelessWidget {
     BoxDecoration? iconWidgetDecoration = shouldSetIconWidgetDecoration ? BoxDecoration(
       color: stepsNumberBgColor,
       shape: BoxShape.circle,
-    ): null;
-
+    ) : null;
 
-    // icon组件容器大小
+    /// icon组件容器大小
     double iconContainerSize = 22;
 
     /// 简略步骤条
@@ -172,23 +172,24 @@ class TDStepsHorizontalItem extends StatelessWidget {
             ),
           ],
         ),
-        Container(
-          margin: const EdgeInsets.only(top: 8),
-          alignment: Alignment.center,
-          child: TDText(
-            data.title,
-            style: TextStyle(
-              fontWeight: (activeIndex == index && !readOnly)  ? FontWeight.w600 : FontWeight.w400,
-              color: stepsTitleColor,
-              fontSize: 14,
+        if (data.title != null && data.title!.isNotEmpty)
+          Container(
+            margin: const EdgeInsets.only(top: 8),
+            alignment: Alignment.center,
+            child: TDText(
+              data.title!,
+              style: TextStyle(
+                fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400,
+                color: stepsTitleColor,
+                fontSize: 14,
+              ),
             ),
           ),
-        ),
         Container(
           margin: const EdgeInsets.only(top: 4),
           alignment: Alignment.center,
-          child: TDText(
-            data.content,
+          child: data.customContent ?? TDText(
+            data.content ?? '',
             style: TextStyle(
               fontWeight: FontWeight.w400,
               color: TDTheme.of(context).fontGyColor3,
@@ -199,6 +200,5 @@ class TDStepsHorizontalItem extends StatelessWidget {
       ],
     );
   }
-
 }
 

tdesign-component/lib/src/components/steps/td_steps_vertical_item.dart

@@ -11,6 +11,7 @@ class TDStepsVerticalItem extends StatelessWidget {
   final bool simple;
   final bool readOnly;
   final bool verticalSelect;
+
   const TDStepsVerticalItem({
     super.key,
     required this.data,
@@ -50,7 +51,7 @@ class TDStepsVerticalItem extends StatelessWidget {
       stepsTitleColor = TDTheme.of(context).fontGyColor1;
       /// 已完成的用icon图标显示
       completeIconWidget = Icon(TDIcons.check, color: TDTheme.of(context).brandColor7, size: 16,);
-    }else if (activeIndex < index) {
+    } else if (activeIndex < index) {
       /// 激活索引小于当前索引
       stepsNumberBgColor = TDTheme.of(context).grayColor1;
       stepsNumberTextColor = TDTheme.of(context).fontGyColor3;
@@ -102,8 +103,7 @@ class TDStepsVerticalItem extends StatelessWidget {
     var iconWidgetDecoration = shouldSetIconWidgetDecoration ? BoxDecoration(
       color: stepsNumberBgColor,
       shape: BoxShape.circle,
-    ): null;
-
+    ) : null;
 
     /// icon组件容器大小
     double iconContainerSize = 22;
@@ -189,39 +189,42 @@ class TDStepsVerticalItem extends StatelessWidget {
                 mainAxisAlignment: MainAxisAlignment.start,
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  Container(
-                    height: 22,
-                    margin: const EdgeInsets.only(bottom: 4),
-                    child: Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      children: [
-                        TDText(
-                          data.title,
-                          style: TextStyle(
-                            fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400,
-                            color: stepsTitleColor,
-                            fontSize: 14,
-                            height: 1.2,
+                  if (data.title != null && data.title!.isNotEmpty)
+                    Container(
+                      height: 22,
+                      margin: const EdgeInsets.only(bottom: 4),
+                      child: Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          TDText(
+                            data.title!,
+                            style: TextStyle(
+                              fontWeight: (activeIndex == index && !readOnly) ? FontWeight.w600 : FontWeight.w400,
+                              color: stepsTitleColor,
+                              fontSize: 14,
+                              height: 1.2,
+                            ),
                           ),
-                        ),
-                        verticalSelect ? Icon(TDIcons.chevron_right, color: TDTheme.of(context).fontGyColor1, size: 16,): Container(),
-                      ],
+                          verticalSelect ? Icon(TDIcons.chevron_right, color: TDTheme.of(context).fontGyColor1, size: 16,) : Container(),
+                        ],
+                      ),
                     ),
-                  ),
                   Column(
                     mainAxisAlignment: MainAxisAlignment.start,
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
-                      TDText(
-                        data.content,
-                        style: TextStyle(
-                          fontWeight: FontWeight.w400,
-                          color: TDTheme.of(context).fontGyColor3,
-                          fontSize: 12,
+                      if (data.customContent != null)
+                        data.customContent!
+                      else if (data.content != null && data.content!.isNotEmpty)
+                        TDText(
+                          data.content!,
+                          style: TextStyle(
+                            fontWeight: FontWeight.w400,
+                            color: TDTheme.of(context).fontGyColor3,
+                            fontSize: 12,
+                          ),
                         ),
-                      ),
-                      customContent,
-                    ]
+                    ],
                   ),
                 ],
               ),
@@ -231,6 +234,5 @@ class TDStepsVerticalItem extends StatelessWidget {
       ),
     );
   }
-
 }