Harmony鸿蒙实战开发项目-天气预报App【源码在文末】_鸿蒙天气预报
Harmony鸿蒙实战开发项目-天气预报App【源码在文末】
一、简介
运行截图
简述(人工智能生成)
根据上述截图,这是一款天气预报应用,功能简述如下:
1. 城市选择功能:
• 用户可以通过“添加城市”列表选择需要查看天气的城市。
• 支持多个城市的天气信息管理,已添加的城市会显示状态为“已添加”。
2. 天气信息展示:
• 展示当前所选城市的天气状况,包括:
• 天气类型(如晴、多云)。
• 温度范围。
• 风力等级(如南风、东风,1-3级)。
• 提供未来几天的天气预报,包括每天的最高气温和最低气温。
3. 删除功能:
• 用户可以删除已添加城市的天气信息,删除前会弹出确认对话框,避免误删。
4. 界面特点:
• 界面设计简洁,使用了卡通风格的天气图标(如太阳、云朵)。
• 蓝色背景提供清新的视觉效果。
• 操作按钮明确,如“添加”“删除”“完成”等。
总体来看,这款应用适合用户日常查看多个城市的天气信息,同时提供了简单的城市管理功能,便于操作。
部分源码
import getWeatherUtil from \"../viewmodel/WeatherUtilModel\"import { WeatherModel } from \"../viewmodel/WeatherModel\"import { cityView } from \'../view/cityView\'import router from \'@ohos.router\'@Entry@Componentstruct Index { //城市信息集合 @State cityWeatherList: Array = [] //城市名字集合 @State cityNameList: Array = [] //当前城市代码列表 @State cityCodeList: Array = [110000,120000] //当前tab组件索引 @State cityIndex: number = 0 //tab控制器 tabcontroller: TabsController = new TabsController() onPageShow() { let params = router.getParams() if (params) { this.cityCodeList = params[\"Codes\"] this.cityWeatherList = [] this.cityNameList = [] this.initData() } } //tarBar 自定义函数 @Builder tabBuild(index: number) { Circle({ width: 10, height: 10 }).fill(this.cityIndex === index ? Color.White : Color.Gray).opacity(0.4) } aboutToAppear() { this.initData() } async initData() { //所有数据的集合 let result :Array = await getWeatherUtil.getWeathers(this.cityCodeList) for (let i = 0; i { router.pushUrl({ url: \"pages/AddCity\", params: { Codes: this.cityCodeList, Names: this.cityNameList } }) }) Text(this.cityNameList[this.cityIndex]).fontSize(40).fontColor(Color.Orange) Button(\"删除\") .fontSize(25) .fontColor(Color.Gray) .opacity(0.7) .backgroundColor(\"#87CEEB\") .margin({ bottom: 15 }) .onClick(() => { AlertDialog.show({ title: \"删除\", message: `你确定要删除${this.cityNameList[this.cityIndex]}消息吗?`, confirm: { value: \"确定\", action: () => { this.cityNameList = this.cityNameList.filter(item => item !== this.cityNameList[this.cityIndex]) this.cityCodeList = this.cityCodeList.filter(item => item !== this.cityCodeList[this.cityIndex]) this.cityWeatherList = this.cityWeatherList.filter(item => item !== this.cityWeatherList[this.cityIndex]) } } }) }) }.height(\"10%\") .width(\"100%\") .justifyContent(FlexAlign.SpaceBetween) //城市切换 Tabs({ barPosition: BarPosition.Start, controller: this.tabcontroller }) { ForEach(this.cityWeatherList, (cityWeatherList: WeatherModel) => { TabContent() { cityView({ casts: cityWeatherList.forecasts[0].casts }) }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj => obj === cityWeatherList))) }) } .barHeight(20) .barWidth(40) .onChange((index: number) => { this.cityIndex = index }) }.backgroundColor(\"#87CEEB\") .width(\"100%\").height(\"100%\") }}
二、源码
相关鸿蒙项目点此专栏
部分内容来源于网络🛜,若有侵权及时联系我,收到后会及时删除
通过百度网盘分享的文件:…zip 链接:百度网盘 请输入提取码
文件已经加密,请点击下方名片获取源码
或:Lvnvn0508