当前位置: 首页 > article >正文

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

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

在这里插入图片描述


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

一、功能说明

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


二、所需组件
  • @Entry@Component 装饰器
  • ColumnRow 布局组件
  • Text 组件用于显示天气信息
  • Button 组件用于城市选择
  • @State 修饰符用于状态管理
  • Image 组件用于展示天气图标

三、项目结构
  • 项目名称WeatherForecastApp
  • 自定义组件名称WeatherForecastPage
  • 代码文件WeatherForecastPage.etsIndex.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.ets

import { WeatherForecastPage } from './WeatherForecastPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      WeatherForecastPage() // 调用天气预报页面
    }
    .padding(20)
  }
}

效果示例:用户可以通过点击城市按钮(如北京、上海、广州)实时查看该城市的天气图标、温度及描述。

在这里插入图片描述


五、代码解读
  1. 城市选择功能

    • 通过 Button 组件创建多个城市选择按钮,用户点击按钮后会更新显示该城市的天气信息。
  2. 状态管理

    • 使用 @State 修饰符管理当前选择的城市、天气图标、温度和天气描述,实现动态更新。
  3. 天气信息展示

    • 使用 Image 组件动态显示天气图标,Text 组件展示城市、温度及天气描述。

六、优化建议
  1. 支持动态数据源

    • 可以通过后端接口动态获取天气信息,而不是使用静态数据。
  2. 添加更多天气数据

    • 可以扩展显示风速、湿度等天气信息,提供更全面的天气概览。
  3. UI美化

    • 增加背景色、渐变效果等,让界面更加丰富和美观。

七、效果展示
  • 城市选择:用户可以通过按钮选择不同城市,页面会实时更新显示该城市的天气信息。
  • 天气展示:显示当前城市的天气图标、温度和描述。

八、相关知识点
  • 「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件
  • 「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解

小结

通过自定义天气预报组件的实现,用户可以体验到基于静态数据的城市选择与天气展示功能。该应用适合用于天气展示及实时状态更新的场景。


下一篇预告

在下一篇「UI互动应用篇24 - 虚拟音乐控制台」中,我们将探讨如何实现一个虚拟音乐控制台,支持播放、暂停、切换歌曲等功能,为用户提供完整的音乐交互体验。


上一篇: 「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
下一篇: 「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台

作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=501
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



http://www.kler.cn/a/447700.html

相关文章:

  • 如何调大unity软件的字体
  • 代码加入SFTP JAVA ---(小白篇3)
  • 免费送源码:Java+ssm++MVC+HTML+CSS+MySQL springboot 社区医院信息管理系统的设计与实现 计算机毕业设计原创定制
  • Qt之串口设计-线程实现(十二)
  • Layui table不使用url属性结合laypage组件实现动态分页
  • 猫头虎分享:读孙凝晖院士《人工智能与智能计算的发展》有感
  • ORB-SLAM2源码学习:Tracking.cc:Tracking::NeedNewKeyFrame是否需要插入关键帧
  • Android settings命令详解
  • 科研笔记:CCS CONCEPTS
  • Spark和Hive的区别
  • 服务器上加入SFTP------(小白篇 1)
  • Bayes-GRU-Attention的数据多特征分类预测Matlab实现
  • 方正畅享全媒体新闻采编系统 screen.do SQL注入漏洞复现(附脚本)
  • 基于xiaothink对Wanyv-50M模型进行c-eval评估
  • 2024年企业中生成式 AI 的现状报告
  • wget -q -O
  • 数据结构 C/C++(实验七:排序)
  • macos 隐藏、加密磁盘、文件
  • Electric Capital 2024 年开发者报告 | 洞见未来 Web3 生态发展方向
  • 【C++——临时对象,const T】
  • Python 从入门到实战46(Matplotlib绘制常用表)
  • sentinel学习笔记1-为什么需要服务降级
  • JUC并发工具---阻塞队列
  • 加电:DETR论文阅读
  • 基于鲲鹏服务器的打砖块小游戏部署
  • 《开启微服务之旅:Spring Boot 从入门到实践》(二)