当前位置：首页 > news >正文

「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件

news 2024/12/23 23:10:18

本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息，页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。

在这里插入图片描述

关键词

UI互动应用
天气预报
数据绑定
动态展示
状态管理

一、功能说明

自定义天气预报组件通过静态数据模拟天气服务，用户可以选择城市，并实时显示该城市的天气信息，包括天气图标、温度及文字描述。

二、所需组件

@Entry 和 @Component 装饰器
Column 和 Row 布局组件
Text 组件用于显示天气信息
Button 组件用于城市选择
@State 修饰符用于状态管理
Image 组件用于展示天气图标

三、项目结构

项目名称：WeatherForecastApp
自定义组件名称：WeatherForecastPage
代码文件：WeatherForecastPage.ets、Index.ets

四、代码实现

// 文件名：WeatherForecastPage.ets@Component
export struct WeatherForecastPage {@State selectedCity: string = '北京'; // 默认城市@State weatherIcon: string = 'app.media.sunny';@State temperature: string = '25°C';@State description: string = '晴天';// 更新天气信息updateWeather() {if (this.selectedCity === '北京') {this.weatherIcon = 'app.media.sunny';this.temperature = '25°C';this.description = '晴天';} else if (this.selectedCity === '上海') {this.weatherIcon = 'app.media.rainy';this.temperature = '18°C';this.description = '小雨';} else if (this.selectedCity === '广州') {this.weatherIcon = 'app.media.cloudy';this.temperature = '28°C';this.description = '多云';}}build() {Column({ space: 20 }) {Text('请选择城市：').fontSize(20).alignSelf(ItemAlign.Start);// 城市按钮Button('北京').onClick(() => {this.selectedCity = '北京'; // 设置选择的城市this.updateWeather(); // 更新天气信息});Button('上海').onClick(() => {this.selectedCity = '上海';this.updateWeather();});Button('广州').onClick(() => {this.selectedCity = '广州';this.updateWeather();});// 展示天气信息Column({ space: 10 }) {Image($r(this.weatherIcon)) // 动态显示天气图标.width(100).height(100).alignSelf(ItemAlign.Center);Text(`${this.selectedCity} - ${this.temperature}`).fontSize(24).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);Text(this.description).fontSize(18).alignSelf(ItemAlign.Center);}}.padding(20).width('100%').height('100%');}
}

// 文件名：Index.etsimport { WeatherForecastPage } from './WeatherForecastPage';@Entry
@Component
struct Index {build() {Column() {WeatherForecastPage() // 调用天气预报页面}.padding(20)}
}