Flutter 框架跨平台鸿蒙开发 - 算法可视化应用

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

一、项目概述

运行效果图

1.1 应用简介

算法可视化应用是一款面向编程学习者和算法爱好者的教育工具，通过动态图形化展示，帮助用户直观理解各种经典算法的执行过程。应用涵盖排序算法、查找算法、图算法等多个类别，将抽象的算法逻辑转化为可视化的动画演示，让学习算法变得生动有趣。

算法学习一直是计算机科学教育中的难点。传统的教学方式往往依赖静态图示和文字描述，学生难以真正理解算法的动态执行过程。本应用通过实时动画展示每一步操作，配合详细的步骤说明，让用户能够清晰地观察数据的变化过程，深入理解算法的核心思想。

1.2 核心功能

1.3 支持的算法

排序算法

查找算法

图算法

1.4 技术栈

1.5 项目结构

lib/
└── main_algorithm_visualization.dart
    ├── AlgorithmVisualizationApp    # 应用入口
    ├── AlgorithmType                # 算法类型枚举
    ├── AlgorithmState               # 算法状态模型
    ├── HomePage                     # 主页面
    │   ├── _buildHomePage()         # 首页（可视化区域）
    │   ├── _buildAlgorithmListPage()# 算法列表页
    │   ├── _buildFavoritesPage()    # 学习记录页
    │   └── _buildProfilePage()      # 个人中心
    └── 算法实现方法
        ├── _bubbleSort()            # 冒泡排序
        ├── _selectionSort()         # 选择排序
        ├── _insertionSort()         # 插入排序
        ├── _quickSort()             # 快速排序
        ├── _mergeSort()             # 归并排序
        ├── _binarySearch()          # 二分查找
        ├── _linearSearch()          # 线性查找
        ├── _dfs()                   # 深度优先搜索
        └── _bfs()                   # 广度优先搜索

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 算法执行流程

2.4 状态流转图

三、核心模块设计

3.1 数据模型设计

3.1.1 算法类型枚举 (AlgorithmType)

enum AlgorithmType {
  bubbleSort,      // 冒泡排序
  selectionSort,   // 选择排序
  insertionSort,   // 插入排序
  quickSort,       // 快速排序
  mergeSort,       // 归并排序
  binarySearch,    // 二分查找
  linearSearch,    // 线性查找
  dfs,             // 深度优先搜索
  bfs,             // 广度优先搜索
}

extension AlgorithmTypeExtension on AlgorithmType {
  String get algorithmName { /* 算法名称 */ }
  String get algorithmDescription { /* 算法描述 */ }
  String get algorithmCategory { /* 算法分类 */ }
  IconData get algorithmIcon { /* 算法图标 */ }
  Color get algorithmColor { /* 算法颜色 */ }
}

3.1.2 算法状态模型 (AlgorithmState)

class AlgorithmState {
  final List<int> array;        // 当前数组状态
  final List<int> comparing;    // 正在比较的元素索引
  final List<int> sorted;       // 已排序的元素索引
  final List<int> selected;     // 选中的元素索引
  final int? pivot;             // 基准元素索引（快排）
  final int comparisons;        // 比较次数
  final int swaps;              // 交换次数
  final String currentStep;     // 当前步骤说明
}

状态颜色映射：

3.2 页面结构设计

3.2.1 首页模块

3.2.2 控制面板设计

┌─────────────────────────────────────────────────┐
│ ⚙️ 控制面板                                      │
│                                                 │
│ 算法选择：[冒泡排序 ▼]                          │
│                                                 │
│ 数组大小：━━━━━━━━●━━━━━━━━ 20                  │
│                                                 │
│ 动画速度：━━━━━━●━━━━━━━━━ 2.0x                 │
│                                                 │
│ [▶ 开始]  [⏸ 暂停]  [⏹ 停止]                   │
└─────────────────────────────────────────────────┘

3.2.3 可视化区域设计

┌─────────────────────────────────────────────────┐
│ 📊 可视化区域                                   │
│ ┌───────────────────────────────────────────┐   │
│ │ 🫧 冒泡排序                               │   │
│ │ 排序算法                                  │   │
│ └───────────────────────────────────────────┘   │
│                                                 │
│     ▓▓                                          │
│     ▓▓  ▓▓                                      │
│ ▓▓  ▓▓  ▓▓  ▓▓                                  │
│ ▓▓  ▓▓  ▓▓  ▓▓  ▓▓  ▓▓                          │
│                                                 │
│ ┌───────────────────────────────────────────┐   │
│ │ 比较 arr[3]=45 和 arr[4]=32               │   │
│ └───────────────────────────────────────────┘   │
└─────────────────────────────────────────────────┘

