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

news2024/12/23 5:48:10

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

在这里插入图片描述


关键词
  • 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.coloradmin.cn/o/2264083.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Pytorch | 从零构建MobileNet对CIFAR10进行分类

Pytorch | 从零构建MobileNet对CIFAR10进行分类 CIFAR10数据集MobileNet设计理念网络结构技术优势应用领域 MobileNet结构代码详解结构代码代码详解DepthwiseSeparableConv 类初始化方法前向传播 forward 方法 MobileNet 类初始化方法前向传播 forward 方法 训练过程和测试结果…

支付域——清结算系统体系

摘要 本文深入探讨了支付清算的基础知识和跨机构清算原理,涵盖了组织、账户、支付工具和系统的基础,支付流程的模型,以及支付清算的全局实现。文章还详细介绍了支付机构的五大业务和支付系统的总架构,并通过案例分析了支付清算的…

javaEE-线程的常用方法-4

目录 一.start():启动一个线程 调用start()方法 start()方法只能调用一次: java中的API: start()和run()的区别: 二.中断一个线程 中断线程方法1:引入标志位 中断线程方法2:调⽤interrupt()⽅法 抛出的异常: 三.等待一个线程 join() 四、获取线程引用 五…

uniapp小案例---趣味打字坤

当点击输入框时出现小鸡打字 当输入框失焦时打字鸡沉下去 原图自取 这里运用了一个三元 :class"isActive?active:"&#xff0c;当聚焦时isActivetrue从而让class绑定&#xff0c;当失焦时isActivefalse <template><view class"out"><inp…

JS使用random随机数实现简单的四则算数验证

1.效果图 2.代码实现 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</ti…

vue3项目结合Echarts实现甘特图(可拖拽、选中等操作)

效果图&#xff1a; 图一&#xff1a;选中操作 图二&#xff1a;上下左右拖拽操作 本案例在echarts​​​​​​​示例机场航班甘特图的基础上修改​​​​​​​ 封装ganttEcharts组件&#xff0c;测试数据 airport-schedule.jsonganttEcharts代码: 直接复制粘贴可测​​​​…

【已解决】黑马点评项目jmeter高并发测试中用户数据的生成

具体实现见此篇文章的第3章 运行 test 程序后&#xff0c;生成以下用户名 以下文件名改成自己的地址 成功

VScode 查看linux 内核代码

0&#xff0c;安装c.c 1&#xff0c;查看linux 目录下的linux代码&#xff0c;安装remote ssh 2&#xff0c; 输入服务器IP 3 选择服务器为linux

【游戏设计原理】21 - 解谜游戏的设计

你想象一下&#xff0c;刚坐下准备玩游戏&#xff0c;想着“今天得挑战一下我的智商极限&#xff01;”可结果碰上一个谜题&#xff0c;傻眼了&#xff0c;心里默念&#xff1a;“这啥玩意儿&#xff1f;这游戏是在玩我吗&#xff1f;”如果这个谜题太简单了&#xff0c;你可能…

解析交通事故报告:利用 PDF、AI 与数据标准化技术构建智能分析系统

在交通事故处理中&#xff0c;数据的准确性与完整性至关重要。传统上&#xff0c;交通事故报告通常以 PDF 格式呈现&#xff0c;这使得手动提取数据成为一项繁琐且容易出错的任务。随着人工智能与数据处理技术的发展&#xff0c;如何自动化这一过程并提升数据质量&#xff0c;成…

基于Python+Vue开发的体育用品商城管理系统,实习作品,期末作业

项目简介 该项目是基于PythonVue开发的体育用品商城管理系统&#xff08;前后端分离&#xff09;&#xff0c;这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能&#xff0c;同时锻炼他们的项目设计与开发能力。通过学习基于Python的体…

7.C语言 宏(Macro) 宏定义,宏函数

目录 宏定义 宏函数 1.注释事项 2.注意事项 宏(Macro)用法 常量定义 简单函数实现 类型检查 条件编译 宏函数计算参数个数 宏定义进行类型转换 宏定义进行位操作 宏定义进行断言 总结 宏定义 #include "stdio.h" #include "string.h" #incl…

【LeetCode】906、超级回文数

【LeetCode】906、超级回文数 文章目录 一、通过数据量猜解法 枚举 数学 回文1.1 通过数据量猜解法 枚举 数学 回文1.2 多语言解法 二、打表法 一、通过数据量猜解法 枚举 数学 回文 1.1 通过数据量猜解法 枚举 数学 回文 减小数据规模: 先构成回文, 再平方, 再判断是否是范围…

SpringBoot的创建方式

SpringBoot创建的五种方式 1.通过Springboot官网链接下载 注意SpringBoot项目的封装方式默认为Jar 需要查看一下&#xff0c;自己的Maven版本是否正确 创建成功 2.通过 aliyun官网链接下载 修改服务路径为阿里云链接 创建成功 3.通过Springboot官网下载 点击&#xff0c;拉到最…

Android Studio AI助手---Gemini

从金丝雀频道下载最新版 Android Studio&#xff0c;以利用所有这些新功能&#xff0c;并继续阅读以了解新增内容。 Gemini 现在可以编写、重构和记录 Android 代码 Gemini 不仅仅是提供指导。它可以编辑您的代码&#xff0c;帮助您快速从原型转向实现&#xff0c;实现常见的…

物理信息神经网络(PINN)八课时教案

物理信息神经网络&#xff08;PINN&#xff09;八课时教案 第一课&#xff1a;物理信息神经网络概述 1.1 PINN的定义与背景 物理信息神经网络&#xff08;Physics-Informed Neural Networks&#xff0c;简称PINN&#xff09;是一种将物理定律融入神经网络训练过程中的先进方…

双臂机器人

目录 一、双臂机器人简介 二、双臂机器人系统的组成 三、双臂机器人面临的主要挑战 3.1 协调与协同控制问题 3.2 力控制与柔顺性问题 3.3 路径规划与轨迹优化问题 3.4 感知与环境交互 3.5 人机协作问题 3.6 能源与效率问题 3.7 稳定性与可靠性问题 四、双臂机器人…

日期区间选择器插件的操作流程

我们知道&#xff0c;在开发过程中&#xff0c;为了能够在规定时间内完成项目&#xff0c;有时候我们都会使用插件来大大提高我们的开发效率&#xff0c;有些插件是可以直接拿来用&#xff0c;但是有些插件拿过来之后是需要进行修改&#xff0c;在使用插件的时候还有很多的注意…

以ATTCK为例构建网络安全知识图

ATT&CK&#xff08;Adversarial Tactics, Techniques, and Common Knowledge &#xff09;是一个攻击行为知识库和模型&#xff0c;主要应用于评估攻防能力覆盖、APT情报分析、威胁狩猎及攻击模拟等领域。本文简单介绍ATT&CK相关的背景概念&#xff0c;并探讨通过ATT&a…

“年轻科技旗舰”爱玛A7 Plus正式发布,全国售价4999元

12月18日&#xff0c;备受行业瞩目的“A7上场 一路超神”爱玛旗舰新品发布会在爱玛台州智造工厂盛大举行。 作为年末“压轴产品”的“两轮豪华轿跑”爱玛A7Plus重磅上场&#xff0c;以“快、稳、帅、炫、智、爽”六大超神技惊艳四座&#xff0c;不仅践行了爱玛科技的精品战略&…