Flutter 步骤条组件在 OpenHarmony 上的实现指南

本文为 Flutter for OpenHarmony 跨平台应用开发实战教程，完整实现步骤条组件，包括步骤渲染、状态切换、连接线绘制三大核心模块。在鸿蒙设备上解决了流程可视化、状态管理、自定义绘制等关键技术问题，全方位展示UI组件开发能力的落地实践。

2601_95964097

16人浏览 · 2026-04-30 17:55:19

2601_95964097 · 2026-04-30 17:55:19 发布

Flutter 步骤条组件在 OpenHarmony 上的实现指南

欢迎加入开源鸿蒙跨平台社区
https://openharmonycrossplatform.csdn.net

📋 文章摘要

一、引言

在现代应用开发中，流程展示是常见的UI需求。步骤条组件用于展示多步骤流程的进度和状态，广泛应用于购物流程、表单填写、任务管理等场景。通过直观的步骤展示和清晰的状态指示，用户可以快速了解当前进度和后续步骤。

本文将详细介绍如何使用 Flutter 框架在 OpenHarmony 设备上实现完整的步骤条组件，包括步骤渲染、状态切换以及连接线绘制等核心功能。

二、技术背景与选型分析

2.1 为什么需要步骤条？

步骤条组件能够帮助用户：

流程可视化：清晰展示多步骤流程
状态指示：实时显示当前步骤和完成状态
导航引导：引导用户按步骤完成任务
进度反馈：提供直观的进度反馈

2.2 步骤条的核心需求

在实际开发过程中，步骤条组件需要满足以下关键需求：

步骤渲染：灵活展示不同样式的步骤
状态切换：管理步骤的完成、进行中、待处理状态
连接线绘制：绘制步骤之间的连接线
交互控制：支持步骤的前进和后退

三、系统架构设计

3.1 整体架构

本实现采用组件化架构设计，主要包含以下三个核心模块：

┌─────────────────────────────────────┐
│           展示层                     │
│   (StepperComponentDemoPage)        │
├─────────────────────────────────────┤
│           状态管理层                 │
│   (步骤状态、进度控制)               │
├─────────────────────────────────────┤
│           绘制层                     │
│   (自定义绘制、连接线)               │
└─────────────────────────────────────┘

这种设计模式的优点在于：

解耦性强：展示层、状态管理层、绘制层职责清晰
扩展性好：可以轻松添加新的布局和样式
可维护性高：代码结构清晰，便于维护和测试

3.2 核心类设计

我们创建了 StepperComponentDemoPage 作为主界面容器，内部集成了以下子组件：

HorizontalStepper：水平步骤条展示
VerticalStepper：垂直步骤条展示
CustomStepper：自定义样式展示
StepControls：步骤控制按钮

四、关键实现细节

4.1 步骤渲染

步骤渲染使用 Flutter 的基础组件组合：

Widget _buildStepItem(Map<String, dynamic> step, int index) {
  Color bgColor;
  Color iconColor;
  IconData iconData = step['icon'];

  if (index < _currentStep) {
    bgColor = Colors.green;
    iconColor = Colors.white;
  } else if (index == _currentStep) {
    bgColor = Colors.indigo;
    iconColor = Colors.white;
  } else {
    bgColor = Colors.grey.shade300;
    iconColor = Colors.grey.shade600;
  }

  return Column(
    children: [
      Container(
        width: 60,
        height: 60,
        decoration: BoxDecoration(
          color: bgColor,
          shape: BoxShape.circle,
          border: Border.all(
            color: index == _currentStep ? Colors.indigo.shade300 : Colors.transparent,
            width: 3,
          ),
          boxShadow: index == _currentStep
              ? [
                  BoxShadow(
                    color: Colors.indigo.withOpacity(0.3),
                    blurRadius: 8,
                    spreadRadius: 2,
                  ),
                ]
              : null,
        ),
        child: Icon(iconData, color: iconColor, size: 28),
      ),
      const SizedBox(height: 8),
      Text(
        step['title'],
        style: TextStyle(
          fontSize: 12,
          fontWeight: index == _currentStep ? FontWeight.bold : FontWeight.normal,
          color: index == _currentStep ? Colors.indigo : Colors.grey.shade700,
        ),
      ),
      const SizedBox(height: 4),
      Text(
        '步骤 ${index + 1}',
        style: TextStyle(
          fontSize: 10,
          color: Colors.grey.shade500,
        ),
      ),
    ],
  );
}

渲染特点：

状态区分：通过颜色区分完成、进行中、待处理状态
视觉反馈：当前步骤有阴影和边框强调
图标支持：每个步骤可以配置不同的图标
标签显示：显示步骤标题和序号

4.2 状态切换

状态切换通过状态管理实现：

