Flutter框架跨平台鸿蒙开发——文件下载器综合应用

一、功能概述

文件下载器综合展示了Future、Stream、async/await的协同使用。




开始下载
创建下载任务
Stream通知进度
更新UI显示
下载完成?
标记完成
还有文件?
全部完成

二、下载管理

dart 复制代码
Future<void> _downloadAll() async {
  if (_isDownloading) return;

  setState(() {
    _isDownloading = true;
    _downloads.clear();
  });

  final files = [
    '文件1.pdf',
    '文件2.docx',
    '文件3.jpg',
    '文件4.mp4',
    '文件5.zip',
  ];

  for (int i = 0; i < files.length; i++) {
    final item = DownloadItem(
      name: files[i],
      progress: 0,
      status: DownloadStatus.downloading,
    );
    _downloads.add(item);
    _controller.add(item);

    if (mounted) setState(() {});

    // 模拟下载进度
    for (int progress = 0; progress <= 100; progress += 10) {
      await Future.delayed(const Duration(milliseconds: 100));
      item.progress = progress;
      _controller.add(item);
      if (mounted) setState(() {});
    }

    item.status = DownloadStatus.completed;
    _controller.add(item);
    if (mounted) setState(() {});
  }

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

三、进度显示

下载进度时间线(单文件) 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% 100 90 80 70 60 50 40 30 20 10 0 进度(%)

四、下载状态

状态 图标 颜色 说明
下载中 downloading 蓝色 正在下载
已完成 check_circle 绿色 下载成功
失败 error 红色 下载失败

五、工作流程

下载项 StreamController 界面 用户 下载项 StreamController 界面 用户 loop 每100ms loop 每个文件 点击开始下载 创建任务列表 创建下载项 显示下载中 进度+10% add事件 更新进度 重绘列表 状态改为完成 add事件 全部完成

六、综合特性

30% 25% 25% 20% 使用的技术栈 Stream async/await Future StreamController

技术 应用场景 作用
Stream 实时更新进度 持续通知UI
async/await 顺序下载 控制执行顺序
Future 延迟模拟 模拟网络请求
StreamController 事件管理 控制数据流

七、最佳实践





开始下载
检查下载状态
创建下载项
通知UI
循环更新进度
完成?
标记完成
还有文件?
结束下载

要点

  • 使用Stream通知实时进度
  • 及时更新UI状态
  • 检查mounted避免内存泄漏
  • 支持取消操作
  • 提供清晰的状态反馈

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

相关推荐
FungLeo10 小时前
Flutter fl_chart 0.70 破坏性 API 迁移实录:duration/getTooltipColor/withValues 全解
flutter·fl_chart
FungLeo16 小时前
Flutter 吸顶分组列表实战:语义桶分组 + 点击头平滑滚动
android·flutter
FungLeo17 小时前
Flutter 超长 StatefulWidget 拆分术:part of + extension on State 实战
android·flutter·dart
GitLqr19 小时前
Impeller 时代:Shader Jank 消失了,但渲染性能的战场也变了
flutter·面试·性能优化
恋猫de小郭1 天前
Flutter 的另外一种形态?社区 DartNative 要来了。
android·前端·flutter
阿里云云原生2 天前
还原一次用户等待:深度解析 Flutter RUM SDK 如何打通 Dart 到 Native 的观测链路
flutter
_阿南_2 天前
flutter 展示的字体突然奔放了
android·flutter·ios
GitLqr2 天前
玩转 Dart typedef:不仅是函数别名那么简单
flutter·面试·dart
FungLeo2 天前
Flutter 两个反直觉布局坑:ListTile 水波纹 / VerticalDivider 踩坑实录
android·flutter
年小个大2 天前
受 go-zero 启发,我给 Flutter 写了一套 CLI 脚手架
android·flutter·架构