【鸿蒙ArkUI】天气App开发实践——动态主题与数据可视化实现

一、技术背景1.1 项目概述天气应用是移动端常见应用类型之一。本项目实现以下功能功能模块技术要点实时天气展示状态绑定、数据驱动动态主题切换条件渐变背景生活指数展示Builder组件复用逐小时/7日预报列表渲染、数据生成城市切换模态弹窗、状态联动1.2 技术栈框架ArkUI语言ArkTS模型Stage Model工具DevEco Studio二、数据模型设计2.1 接口定义// 天气主数据interfaceWeatherInfo{city:stringtemp:numbercond:stringhumid:numberwind:stringuv:stringhigh:numberlow:numberaqi:numberaqiDesc:string}// 小时预报interfaceHourlyItem{time:stringtemp:numbericon:string}// 日预报interfaceDailyItem{day:stringdate:stringicon:stringhigh:numberlow:numberdesc:string}2.2 数据源项目采用本地模拟数据支持8个城市privatereadonlyCITIES:string[][北京市,上海市,广州市,深圳市,杭州市,成都市,武汉市,南京市]privatereadonlyWEATHER_DATA:WeatherInfo[][{city:北京市,temp:26,cond:晴,humid:45,wind:3级,uv:中等,high:30,low:18,aqi:72,aqiDesc:良},{city:上海市,temp:24,cond:多云,humid:62,wind:4级,uv:中等,high:27,low:20,aqi:55,aqiDesc:良},{city:广州市,temp:31,cond:雷阵雨,humid:78,wind:3级,uv:强,high:33,low:25,aqi:38,aqiDesc:优},// ... 其他城市数据]三、状态管理3.1 状态变量定义EntryComponentstruct Index{// 基础天气信息Statelocation:string北京市StatecurrentTemp:number26StatecurrentCondition:string晴// 生活指数StatecurrentHumidity:number45StatecurrentWind:string3级StatecurrentUV:string中等// 温度范围StatecurrentHigh:number30StatecurrentLow:number18// 空气质量StatecurrentAQI:number72StatecurrentAQIDesc:string良// UI状态StateshowCityPicker:booleanfalse// 预报数据StatehourlyData:HourlyItem[]StatedailyData:DailyItem[]}3.2 状态联动机制城市切换时所有状态同步更新privateswitchCity(city:string):void{constdatathis.getWeatherByCity(city)// 批量状态更新this.locationcitythis.currentTempdata.tempthis.currentConditiondata.condthis.currentHumiditydata.humidthis.currentWinddata.windthis.currentUVdata.uvthis.currentHighdata.highthis.currentLowdata.lowthis.currentAQIdata.aqithis.currentAQIDescdata.aqiDesc// 重新生成预报数据this.hourlyDatathis.generateHourlyData(data.cond,data.temp)this.dailyDatathis.generateDailyData(data.cond,data.high,data.low)// 关闭弹窗this.showCityPickerfalse}四、核心实现4.1 动态渐变背景根据天气状况动态计算渐变色privategetBgGradient(cond:string):string{constgradientMap:Recordstring,string{晴:#FF9F0A,多云:#8E8E93,阴:#8E8E93,小雨:#5AC8FA,阵雨:#5AC8FA,雷阵雨:#5AC8FA}returngradientMap[cond]||#4A90D9}privategetBgEnd(cond:string):string{constendMap:Recordstring,string{晴:#FFD60A,多云:#636366,阴:#636366,小雨:#007AFF,阵雨:#007AFF,雷阵雨:#007AFF}returnendMap[cond]||#87CEEB}应用渐变Column(){// ...}.linearGradient({direction:GradientDirection.Bottom,colors:[[this.getBgGradient(this.currentCondition),0],[this.getBgEnd(this.currentCondition),1]]})主题效果天气起始色结束色视觉效果晴#FF9F0A#FFD60A温暖明亮多云/阴#8E8E93#636366沉稳内敛雨#5AC8FA#007AFF清新凉爽4.2 温度条可视化温度条宽度与颜色根据温度动态计算// 宽度计算基于温差privatetempBarWidth(low:number,high:number):string{constdiffhigh-lowconstwidthMath.floor((diff/20)*10020)returnwidth%}// 颜色计算基于平均温度privatetempBarColor(low:number,high:number):string{constavg(lowhigh)/2if(avg28)return#FF3B30// 红色-热if(avg20)return#FF9F0A// 橙色-温return#34C759// 绿色-凉}4.3 数据生成算法逐小时预报privategenerateHourlyData(cond:string,baseTemp:number):HourlyItem[]{consttimes[现在,15:00,18:00,21:00,00:00,03:00,06:00,09:00]consticons[,,️,☀️,☀️,☀️,️,]returntimes.map((time,i)({time,temp:i0?baseTemp:baseTempMath.floor(Math.random()*6)-3,icon:icons[i]}))}7日预报privategenerateDailyData(cond:string,high:number,low:number):DailyItem[]{constdays[今天,明天,周三,周四,周五,周六,周日]consticons[☀️,⛅,️,☁️,☀️,☀️,⛅]constdescs[晴,多云,小雨,阴,晴,晴,多云]returndays.map((day,i)({day,date:6月(i1)日,icon:icons[i],high:highMath.floor(Math.random()*6)-3,low:lowMath.floor(Math.random()*4)-2,desc:descs[i]}))}五、组件封装5.1 Builder装饰器Builder用于封装可复用的UI描述支持参数传递。5.2 信息卡片组件BuildercompactCard(icon:string,value:string,desc:string,color:string){Column(){Text(icon).fontSize(20)Text(value).fontSize(16).fontWeight(FontWeight.Bold).fontColor(Color.White).margin({top:6})if(desc.length0){Text(desc).fontSize(12).fontColor(color).margin({top:2})}}.layoutWeight(1).padding({top:10,bottom:10}).alignItems(HorizontalAlign.Center)}5.3 小时预报项组件BuilderhourlyItem(item:HourlyItem){Column(){Text(item.time).fontSize(12).fontColor(#8E8E93)Text(item.icon).fontSize(22).margin({top:6})Text(String(item.temp)°).fontSize(15).fontWeight(FontWeight.Medium).fontColor(Color.White).margin({top:6})}.padding({left:10,right:10}).alignItems(HorizontalAlign.Center)}5.4 日预报行组件BuilderdailyRow(item:DailyItem){Row(){Text(item.day).fontSize(15).fontColor(Color.White).width(48)Text(item.icon).fontSize(18).width(30)Text(item.desc).fontSize(14).fontColor(#8E8E93).width(36)Blank()Text(String(item.low)°).fontSize(14).fontColor(#8E8E93).width(32).textAlign(TextAlign.End)// 温度条容器Column(){Column().width(this.tempBarWidth(item.low,item.high)).height(6).borderRadius(3).backgroundColor(this.tempBarColor(item.low,item.high))}.width(60).height(6).backgroundColor(#333333).borderRadius(3).margin({left:4,right:4})Text(String(item.high)°).fontSize(14).fontColor(Color.White).width(32).textAlign(TextAlign.End)}.width(100%).padding({left:16,right:16,top:6,bottom:6})}5.5 城市按钮组件BuildercityButton(city:string){Button(city).fontSize(14).fontWeight(FontWeight.Medium).height(44).borderRadius(22).backgroundColor(this.locationcity?#FF9F0A:#2C2C2E).fontColor(this.locationcity?Color.White:#8E8E93).layoutWeight(1).margin({left:4,right:4}).onClick(()this.switchCity(city))}六、页面布局6.1 布局结构Stack ├── Scroll (主内容) │ └── Column │ ├── Column (天气展示区 - 渐变背景) │ ├── Row (信息卡片) │ ├── Column (逐小时预报) │ ├── Column (7天预报) │ └── Text (更新时间) └── Column (城市选择弹窗 - 条件渲染)6.2 模态弹窗实现if(this.showCityPicker){Column(){Column(){Text(选择城市).fontSize(20).fontWeight(FontWeight.Bold).fontColor(Color.White).margin({top:20,bottom:16})Row(){this.cityButton(this.CITIES[0])this.cityButton(this.CITIES[1])this.cityButton(this.CITIES[2])this.cityButton(this.CITIES[3])}.width(100%).padding({left:12,right:12})Row(){this.cityButton(this.CITIES[4])this.cityButton(this.CITIES[5])this.cityButton(this.CITIES[6])this.cityButton(this.CITIES[7])}.width(100%).padding({left:12,right:12}).margin({top:8})Button(取消).fontSize(16).fontColor(#FF9F0A).backgroundColor(#2C2C2E).width(90%).height(44).borderRadius(22).margin({top:16,bottom:20}).onClick(()this.showCityPickerfalse)}.width(85%).backgroundColor(#1C1C1E).borderRadius(20)}.width(100%).height(100%).backgroundColor(#80000000).justifyContent(FlexAlign.Center).onClick(()this.showCityPickerfalse)}七、运行验证7.1 构建命令# DevEco Studio菜单BuildBuild Hap(s)/APP(s)Build Hap(s)7.2 运行效果八、技术要点总结技术点实现方式状态驱动State装饰器组件复用Builder装饰器动态主题条件渐变背景温度可视化动态宽度颜色计算模态弹窗Stack叠加条件渲染数据生成随机算法基准值偏移九、扩展方向扩展项技术方案真实APIHTTP请求 JSON解析地理定位ohos.geoLocationManager数据缓存ohos.data.preferences天气动画Canvas / Lottie下拉刷新Refresh组件十、结语本文详细讲解了鸿蒙天气App的实现过程涵盖动态主题、数据可视化、组件封装等核心内容。通过本项目可快速掌握ArkUI声明式开发的核心范式。参考资料ArkUI开发指南HarmonyOS应用开发文档