3.3 算法实现详解

3.3.1 冒泡排序

Future<void> _bubbleSort() async {
  var arr = List<int>.from(_state.array);
  var sorted = <int>[];
  var comparisons = 0;
  var swaps = 0;

  for (int i = 0; i < arr.length - 1; i++) {
    for (int j = 0; j < arr.length - i - 1; j++) {
      comparisons++;
      
      // 发送比较状态
      await _emitState(_state.copyWith(
        array: arr,
        comparing: [j, j + 1],
        sorted: sorted,
        comparisons: comparisons,
        currentStep: '比较 arr[$j]=${arr[j]} 和 arr[${j + 1}]=${arr[j + 1]}',
      ));

      if (arr[j] > arr[j + 1]) {
        // 交换元素
        var temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
        swaps++;

        // 发送交换状态
        await _emitState(_state.copyWith(
          array: arr,
          comparing: [j, j + 1],
          swaps: swaps,
          currentStep: '交换 arr[$j] 和 arr[${j + 1}]',
        ));
      }
    }
    sorted.insert(0, arr[arr.length - 1 - i]);
  }
}

冒泡排序流程图：

3.3.2 快速排序

Future<void> _quickSort(int low, int high) async {
  if (low < high) {
    int pivotIndex = await _partition(low, high);
    await _quickSort(low, pivotIndex - 1);
    await _quickSort(pivotIndex + 1, high);
  }
}

Future<int> _partition(int low, int high) async {
  var arr = _state.array;
  int pivot = arr[high];
  int i = low - 1;

  for (int j = low; j < high; j++) {
    if (arr[j] < pivot) {
      i++;
      // 交换 arr[i] 和 arr[j]
      var temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
    }
  }
  // 将基准元素放到正确位置
  var temp = arr[i + 1];
  arr[i + 1] = arr[high];
  arr[high] = temp;
  
  return i + 1;
}

快速排序分区过程：

3.3.3 二分查找

