Flutter for OpenHarmony 天气应用实战DAY6：桌面小组件开发+全局主题封装+项目源码规整

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

大家好，咱们Flutter鸿蒙天气APP实战系列来到DAY6收官进阶篇！前面DAY1到DAY5，我们已经完成了基础天气展示、七日预报、空气质量、昼夜主题、城市搜索、天气预警、性能优化、启动页定制、异常兜底和鸿蒙打包编译，整个APP已经可以正常安装使用。

今天DAY6我们做进阶拔高开发，也是项目最后一次功能大升级，重点攻克鸿蒙桌面小组件、全局主题统一封装、项目源码分层规整三大核心内容，让项目从能用变成好用、专业、可直接拿来当毕设和课程设计成品。

🚀 本期开发目标

1. 适配OpenHarmony桌面小组件开发，桌面无需打开APP直看实时天气
2. 封装全局主题工具类，统一管理浅色/深色、渐变配色、文字样式
3. 重构项目代码，拆分工具类、常量类、样式类，彻底解耦
4. 新增缓存天气数据，离线也能查看上次天气信息
5. 优化页面路由封装，统一页面跳转逻辑，代码更整洁

依旧沿用之前技术栈，口语化讲解，每段附带5-6行精简代码，和前面DAY1-Day5格式完全一致。

📦 第一步：引入鸿蒙小组件适配依赖

想要实现鸿蒙桌面小组件，我们需要引入适配OpenHarmony的桌面组件插件，专门适配鸿蒙系统桌面卡片展示，不用写原生Java/ArkTS代码，Flutter一层搞定。

dependencies:
  flutter:
    sdk: flutter
  home_widget: ^0.7.0
  shared_preferences_ohos: ^2.2.0

添加依赖后执行flutter pub get，插件已经做了鸿蒙适配，不用额外配置权限，直接可以初始化使用。

🧩 第二步：初始化桌面小组件配置

我们先初始化小组件，绑定要展示的数据，把当前温度、天气状态、城市名称同步到鸿蒙桌面卡片上。

Future<void> initHomeWidget() async {
  await HomeWidget.setAppGroupId('group.weather.ohos');
  HomeWidget.registerBackgroundCallback(backgroundCallback);
}

就这几行代码，完成小组件初始化和后台回调注册，当天气数据刷新时，自动同步更新桌面小组件内容。

🌤️ 第三步：小组件天气数据同步逻辑

把APP内获取到的温度、天气文案、城市名保存到本地缓存，小组件读取缓存渲染展示，就算不打开APP也能实时看天气。

static Future<void> updateWidgetData(WeatherModel weather) async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('widget_temp', "${weather.temp}°");
  await prefs.setString('widget_desc', weather.weatherText);
}

每次下拉刷新、切换城市的时候，自动调用这个方法更新小组件数据，桌面卡片自动刷新，适配鸿蒙桌面交互逻辑。

🎨 第四步：封装全局主题工具类

之前主题颜色、渐变、文字样式都是散落在页面里，比较杂乱。今天统一抽离成全局主题类，一处定义，全局复用，后期改配色只改一个地方就行。

class AppTheme {
  static Gradient getWeatherGradient(bool isDark) {
    return isDark ? darkGradient : lightGradient;
  }
  static TextStyle tempTextStyle = TextStyle(fontSize: 64, fontWeight: FontWeight.bold);
}

后续所有页面的渐变背景、温度字体、卡片圆角、文字大小全部统一调用这个工具类，项目风格高度统一，维护超级方便。

💾 第五步：实现天气本地缓存离线查看

很多时候手机没有网络，不能每次都空白。我们把成功请求到的天气JSON数据缓存到本地，无网络时直接加载缓存数据，提升用户体验。

Future<void> cacheWeatherData(WeatherModel model) async {
  final prefs = await SharedPreferences.getInstance();
  String jsonStr = jsonEncode(model.toJson());
  await prefs.setString('cache_weather', jsonStr);
}

打开APP优先判断有无网络，有网请求新数据，无网直接读取缓存数据展示，完美适配鸿蒙弱网使用场景。

🧭 第六步：封装全局路由跳转管理

项目页面多了之后，每次Navigator跳转写一堆代码太冗余，今天封装统一路由工具类，一行代码实现页面跳转。

static void push(BuildContext context, Widget page) {
  Navigator.push(context, MaterialPageRoute(builder: (_) => page));
}

以后跳转到城市搜索页、预报详情页，直接 AppRouter.push(context, SearchPage()); 代码简洁干净，项目结构更专业。

✅ DAY6 真机运行实测效果

1. 配置完桌面小组件后，可在鸿蒙桌面添加天气卡片，实时显示温度和天气状况；
2. 全局主题封装完成，全站UI配色、字体样式统一，修改主题一键全局生效；
3. 无网络环境下自动加载本地缓存天气数据，不会白屏报错；
4. 路由统一封装，页面跳转代码极简，后期新增页面无需改动原有逻辑；
5. 整个项目代码彻底分层解耦，工具类、主题类、常量类、模型类分工明确。

🎯 DAY6 知识点总结 系列完整收官

本节核心知识点

1. Flutter适配OpenHarmony桌面小组件快速开发流程；
2. 全局主题封装思想，实现全站UI样式统一管理；
3. 利用SharedPreferences实现天气数据本地缓存、离线查看；
4. 封装全局路由，简化页面跳转，提升项目可维护性；
5. 大型Flutter鸿蒙项目代码分层、解耦、规范化实战。

整套系列完结总结

从DAY1环境搭建、定位天气接口，到DAY2图标和七日预报、DAY3空气质量与昼夜主题、DAY4城市搜索与预警优化、DAY5启动页异常兜底打包、DAY6桌面小组件与项目源码规整。

整整六天，我们从零完整开发了一套Flutter for OpenHarmony 完整版天气APP，功能齐全、适配鸿蒙、代码规范、可直接编译安装、适合课程设计、毕设、个人实战项目直接使用。