Flutter for OpenHarmony 天气应用实战DAY7：多城市收藏管理+天气分享功能+代码重构精简

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

大家好，咱们Flutter适配开源鸿蒙天气APP实战来到DAY7进阶拓展篇！前面DAY1到DAY6我们已经做完了基础天气展示、七日预报、空气质量、昼夜主题、城市搜索、天气预警、性能优化、启动页、异常兜底、桌面小组件、离线缓存和全局主题封装，项目已经非常成熟完整。

今天DAY7我们继续做功能拓展和代码深度重构，重点实现多城市收藏管理、天气一键分享功能、冗余代码精简重构、常量统一抽取，让项目更贴近商用级APP体验，同时代码更干净、更易维护。

🚀 本期开发目标

1. 实现多城市收藏功能，支持添加、删除、切换收藏城市
2. 开发天气一键分享功能，支持文字分享到鸿蒙社交应用
3. 全局常量抽取，统一管理颜色、文案、接口地址
4. 重构冗余页面代码，抽取公共组件，减少代码重复
5. 优化收藏城市左右滑动切换，交互更丝滑

全程保持和前六天一模一样的写作风格，口语化讲解，每处功能搭配5~6行核心代码，结构完全对齐往期文章。

📦 第一步：多城市收藏数据结构设计

想要收藏多个城市，首先要定义收藏城市列表结构，用本地存储持久化保存，重启APP收藏列表不丢失。

List<String> collectCityList = [];

Future<void> addCollectCity(String cityName) async {
  collectCityList.add(cityName);
  await saveCollectToLocal();
  notifyListeners();
}

逻辑很简单，添加城市后立刻保存到本地，同时通知UI刷新，收藏列表实时更新，鸿蒙端操作无延迟。

❌ 第二步：收藏城市删除与去重逻辑

避免重复添加同一个城市，同时支持长按或者点击删除收藏城市，操作更人性化。

bool isCityCollected(String name) {
  return collectCityList.contains(name);
}

void removeCollectCity(String name) {
  collectCityList.remove(name);
  saveCollectToLocal();
  notifyListeners();
}

先判断是否已收藏，防止重复添加，删除后同步更新本地存储和页面UI，整个流程闭环完整。

📱 第三步：收藏城市横向滑动切换布局

把收藏的多个城市做成横向滑动卡片，左右滑动就能切换不同城市天气，不用手动搜索，体验拉满。

ListView(
  scrollDirection: Axis.horizontal,
  children: collectCityList.map((item){
    return CityCardItem(cityName: item);
  }).toList(),
)

用原生横向ListView实现，不用第三方库，在OpenHarmony手机、平板上滑动流畅不卡顿，适配多尺寸屏幕。

📤 第四步：实现天气一键分享功能

做商用APP必备功能，把当前城市、温度、天气状况整理成文案，一键分享给好友，适配鸿蒙系统分享面板。

void shareWeatherInfo(WeatherModel weather) async {
  String shareText = "当前${weather.city}：${weather.temp}° ${weather.weatherText}";
  await Share.share(shareText);
}

几行代码搞定分享功能，调用系统原生分享弹窗，自动唤起微信、QQ、鸿蒙笔记等应用，兼容性极好。

📋 第五步：全局常量类统一抽取

之前接口地址、颜色值、提示文案散落在各个页面，不好维护。今天全部抽离到常量类，一处修改全局生效。

class AppConst {
  static const String baseUrl = "https://api.open-meteo.com/v1";
  static const String netErrorText = "网络异常，请检查网络后重试";
  static const double cardRadius = 20;
}

后续改接口域名、改卡片圆角、改提示文字，只改这一个文件就行，不用翻遍整个项目，极大提升维护效率。

🔧 第六步：公共组件抽取与代码重构

把天气卡片、加载组件、错误提示组件全部抽成独立公共Widget，各个页面直接复用，减少大量重复代码。

Widget buildWeatherCard(WeatherModel weather) {
  return Container(
    borderRadius: BorderRadius.circular(AppConst.cardRadius),
    child: Column(children: [Text(weather.city), Text("${weather.temp}°")]),
  );
}

首页、收藏页、预报页都可以直接调用这个组件，UI样式完全统一，后期改样式只改公共组件即可。

✅ DAY7 真机运行效果实测

1. 支持随意添加、删除收藏城市，自动去重，重启APP收藏列表不丢失；
2. 收藏城市横向左右滑动切换，页面切换流畅无卡顿；
3. 点击分享按钮自动唤起鸿蒙系统分享面板，天气文案一键分享；
4. 全局常量统一管理，接口、文案、样式参数集中维护；
5. 公共组件抽取完成，项目代码量减少，结构更清晰整洁。

🎯 DAY7 知识点总结 & DAY8预告

本节核心知识点

1. 多城市收藏列表设计、本地持久化存储、增删改查逻辑封装；
2. Flutter横向滑动列表实现多城市快速切换交互；
3. 调用系统原生分享能力，实现鸿蒙端天气内容一键分享；
4. 项目全局常量抽取、公共组件封装，大型项目代码重构思路；
5. 业务逻辑与UI视图解耦，提升项目可扩展性和可维护性。

下一节DAY8预告

DAY8我们将做项目完整打包优化、代码混淆、体积压缩、鸿蒙应用上架资质配置、全套源码整理归档，把整个系列项目做成可以直接提交毕设、课程设计、开源发布的完整成品。