Flutter框架跨平台鸿蒙开发——Future基础与数据加载

一、Future概述

Future是Dart中处理异步操作的核心类型,表示一个可能在未来某个时间完成的操作。
未完成
成功
失败
异步操作开始
返回Future
操作状态
Pending
Completed with Value
Completed with Error

状态 说明
Pending 操作进行中
Completed 操作已完成 Value 或 Error

二、示例代码

dart 复制代码
Future<String> _fetchData() async {
  await Future.delayed(const Duration(seconds: 2));
  if (DateTime.now().second % 3 == 0) {
    throw Exception('网络请求失败');
  }
  return '数据加载成功: ${DateTime.now()}';
}

void _loadData() {
  setState(() {
    _isLoading = true;
    _error = null;
    _data = null;
  });

  _fetchData().then((data) {
    setState(() {
      _data = data;
      _isLoading = false;
    });
  }).catchError((error) {
    setState(() {
      _error = error.toString();
      _isLoading = false;
    });
  });
}

三、工作流程

数据源 Future对象 界面 用户 数据源 Future对象 界面 用户 点击加载数据 调用_fetchData() 请求延迟2秒 返回数据 then回调 更新状态 显示结果

四、状态管理

状态 UI显示 操作
初始 图标 + 提示 显示加载按钮
加载中 进度条 禁用按钮
成功 数据内容 显示数据
失败 错误信息 显示重试按钮

五、最佳实践



开始
显示Loading
执行异步操作
成功?
显示数据
显示错误
用户可重试

要点

  • 始终检查mounted状态
  • 提供清晰的错误反馈
  • 使用setState更新UI状态
  • 支持重试机制

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

相关推荐
里欧跑得慢3 分钟前
AI 驱动的 UI 国际化方案自动适配:从单一语言到多语言布局的智能转换
前端·css·flutter·web
恋猫de小郭40 分钟前
AI 时代,一个优化 Flutter 的重复代码工具 Deslop
android·前端·flutter
ljt27249606611 天前
Flutter笔记--envied
前端·笔记·flutter
加农炮手Jinx1 天前
Flutter for OpenHarmony 实战:flutter_animate 声明式动画让 UI 灵动如原生
flutter·ui·华为·harmonyos·鸿蒙
里欧跑得慢1 天前
Flutter 像素级还原:设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
里欧跑得慢1 天前
Flutter 三方库 function_tree — 鸿蒙应用开发中的动态数学公式解析与计算神器,实现鸿蒙深度适配下的复杂函数逻辑运行时求值实战(适配鸿蒙 HarmonyOS Next ohos)
android·前端·安全·flutter·华为·harmonyos
吃西瓜的年年2 天前
vue3原理思维导图
vue.js·笔记·flutter
GitLqr3 天前
从代码复用走向生态:Flutter Dart Package 实战全指南
flutter·全栈·dart
SoaringHeart3 天前
Flutter 进阶:NCanvasImageLoader 让 Canvas 也能画网络图
前端·flutter