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

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

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

20241218_220213.gif


关键词
  • 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)
  }
}

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

20241218_220213.gif


五、代码解读

  1. 城市选择功能

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

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

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

六、优化建议

  1. 支持动态数据源

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

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

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

七、效果展示

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

八、相关知识点


小结

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


下一篇预告

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


上一篇: 「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具

下一篇: 「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台


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


目录
相关文章
|
6天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
135 89
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
1月前
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
本篇教程将介绍如何创建一个模拟记账应用,通过账单输入、动态列表展示和实时统计功能,学习接口定义和组件间的数据交互。
167 68
|
21天前
|
人工智能 自然语言处理 API
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
UI-TARS Desktop 是一款基于视觉语言模型的 GUI 代理应用,支持通过自然语言控制电脑操作,提供跨平台支持、实时反馈和精准的鼠标键盘控制。
461 17
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
|
1月前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
69 13
|
1月前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
68 10
|
2月前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件50」UI互动应用篇27 - 水果掉落小游戏
本篇教程将带你实现一个水果掉落小游戏,掌握基本的动态交互逻辑和鸿蒙组件的使用,进一步了解事件处理与状态管理。
59 14
|
JavaScript Java API
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
420 0
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
|
1月前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
103 47
Harmony OS开发-ArkTS语言速成二
|
2月前
|
索引 API
鸿蒙开发:自定义一个股票代码选择键盘
金融类的软件,特别是股票基金类的应用,在查找股票的时候,都会有一个区别于正常键盘的键盘,也就是股票代码键盘,和普通键盘的区别就是,除了常见的数字之外,也有一些常见的股票代码前缀按钮,方便在查找股票的时候,更加方便的进行检索。
鸿蒙开发:自定义一个股票代码选择键盘
|
2月前
|
API
鸿蒙开发:自定义一个英文键盘
实现方式呢,有很多种,目前采用了比较简单的一种,如果大家采用网格Grid组件实现方式,也是可以的,但是需要考虑每行的边距以及数据,还有最后两行的格子占位问题。
鸿蒙开发:自定义一个英文键盘