Future<void> _binarySearch() async {
  var arr = List<int>.from(_state.array)..sort();
  var target = arr[math.Random().nextInt(arr.length)];
  var comparisons = 0;

  int left = 0, right = arr.length - 1;

  while (left <= right) {
    int mid = (left + right) ~/ 2;
    comparisons++;

    await _emitState(_state.copyWith(
      array: arr,
      comparing: [mid],
      selected: [left, right],
      comparisons: comparisons,
      currentStep: '检查中间位置 $mid: arr[$mid]=${arr[mid]}',
    ));

    if (arr[mid] == target) {
      // 找到目标
      return;
    } else if (arr[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
}

二分查找示意图：

3.4 状态管理

3.4.1 核心状态变量

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  int _currentIndex = 0;                    // 当前页面索引
  AlgorithmType? _selectedAlgorithm;        // 选中的算法
  AlgorithmState _state = AlgorithmState(array: []); // 算法状态
  bool _isRunning = false;                  // 是否正在运行
  bool _isPaused = false;                   // 是否暂停
  double _speed = 500;                      // 动画速度（毫秒）
  int _arraySize = 20;                      // 数组大小
  StreamController<AlgorithmState>? _streamController; // 状态流控制器
}

3.4.2 状态更新机制

Future<void> _emitState(AlgorithmState state) async {
  // 暂停时等待
  while (_isPaused) {
    await Future.delayed(const Duration(milliseconds: 100));
  }
  // 发送新状态到流
  _streamController?.add(state);
  // 延迟以实现动画效果
  await Future.delayed(Duration(milliseconds: _speed.toInt()));
}

四、UI设计规范

4.1 配色方案

应用采用深色主题，营造专业的编程学习氛围：

算法专属颜色：

4.2 字体规范

4.3 组件规范

4.3.1 柱状图组件

AnimatedContainer(
  duration: const Duration(milliseconds: 100),
  width: barWidth,
  height: height,
  decoration: BoxDecoration(
    color: color,                    // 根据状态确定颜色
    borderRadius: BorderRadius.vertical(top: Radius.circular(4)),
    boxShadow: [
      BoxShadow(
        color: color.withOpacity(0.5),
        blurRadius: 4,
        offset: Offset(0, 2),
      ),
    ],
  ),
)

4.3.2 统计卡片组件

┌─────────────────────────┐
│ 🔄 比较次数              │
│    45                   │
└─────────────────────────┘

五、核心功能实现

5.1 算法执行引擎

void _startAlgorithm() async {
  if (_isRunning) return;

  _streamController = StreamController<AlgorithmState>();
  setState(() {
    _isRunning = true;
    _isPaused = false;
  });

  // 订阅状态流
  _subscription = _streamController!.stream.listen((state) {
    setState(() {
      _state = state;
    });
  });

  // 根据选择的算法执行
  switch (_selectedAlgorithm) {
    case AlgorithmType.bubbleSort:
      await _bubbleSort();
      break;
    // ... 其他算法
  }

  setState(() {
    _isRunning = false;
  });
}

5.2 暂停/继续功能

void _pauseAlgorithm() {
  setState(() {
    _isPaused = !_isPaused;
  });
}

Future<void> _emitState(AlgorithmState state) async {
  // 暂停时阻塞
  while (_isPaused) {
    await Future.delayed(const Duration(milliseconds: 100));
  }
  _streamController?.add(state);
  await Future.delayed(Duration(milliseconds: _speed.toInt()));
}

5.3 随机数组生成

void _generateRandomArray() {
  final random = math.Random();
  final array = List.generate(_arraySize, (i) => random.nextInt(100) + 1);
  setState(() {
    _state = AlgorithmState(array: array);
    _isRunning = false;
    _isPaused = false;
  });
}

六、性能优化

6.1 动画优化

// 使用AnimatedContainer实现平滑过渡
AnimatedContainer(
  duration: const Duration(milliseconds: 100),
  // ...
)

// 使用StreamController批量更新状态
_streamController?.add(state);

6.2 内存优化

@override
void dispose() {
  _animationController.dispose();
  _subscription?.cancel();
  _streamController?.close();
  super.dispose();
}

6.3 渲染优化

• 使用 ListView.builder 实现懒加载
• 使用 IndexedStack 保持页面状态
• 避免在 build 方法中创建对象

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 代码同步展示

在可视化过程中同步展示对应的代码行：

// 高亮当前执行的代码行
Widget _buildCodeView(int currentLine) {
  return Container(
    child: Text(
      codeLines[currentLine],
      style: TextStyle(
        backgroundColor: Colors.yellow.withOpacity(0.3),
      ),
    ),
  );
}

7.2.2 算法对比模式

同时运行两种算法，对比执行效率：

┌─────────────────┬─────────────────┐
│   冒泡排序       │   快速排序       │
│   比较: 190      │   比较: 68      │
│   交换: 95       │   交换: 20      │
│   时间: 2.3s     │   时间: 0.8s    │
└─────────────────┴─────────────────┘

7.2.3 复杂度分析图表

八、注意事项

8.1 开发注意事项

1. 异步处理：算法执行使用 async/await，确保UI更新在主线程

2. 状态管理：使用 StreamController 实现状态流的订阅模式

3. 动画流畅：AnimatedContainer 的 duration 不宜过长

4. 内存释放：及时取消订阅和关闭 StreamController

8.2 常见问题

九、运行说明

9.1 环境要求

9.2 运行命令

# 查看可用设备
flutter devices

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 -t lib/main_algorithm_visualization.dart

# 运行到Windows
flutter run -d windows -t lib/main_algorithm_visualization.dart

# 代码分析
flutter analyze lib/main_algorithm_visualization.dart

十、总结

算法可视化应用通过动态图形化展示，将抽象的算法概念转化为直观的动画演示，帮助用户深入理解各种经典算法的执行过程。应用采用Flutter框架开发，支持鸿蒙OS等多平台运行，具有良好的跨平台兼容性。

核心功能包括9种经典算法的可视化演示、实时统计、速度控制等，满足了算法学习的基本需求。后续版本将陆续推出代码同步展示、算法对比模式、复杂度分析图表等增强功能，进一步提升学习体验。

通过本应用，希望能够帮助更多人轻松学习算法，理解算法之美，提升编程能力。