Flutter 网络请求实战——备忘录应用开发

核心任务

本篇主要记录如何在 Flutter for OpenHarmony 工程中集成网络请求能力，并通过开发一个在线备忘录应用，完成从数据获取到 UI 展示的全流程。

---

一、任务背景与目标

在完成环境搭建（Day1）和基础工程运行（Day2）后，Day3 的核心转向应用能力的构建：

1. 网络库集成：引入 http 或 dio 库。
2. 权限配置：在 OpenHarmony 原生层开启网络访问权限。
3. 功能实现：开发一个支持下拉刷新的备忘录列表页，包含 Loading、Error、Success 三种状态。
4. 真机调试与踩坑：解决 403 Forbidden 等常见网络问题。

---

二、技术选型与架构设计

1. 依赖配置

在 pubspec.yaml 中添加核心依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0        # 或使用 dio: ^5.4.0
  pull_to_refresh: ^2.0.0 # 下拉刷新组件（可选）

或者在终端中使用flutter pub add dio , flutter pub get

2. 数据模型 (Model)

定义 Memo 类，用于映射服务端返回的 JSON 数据。

class Memo {
  final int id;
  final String title;
  final String content;
  final String reminderTime;
  final String createdTime;

  Memo({required this.id, required this.title, required this.content, ...});

  factory Memo.fromJson(Map<String, dynamic> json) {
    return Memo(
      id: json['id'],
      title: json['title'],
      content: json['content'],
      // ... 其他字段映射
    );
  }
}

---

三、OpenHarmony 网络权限配置

关键步骤：与 Android/iOS 不同，OpenHarmony 必须显式声明网络权限，否则请求会直接失败。

修改文件：ohos/entry/src/main/module.json5

{
  "module": {
    // ...
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET" // 必须添加此权限
      }
    ]
  }
}

---

四、核心功能实现

1. 网络请求与 403 问题修复

在实战中，我们使用 mockbin.io 或 jsonplaceholder 作为测试接口。地址：mockbin
自定义api返回内容如下：

[
  {
    "id": 1,
    "title": "超市采购",
    "content": "下班后记得去超市买牛奶、鸡蛋、全麦面包和一些水果。",
    "reminderTime": "2024-02-10T18:30:00Z",
    "createdTime": "2024-02-09T09:15:00Z"
  },
  {
    "id": 2,
    "title": "团队周会",
    "content": "准备好上周的工作汇报PPT，重点讲一下鸿蒙适配进度和遇到的问题。",
    "reminderTime": "2024-02-12T09:30:00Z",
    "createdTime": "2024-02-09T14:00:00Z"
  },
  {
    "id": 3,
    "title": "预约牙医",
    "content": "给李医生打电话预约洗牙，顺便问一下补牙的价格。",
    "reminderTime": "2024-02-15T10:00:00Z",
    "createdTime": "2024-02-08T11:20:00Z"
  },
  {
    "id": 4,
    "title": "信用卡还款",
    "content": "本月账单金额 5432.10 元，记得在还款日前转账，避免逾期。",
    "reminderTime": "2024-02-25T09:00:00Z",
    "createdTime": "2024-02-05T20:45:00Z"
  },
  {
    "id": 5,
    "title": "学习 Flutter",
    "content": "看完关于 Provider 状态管理的视频教程，并写一个简单的 Demo 进行练习。",
    "reminderTime": "2024-02-10T20:00:00Z",
    "createdTime": "2024-02-07T16:30:00Z"
  }
]

踩坑记录：直接发起请求时，鸿蒙真机可能会报 403 Forbidden 错误。
原因：部分服务端会校验 User-Agent，而 Flutter 在鸿蒙上的默认 UA 可能被拦截。
解决方案：手动设置浏览器级别的 User-Agent。

final response = await http.get(
  Uri.parse('https://api.mockbin.io/v1/xxx'),
  headers: {
    'Content-Type': 'application/json',
    // 关键：模拟 Chrome 浏览器的 User-Agent
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...',
  },
);

2. UI 状态管理

页面采用经典的 Loading -> Content/Error 状态流转：

• Loading：进入页面时显示 CircularProgressIndicator。
• Success：使用 ListView.builder 渲染备忘录卡片。
• Error：请求失败时显示错误提示，并提供 Retry 按钮。

3. 下拉刷新

使用 RefreshIndicator 包裹列表组件，实现下拉重新加载数据。

RefreshIndicator(
  onRefresh: _fetchMemos, // 触发刷新逻辑
  child: ListView.builder(
    itemCount: _memos.length,
    itemBuilder: (context, index) {
      return Card(
        child: ListTile(
          title: Text(_memos[index].title),
          subtitle: Text(_memos[index].content),
        ),
      );
    },
  ),
)

---

五、遇到的问题与总结

1. 常见报错

• Failed to load data (403)：
  • 原因：缺少请求头。
  • 解法：添加 User-Agent。
• install parse native so failed：
  • 原因：架构不匹配（模拟器通常为 x86_64，真机为 arm64）。
  • 解法：在 build-profile.json5 中配置 abiFilters。
• module.json5 解析错误：
  • 原因：JSON 数组末尾多余的逗号。
  • 解法：严格遵守 JSON 标准格式。

2. 学习心得

• 跨平台优势：Flutter 的业务逻辑代码（Dart）在鸿蒙上几乎无需修改，做到了“一次编写，多端运行”。
• 平台差异：主要精力花在工程配置（权限、签名、架构）上，这是后续开发的重点关注对象。

---

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