1# 一多天气 2 3### 介绍 4 5本示例展示一个天气应用界面，包括首页、城市管理、添加城市、更新时间弹窗，体现一次开发，多端部署的能力。 6 71.本示例参考[一次开发，多端部署](https://gitee.com/openharmony/docs/tree/master/zh-cn/application-dev/key-features/multi-device-app-dev)的指导，主要使用响应式布局的栅格断点系统实现在不同尺寸窗口界面上不同的显示效果。 8 92.使用[SideBarContainer](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-sidebarcontainer.md)实现侧边栏功能。 10 113.使用[栅格容器组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-gridrow.md)实现界面内容的分割和展示。 12 134.使用Canvas和CanvasRenderingContext2D完成空气质量和日出月落图的曲线绘制。 14 15 16### 效果预览 17 18| 首页 | 19|--------------------------------------| 20|| 21 22使用说明： 23 241.启动应用后，首页展示已添加城市的天气信息，默认展示2个城市，左右滑动可以切换城市，在LG设备上，默认显示侧边栏，侧边栏显示时，右侧内容区占2/3，侧边栏隐藏时，内容区自动铺满界面。 25 262.在支持窗口自由拖拽的设备上，拖拽窗口大小，可以分别实现拖动到最大窗口侧边栏显示（点击侧边栏控制按钮可以隐藏和显示侧边栏），拖动窗口缩小到MD大小时侧边栏和侧边栏控制按钮隐藏。 27 283.在支持窗口自由拖拽的设备上，拖拽窗口大小，天气内容区跟随窗口大小会自动换行显示。 29 304.点击右上角菜单按钮，在菜单中点击**更新时间**，弹出更新时间弹窗，没有功能，此处只做展示，在平板设备上显示2列，在小屏设备上显示一列。 31 325.点击右上角菜单按钮，在菜单中点击**管理城市**，进入管理城市界面，展示已添加的城市，在平板设备上显示2列，在小屏设备上显示一列。 33 346.点击管理城市界面的**添加城市**，进入添加城市界面，已添加的城市不可点击，未添加的城市点击可以添加并返回管理城市界面显示。 35 36### 工程目录 37``` 38/code/SuperFeature/MultiDeviceAppDev/Weather/product/default 39└─src 40 ├─main 41 │ │ 42 │ ├─ets 43 │ │ ├─Application 44 │ │ │ MyAbilityStage.ts //自定义ability 45 │ │ │ 46 │ │ ├─common //公共资源库 47 │ │ ├─feature 48 │ │ │ AirQualityFeature.ts //空气绘画 49 │ │ │ SunCanvasFeature.ts //晴天绘画 50 │ │ │ 51 │ │ ├─MainAbility 52 │ │ │ MainAbility.ts //主窗口 53 │ │ │ 54 │ │ └─pages 55 │ │ │ AddCity.ets //添加城市 56 │ │ │ CityList.ets //城市列表 57 │ │ │ Home.ets //入口 58 │ │ │ 59 │ │ └─home 60 │ │ AirQuality.ets //空气质量 61 │ │ HomeContent.ets //主页面 62 │ │ HoursWeather.ets //每小时天气组件 63 │ │ IndexEnd.ets //首页尾 64 │ │ IndexHeader.ets //首页头 65 │ │ IndexTitleBar.ets //首页标题 66 │ │ LifeIndex.ets //生活建议 67 │ │ MultidayWeather.ets //天气组件 68 │ │ SideContent.ets //侧边栏 69 │ │ SunCanvas.ets //晴天样式 70 │ │ UpdateTimeDialog.ets //时间更新弹窗 71 │ │ 72 │ └─resources //资源包 73``` 74 75### 具体实现 761、home.ets中引入SideContent()和homeContent()。 772、定义showSideBar来判断是否展示侧边栏，定义mediaquery.MediaQueryListener媒体监听器smListener、mdListener、lgListener。 783、在aboutToAppear调用mediaquery对界面进行监听,[源码参考](product/default/src/main/ets/pages/Home.ets )。 794、监听到当前屏幕大小，调用this.isBreakpoint断点，对curBp、showSideBar进行赋值,[源码参考](product/default/src/main/ets/pages/Home.ets )。 80 81### 相关权限 82 83不涉及。 84 85### 依赖 86 87不涉及。 88 89### 约束与限制 90 911.本示例仅支持标准系统上运行。 92 932.本示例已适配API version 9版本SDK，版本号：3.2.11.9。 94 953.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可编译运行。 96 97### 下载 98 99如需单独下载本工程，执行如下命令： 100``` 101git init 102git config core.sparsecheckout true 103echo code/SuperFeature/MultiDeviceAppDev/Weather/ > .git/info/sparse-checkout 104git remote add origin https://gitee.com/openharmony/applications_app_samples.git 105git pull origin master 106```
