Flutter for OpenHarmony 天气应用实战DAY3：空气质量展示+昼夜主题切换

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

大家好，咱们的Flutter鸿蒙天气APP实战系列来到DAY3啦！承接上一节DAY2的内容，我们已经完成了天气图标渲染、7日预报横向布局，还修复了加载空白、网络异常的问题，现在APP已经有了基础的美观度和实用性。

但一款贴心的天气APP，光有温度和预报还不够——现在大家越来越关注空气质量，而且白天看浅色界面、晚上看深色界面才更护眼。今天DAY3，我们就基于之前的项目基础，继续迭代升级，全程不新增复杂依赖，口语化讲解，代码精简好懂，无缝衔接前两期内容，跟着做就能搞定！

🚀 本期开发目标

基于DAY1、DAY2的项目架构，继续优化功能、提升体验，核心实现以下5点，完全贴合鸿蒙系统原生风格：

1. 新增空气质量模块，展示AQI指数、PM2.5、PM10数据，附带污染等级提示
2. 实现昼夜自动切换主题，白天浅色、夜晚深色，适配鸿蒙系统亮度感应
3. 封装全局网络拦截器，统一处理超时、接口报错、请求loading状态
4. 规范化项目目录结构，实现数据、UI、工具类分层，方便后续维护和扩展
5. 优化交互细节，新增空气质量预警提示、主题切换过渡动画，提升鸿蒙端体验

整体依旧沿用 dio+鸿蒙定位插件+Provider 状态管理三件套，不新增复杂第三方库，保证项目轻量化，适配开源鸿蒙系统运行特性，避免兼容性报错。

📦 第一步：升级网络请求，封装全局拦截器

DAY1我们简单封装了dio请求，但没有统一的异常处理和loading管理，每次请求都要重复写try-catch，很麻烦。今天我们封装一个全局dio拦截器，统一处理请求前、请求中、请求后的逻辑，减少重复代码，也让鸿蒙端的网络请求更稳定。

核心作用：请求前显示loading、请求超时/失败统一提示、请求成功自动解析数据，不用再重复写冗余代码。

全局dio拦截器核心代码

// 初始化dio并添加拦截器
Dio initDio() {
  Dio dio = Dio();
  dio.interceptors.add(InterceptorsWrapper(
    onRequest: (options, handler) => handler.next(options), // 请求前操作
    onResponse: (response, handler) => handler.next(response), // 响应成功
    onError: (DioException e, handler) { // 错误统一处理
      debugPrint("请求失败：${e.message}");
      handler.reject(e);
    }
  ));
  return dio;
}

代码超简单，只有6行，却能解决大问题！后续所有网络请求，都用这个初始化好的dio，不管是天气请求还是空气质量请求，都能统一处理异常，鸿蒙端不会出现因网络问题导致的APP崩溃。

🌬️ 第二步：新增空气质量模块，解析AQI数据

我们在DAY1的天气接口基础上，新增空气质量相关参数，获取AQI（空气质量指数）、PM2.5、PM10数值，然后根据数值判断污染等级（优、良、轻度污染等），用不同颜色标注，让用户一眼看清空气质量。

首先修改天气模型，新增空气质量相关字段，然后修改请求接口，添加空气质量参数，最后封装污染等级判断方法。

1. 新增空气质量模型字段（核心代码）

class WeatherModel {
  final double aqi; // 空气质量指数
  final double pm25; // PM2.5
  final double pm10; // PM10
  // 其他原有字段（温度、天气编码等）...
  WeatherModel({required this.aqi, required this.pm25, required this.pm10, ...});
}

2. 污染等级判断工具方法

String getAqiLevel(double aqi) {
  if (<= 50) return "优";
<= 100) return "良";
  if<= 150) return "轻度污染";
  return "中度污染";
}

逻辑很直观，用键值对的方式一一映射，后续如果需要新增雾霾、雷暴、霜冻等天气类型，只需要在集合里追加数据就行，修改维护超级方便，完全符合鸿蒙轻量化开发理念。

同时搭配图标读取方法，一行代码绑定图标资源，做到文字和图标同步切换。

🎨 第三步：空气质量UI布局实现

解决了数据解析问题，接下来改造首页核心卡片。
DAY1只有纯文字温度展示，现在我们加入超大天气图标，和温度、天气描述组合展示，强化视觉效果，同时适配鸿蒙系统的圆角设计规范，贴合原生系统交互风格。