final List<Map<String, dynamic>> _steps = [
  {
    'title': '选择商品',
    'subtitle': '浏览并选择心仪商品',
    'icon': Icons.shopping_cart,
    'status': 'completed',
    'description': '在商城中浏览商品，选择您需要的商品加入购物车',
  },
  {
    'title': '填写信息',
    'subtitle': '填写收货地址',
    'icon': Icons.edit_location,
    'status': 'active',
    'description': '填写您的收货地址、联系方式等必要信息',
  },
  // 更多步骤...
];

void _updateStepStatus() {
  for (int i = 0; i < _steps.length; i++) {
    if (i < _currentStep) {
      _steps[i]['status'] = 'completed';
    } else if (i == _currentStep) {
      _steps[i]['status'] = 'active';
    } else {
      _steps[i]['status'] = 'pending';
    }
  }
}

void _nextStep() {
  if (_currentStep < _steps.length - 1) {
    setState(() {
      _currentStep++;
      _updateStepStatus();
    });
  }
}

void _previousStep() {
  if (_currentStep > 0) {
    setState(() {
      _currentStep--;
      _updateStepStatus();
    });
  }
}

状态管理逻辑：

完成状态：已完成的步骤显示绿色，表示已完成
进行中状态：当前步骤显示蓝色，表示正在进行
待处理状态：未开始的步骤显示灰色，表示待处理
自动更新：切换步骤时自动更新所有步骤状态

4.3 连接线绘制

连接线绘制使用 Container 组件：

Widget _buildConnector(int index) {
  bool isCompleted = index < _currentStep;
  bool isActive = index == _currentStep - 1;

  return Container(
    width: 60,
    height: 3,
    margin: const EdgeInsets.symmetric(horizontal: 8),
    decoration: BoxDecoration(
      color: isCompleted ? Colors.green : Colors.grey.shade300,
      borderRadius: BorderRadius.circular(2),
      boxShadow: isActive
          ? [
              BoxShadow(
                color: Colors.green.withOpacity(0.3),
                blurRadius: 4,
              ),
            ]
          : null,
    ),
  );
}

连接线特点：

颜色变化：根据步骤状态改变颜色
圆角设计：使用圆角提升视觉效果
阴影效果：活跃连接线有阴影强调
宽度控制：可调整连接线的宽度和高度

4.4 垂直步骤条

垂直步骤条提供更详细的信息展示：

Widget _buildVerticalStepper() {
  return Column(
    children: List.generate(_steps.length, (index) {
      return Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            children: [
              _buildVerticalStepIcon(_steps[index], index),
              if (index < _steps.length - 1 && _showConnectors)
                _buildVerticalConnector(index),
            ],
          ),
          const SizedBox(width: 16),
          Expanded(
            child: _buildVerticalStepContent(_steps[index], index),
          ),
        ],
      );
    }),
  );
}

Widget _buildVerticalStepContent(Map<String, dynamic> step, int index) {
  bool isActive = index == _currentStep;
  bool isCompleted = index < _currentStep;

  return Container(
    margin: const EdgeInsets.only(bottom: 16),
    padding: const EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: isActive ? Colors.indigo.shade50 : Colors.grey.shade50,
      borderRadius: BorderRadius.circular(8),
      border: Border.all(
        color: isActive ? Colors.indigo.shade200 : Colors.grey.shade200,
      ),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Text(
              step['title'],
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: isActive ? Colors.indigo : Colors.grey.shade700,
              ),
            ),
            const SizedBox(width: 8),
            if (isCompleted)
              Icon(Icons.check_circle, color: Colors.green, size: 18),
            if (isActive)
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                decoration: BoxDecoration(
                  color: Colors.indigo,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: const Text(
                  '当前',
                  style: TextStyle(color: Colors.white, fontSize: 10),
                ),
              ),
          ],
        ),
        const SizedBox(height: 4),
        Text(
          step['subtitle'],
          style: TextStyle(
            fontSize: 12,
            color: Colors.grey.shade600,
          ),
        ),
        const SizedBox(height: 8),
        Text(
          step['description'],
          style: TextStyle(
            fontSize: 13,
            color: Colors.grey.shade700,
          ),
        ),
      ],
    ),
  );
}

垂直布局特点：

详细信息：显示标题、副标题和描述
状态标签：显示"当前"或完成图标
卡片布局：使用卡片提升视觉效果
自动换行：内容自动换行适应宽度

五、OpenHarmony 平台适配要点

5.1 组件适配

在 OpenHarmony 平台上，Flutter 组件可以直接使用：

import 'package:flutter/material.dart';

class StepperWidget extends StatelessWidget {
  final List<StepItem> steps;
  final int currentStep;
  final Function(int)? onStepChanged;

  const StepperWidget({
    super.key,
    required this.steps,
    required this.currentStep,
    this.onStepChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(steps.length, (index) {
        return Row(
          children: [
            _buildStep(steps[index], index),
            if (index < steps.length - 1) _buildConnector(index),
          ],
        );
      }),
    );
  }
}