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

Flutter for OpenHarmony 天气应用实战DAY3空气质量展示昼夜主题切换欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net大家好咱们的Flutter鸿蒙天气APP实战系列来到DAY3啦承接上一节DAY2的内容我们已经完成了天气图标渲染、7日预报横向布局还修复了加载空白、网络异常的问题现在APP已经有了基础的美观度和实用性。但一款贴心的天气APP光有温度和预报还不够——现在大家越来越关注空气质量而且白天看浅色界面、晚上看深色界面才更护眼。今天DAY3我们就基于之前的项目基础继续迭代升级全程不新增复杂依赖口语化讲解代码精简好懂无缝衔接前两期内容跟着做就能搞定 本期开发目标基于DAY1、DAY2的项目架构继续优化功能、提升体验核心实现以下5点完全贴合鸿蒙系统原生风格新增空气质量模块展示AQI指数、PM2.5、PM10数据附带污染等级提示实现昼夜自动切换主题白天浅色、夜晚深色适配鸿蒙系统亮度感应封装全局网络拦截器统一处理超时、接口报错、请求loading状态规范化项目目录结构实现数据、UI、工具类分层方便后续维护和扩展优化交互细节新增空气质量预警提示、主题切换过渡动画提升鸿蒙端体验整体依旧沿用dio鸿蒙定位插件Provider状态管理三件套不新增复杂第三方库保证项目轻量化适配开源鸿蒙系统运行特性避免兼容性报错。 第一步升级网络请求封装全局拦截器DAY1我们简单封装了dio请求但没有统一的异常处理和loading管理每次请求都要重复写try-catch很麻烦。今天我们封装一个全局dio拦截器统一处理请求前、请求中、请求后的逻辑减少重复代码也让鸿蒙端的网络请求更稳定。核心作用请求前显示loading、请求超时/失败统一提示、请求成功自动解析数据不用再重复写冗余代码。全局dio拦截器核心代码// 初始化dio并添加拦截器DioinitDio(){DiodioDio();dio.interceptors.add(InterceptorsWrapper(onRequest:(options,handler)handler.next(options),// 请求前操作onResponse:(response,handler)handler.next(response),// 响应成功onError:(DioExceptione,handler){// 错误统一处理debugPrint(请求失败${e.message});handler.reject(e);}));returndio;}代码超简单只有6行却能解决大问题后续所有网络请求都用这个初始化好的dio不管是天气请求还是空气质量请求都能统一处理异常鸿蒙端不会出现因网络问题导致的APP崩溃。️ 第二步新增空气质量模块解析AQI数据我们在DAY1的天气接口基础上新增空气质量相关参数获取AQI空气质量指数、PM2.5、PM10数值然后根据数值判断污染等级优、良、轻度污染等用不同颜色标注让用户一眼看清空气质量。首先修改天气模型新增空气质量相关字段然后修改请求接口添加空气质量参数最后封装污染等级判断方法。1. 新增空气质量模型字段核心代码classWeatherModel{finaldouble aqi;// 空气质量指数finaldouble pm25;// PM2.5finaldouble pm10;// PM10// 其他原有字段温度、天气编码等...WeatherModel({requiredthis.aqi,requiredthis.pm25,requiredthis.pm10,...});}2. 污染等级判断工具方法StringgetAqiLevel(double aqi){if(50)return优;100)return良;if150)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状态管理维护主题状态实现全局主题同步切换时添加过渡动画避免生硬跳转。主题状态管理核心代码classThemeProviderextendsChangeNotifier{bool _isDarkModefalse;boolgetisDarkMode_isDarkMode;// 检查当前时间判断是否开启深色模式voidcheckDarkMode(){int hourDateTime.now().hour;_isDarkModehour6;notifyListeners();// 通知UI更新}}只需5行代码就能实现昼夜自动切换在APP启动时调用checkDarkMode()方法后续每小时可以重新检查一次确保主题同步更新。切换时整个APP的背景色、文字色、卡片色都会自动适配鸿蒙端体验丝滑。 第五步规范化项目目录结构前两期我们的代码都集中在几个文件里随着功能增多会越来越难维护。今天我们按照Flutter规范结合鸿蒙跨平台开发习惯拆分项目目录实现分层管理让代码更清晰、更易扩展。鸿蒙天气APP目录结构核心lib/ ├─ api/ // 网络请求相关dio拦截器、接口封装 ├─ model/ // 数据模型天气、空气质量模型 ├─ provider/ // 状态管理天气、主题、加载状态 ├─ ui/ // UI组件天气卡片、预报列表、空气质量卡片 ├─ utils/ // 工具类天气解析、AQI等级、日期处理 └─ main.dart // 入口文件这样拆分后每个文件夹负责特定功能后续新增功能比如城市搜索、桌面小组件直接在对应文件夹下新增文件即可不会混乱也方便其他开发者协作符合鸿蒙跨平台项目的开发规范。✅ DAY3 真机运行效果实测APP启动后自动检查主题模式白天显示浅色、夜晚显示深色过渡流畅无卡顿定位加载完成后自动展示当前城市天气图标、温度、天气中文描述实时天气卡片下方新增空气质量模块AQI、PM2.5数据清晰污染等级颜色标注明显网络请求失败时会统一提示错误不会出现空白页面目录结构清晰代码可维护性提升适配鸿蒙手机、平板多尺寸设备主题切换时所有页面同步更新无错乱、无闪退符合鸿蒙系统交互规范。 DAY3 知识点总结 DAY4 预告本节核心知识点Flutter本地静态资源配置与鸿蒙端资源适配规则工具类封装思想实现业务数据与UI视图解耦横向滑动列表快速实现多组件组合布局技巧加载状态管理、异常捕获提升鸿蒙端应用稳定性。下一节DAY4预告下一篇DAY4我们将继续升级这款鸿蒙天气APP实现更实用的功能新增城市搜索功能支持手动切换城市保存常用城市实现天气预警功能暴雨、大风、高温等预警自动弹窗提示优化主题切换支持手动切换浅色/深色模式记忆用户偏好测试鸿蒙端性能优化卡顿、内存占用问题为上架做准备。持续跟进Flutter for OpenHarmony跨平台实战系列从零到一完整开发一款可上架的鸿蒙原生风格天气APP适合练手、课程设计、项目实战学习。