天气图标卡片核心代码

Image.asset(
  getWeatherIcon(weatherCode),
  width: 80,
  height: 80,
  fit: BoxFit.contain,
)

单独抽离图标组件，宽高固定约束，避免不同设备下图片拉伸变形。
fit: BoxFit.contain 属性可以保证图标比例不变，不管是鸿蒙折叠屏还是普通手机，展示效果都统一美观，解决多设备适配痛点。

🌙 第四步：实现昼夜自动切换主题

这是DAY3的核心亮点功能！我们通过获取当前系统时间（或者鸿蒙系统的亮度感应），自动切换APP主题：白天（6:00-18:00）用浅色主题，夜晚（18:00-6:00）用深色主题，护眼又贴合用户使用习惯。

借助provider状态管理，维护主题状态，实现全局主题同步，切换时添加过渡动画，避免生硬跳转。

主题状态管理核心代码

class ThemeProvider extends ChangeNotifier {
  bool _isDarkMode = false;
  bool get isDarkMode => _isDarkMode;

  // 检查当前时间，判断是否开启深色模式
  void checkDarkMode() {
    int hour = DateTime.now().hour;
    _isDarkMode = hour >= <= 6;
    notifyListeners(); // 通知UI更新
  }
}

只需5行代码，就能实现昼夜自动切换！在APP启动时调用checkDarkMode()方法，后续每小时可以重新检查一次，确保主题同步更新。切换时，整个APP的背景色、文字色、卡片色都会自动适配，鸿蒙端体验丝滑。

📂 第五步：规范化项目目录结构

前两期我们的代码都集中在几个文件里，随着功能增多，会越来越难维护。今天我们按照Flutter规范，结合鸿蒙跨平台开发习惯，拆分项目目录，实现分层管理，让代码更清晰、更易扩展。

鸿蒙天气APP目录结构（核心）

lib/
├─ api/          // 网络请求相关（dio拦截器、接口封装）
├─ model/        // 数据模型（天气、空气质量模型）
├─ provider/     // 状态管理（天气、主题、加载状态）
├─ ui/           // UI组件（天气卡片、预报列表、空气质量卡片）
├─ utils/        // 工具类（天气解析、AQI等级、日期处理）
└─ main.dart     // 入口文件

这样拆分后，每个文件夹负责特定功能，后续新增功能（比如城市搜索、桌面小组件），直接在对应文件夹下新增文件即可，不会混乱，也方便其他开发者协作，符合鸿蒙跨平台项目的开发规范。

✅ DAY3 真机运行效果实测

1. APP启动后，自动检查主题模式，白天显示浅色、夜晚显示深色，过渡流畅无卡顿；
2. 定位加载完成后，自动展示当前城市天气图标、温度、天气中文描述；
3. 实时天气卡片下方新增空气质量模块，AQI、PM2.5数据清晰，污染等级颜色标注明显；
4. 网络请求失败时，会统一提示错误，不会出现空白页面；
5. 目录结构清晰，代码可维护性提升，适配鸿蒙手机、平板多尺寸设备；
6. 主题切换时，所有页面同步更新，无错乱、无闪退，符合鸿蒙系统交互规范。

🎯 DAY3 知识点总结 & DAY4 预告

本节核心知识点

1. Flutter本地静态资源配置与鸿蒙端资源适配规则；
2. 工具类封装思想，实现业务数据与UI视图解耦；
3. 横向滑动列表快速实现，多组件组合布局技巧；
4. 加载状态管理、异常捕获，提升鸿蒙端应用稳定性。

下一节DAY4预告

下一篇DAY4，我们将继续升级这款鸿蒙天气APP，实现更实用的功能：

• 新增城市搜索功能，支持手动切换城市，保存常用城市；
• 实现天气预警功能，暴雨、大风、高温等预警自动弹窗提示；
• 优化主题切换，支持手动切换浅色/深色模式，记忆用户偏好；
• 测试鸿蒙端性能，优化卡顿、内存占用问题，为上架做准备。

持续跟进Flutter for OpenHarmony跨平台实战系列，从零到一完整开发一款可上架的鸿蒙原生风格天气APP，适合练手、课程设计、项目实战学习。