「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
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


目录
相关文章
|
4月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
133 15
|
4月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
118 11
|
3月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
97 4
|
4月前
|
开发者 容器
【HarmonyOS Next之旅】ArkTS语法(二) -> 动态构建UI元素
当开发者创建自定义组件,并想对该组件添加特定功能时(例如在自定义组件中添加一个点击跳转操作)。为解决此问题,引入了@BuilderParam装饰器,此装饰器修饰的属性值可为@Builder装饰的函数,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。@BuilderParam装饰器用于修饰自定义组件内函数类型的属性(例如:@BuilderParam noParam: () => void),并且在初始化自定义组件时被@BuilderParam修饰的属性必须赋值。
116 11
|
3月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
132 1
|
3月前
|
开发者 容器
二、探索HarmonyOS Next应用的入口:深度解析Index页面
Index.ets是HarmonyOS Next开发者手册应用的入口页面,它展示了应用的主要导航结构和用户界面设计。本文将深入分析这个文件的代码结构、UI组件使用以及路由实现,帮助开发者理解HarmonyOS应用的基本构建模式。
83 0
|
4月前
|
传感器 人工智能 JSON
鸿蒙5开发宝藏案例分享---应用接续提升内容发布体验
本文分享了鸿蒙应用接续功能的实战经验,帮助开发者实现跨设备流转。文章介绍了该功能的核心要点、开发条件及多个实战案例,如图文草稿跨设备接续、协同文档实时接续和社交通讯录接续,并提供了避坑指南与调试秘籍。通过动态压缩策略优化传输速度,结合AI能力提升体验。适合想了解鸿蒙跨设备开发的开发者参考学习。
|
3月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
159 56
|
3月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
179 55
|
4月前
|
JavaScript Java 开发工具
零基础用 DevEco Studio 打造你的首个 HarmonyOS 应用,开启鸿蒙生态的创新之旅,实现你的技术探索梦想
在鸿蒙生态蓬勃发展的当下,越来越多的开发者怀揣着热情与创意,渴望投身于HarmonyOS应用开发的浪潮之中。
零基础用 DevEco Studio 打造你的首个 HarmonyOS 应用,开启鸿蒙生态的创新之旅,实现你的技术探索梦想