零基础开始学习鸿蒙开发-@State的使用以及定义

1.@State组件介绍

        首先定义  @State为鸿蒙开发的一个状态组件,当它修饰的组件发生改变时,UI也会相应的刷新,简单介绍就是这样,下面我们用代码去体会一下。

2.定义DeliverParam类

        首先定义一个模型类,类里面定义一个构造函数,即constructor方法,这个方法主要是初始化类的成员变量,给成变量赋值。

class DeliverParam {public value: string;constructor(value: string) {this.value = value;}
}

3.自定义MySate组件

        用于调用DeliverParam类,并且初始化成员变量value,并且用@state修饰count计数器,通过点击按钮来观察数值的变化。

@Component
struct MySate {@State title: DeliverParam = new DeliverParam('你好,小度');@State count: number = 0;private increaseBy: number = 1;build() {Column() {Text(`${this.title.value}`).margin(10)Button(`点击改变内容`).onClick(() => {// @State变量的更新将触发上面的Text组件内容更新this.title.value = this.title.value === '你好,小度' ? '我在' : '你好,小度';}).width(300).margin(10)Button(`点我数值增加 = ${this.count}`).onClick(() => {// @State变量的更新将触发该Button组件的内容更新this.count += this.increaseBy;}).width(300).margin(10).backgroundColor( Color.Orange)}}
}

4.定义入口类,调用MySate组件,监听被修饰的DeliverParam的成员value值和count值的变化。

@Entry
@Component
struct EntrySate {build() {Column() {// 此处指定的参数都将在初始渲染时覆盖本地定义的默认值,并不是所有的参数都需要从父组件初始化MySate({ count: 1, increaseBy: 2 }).width(300)// MyComponent({ title: new Model('Hello World 2'), count: 7 })}}
}

5.完整代码如下:

class DeliverParam {public value: string;constructor(value: string) {this.value = value;}
}@Entry
@Component
struct EntrySate {build() {Column() {// 此处指定的参数都将在初始渲染时覆盖本地定义的默认值,并不是所有的参数都需要从父组件初始化MySate({ count: 1, increaseBy: 2 }).width(300)// MyComponent({ title: new Model('Hello World 2'), count: 7 })}}
}@Component
struct MySate {@State title: DeliverParam = new DeliverParam('你好,小度');@State count: number = 0;private increaseBy: number = 1;build() {Column() {Text(`${this.title.value}`).margin(10)Button(`点击改变内容`).onClick(() => {// @State变量的更新将触发上面的Text组件内容更新this.title.value = this.title.value === '你好,小度' ? '我在' : '你好,小度';}).width(300).margin(10)Button(`点我数值增加 = ${this.count}`).onClick(() => {// @State变量的更新将触发该Button组件的内容更新this.count += this.increaseBy;}).width(300).margin(10).backgroundColor( Color.Orange)}}
}

6.总结:通过上述观察不难发现,@sate既可以绑定某个类,也可以绑定某个值,既可通过父类影响子类,也可以通过子类影响父类的变化。

7.下面是运行效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/27447.shtml

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

相关文章

UE4中性能优化工具合集

UE4中性能优化工具合集 简述CPUUnreal InsightUnreal ProfilerSimpleperfAndroid StudioPerfettoXCode TimeprofilerBest Practice GPUAdreno GPUMali GPUAndroid GPU Inspector (AGI) 内存堆内存分析Android StudioLoliProfilerUE5 Memory InsightsUnity Mono 内存MemreportRH…

【计算机视觉】人脸算法之图像处理基础知识(二)

图像处理基础知识(二) 1.图像的颜色空间转换 我们常见的图像通常由R(红色)、G(绿色)、B(蓝色)组成。但是在很多时候我们会将彩色图像转换成灰度图像进行处理。此时会用到cv2.cvtCo…

[大模型]Qwen2-7B-Instruct vLLM 部署调用

vLLM 简介 vLLM 框架是一个高效的大语言模型推理和部署服务系统,具备以下特性: 高效的内存管理:通过 PagedAttention 算法,vLLM 实现了对 KV 缓存的高效管理,减少了内存浪费,优化了模型的运行效率。高吞吐…

【Spring】Spring事务相关源码分析

目录: 1.讲述事务的一些基础概念。 2.讲述事务的生命周期源码 3.配置事务,以及事务注解的源码 1.前言 具体事务中Spring是怎么管理事务,怎么去管理、创建、销毁等操作的呢?这一次来分解一下。 2.事务概述(复习&a…

火绒安全删除explorer.exe文件造成windows系统异常的问题

问题 过程是这样的,电脑在使用过程中突然就变成了黑色的,任务栏、桌面等都消失了,只有部分程序的窗口。具体如下: 因为,在变化的时候,我有瞟到一眼有个火绒的气泡消息,就感觉是火绒错误的删除…

文件和文件系统:深入探讨

目录 1. 文件,记录和数据项 文件 记录 数据项 通过层次结构组织数据 2. 文件名和文件类型 文件名 常见的扩展名及其含义 扩展名的作用 示例 3. 文件系统的结构层次 根目录 子目录 文件 文件系统的层次结构的优势 4. 文件操作 总结 文件和文件系统是…

前端 JS 经典:Vite 分包配置

前言:在 Vite 项目中使用 npm run build 直接打包,打包后所有的静态文件都在 assets 文件中,js、css、图片等都放在一起看着很不舒服。我们可以通过配置 vite.config.js 来进行分包处理。打包机制底层是使用的 roolup,可以参考 ro…

@arco.design upload 已上传文件,点击删除 popconfirm 询问删除

实现 借助 upload 的 两个属性 on-before-remove 和 custom-icon custom-icon 官方给的例子是更换图标,这里借助 h 函数返回的 vnode const getCustomIcon () > {return {retryIcon: () > h(IconUpload),cancelIcon: () > h(IconClose),fileIcon: () …

四十五、openlayers官网示例Icon modification解析——在地图上添加标记图形并随意移动它的位置

官网demo地址: Icon modification 这篇讲了如何随意移动地图上的矢量点。 先在地图上添加一个矢量点,其中anchorXUnits 和 anchorYUnits: 指定锚点的单位。fraction 表示相对于图标的宽度(0到1之间),pixels 表示以像素…

kotlin runBlocking launch withContext async 使用

在 Kotlin 协程(Coroutines)中,runBlocking、launch、withContext 和 async 是不同的函数和概念,用于处理异步和并发操作。下面我将逐个解释它们的使用方法和区别,并给出示例。 1. runBlocking runBlocking 是在非协…

政安晨【零基础玩转各类开源AI项目】解析开源:Stable Diffusion 3 论文及用户界面工具 StableSwarmUI

目录 关键成果 性能 结构细节 通过重新配重改善整形流量 比例整形变换模型 灵活的文本编码器 使用模型:StableSwarmUI 开源项目的现状: 政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 收录专栏: 零基础玩转各类开源AI…

适配器模式(设计模式)

适配器模式主要在于将一个接口转变成另一个接口,它的目的是通过改变接口来达到重复使用的目的; 适配器模式(Adapter Pattern)是一种结构型设计模式,它允许接口不兼容的对象能够相互合作。适配器模式通过将一个类的接口…

Vulnhub-DC-9

靶机IP:192.168.20.144 kaliIP:192.168.20.128 网络有问题的可以看下搭建Vulnhub靶机网络问题(获取不到IP) 信息收集 nmap扫描一下端口及版本号 dirsearch扫目录 最后去前端界面观察发现也没什么隐藏路径。 观察功能,search引起注意,SQL注入测试 当输…

4机器学习期末复习

在机器学习中,数据清洗与转换包括哪些内容? 对数据进行初步的预处理,需要将其转换为一种适合机器学习模型的表示形式对许多模型类型来说,这种表示就是包含数值数据的向量或者矩阵: 1)将类别数据编码成为对…

select简单查询

SELECT 简单查询 假如我们有一张表,表名为 students,如下所示: --------------------------------- | id | name | age | department_id | --------------------------------- | 1 | 张三 | 20 | 101 | | 2 | Alice | …

IT入门知识博客文章大纲(0/10)

IT入门知识博客文章大纲 引言 什么是IT? 信息技术(Information Technology),互联网技术是指在计算机技术的基础上开发建立的一种信息技术 。互联网技术通过计算机网络的广域网使不同的设备相互连接,加快信息的传输速度…

如何在 Go 应用程序中使用检索增强生成(RAG)

本文将帮助大家实现 RAG (使用 LangChain 和 PostgreSQL )以提高 LLM 输出的准确性和相关性。 得益于强大的机器学习模型(特别是由托管平台/服务通过 API 调用公开的大型语言模型,如 Claude 的 LLama 2等)&#xff0c…

「动态规划」买卖股票的最佳时机,如何处理多笔交易?

188. 买卖股票的最佳时机 IVhttps://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iv/description/ 给你一个整数数组prices和一个整数k,其中prices[i]是某支给定的股票在第i天的价格。设计一个算法来计算你所能获取的最大利润。你最多可以完成k笔交易。…

关于钽电容器的作用、优缺点、选型指南及故障诊断方法等介绍

钽电容器,全称为钽电解电容器,是一种以金属钽作为介质材料的电解电容器。与传统的电解电容器不同,钽电容器不使用液体电解质,而是利用钽氧化物(五氧化二钽)作为固态电解质,这使得它们具有更高的…

取证工作: SysTools SQL Log Analyzer, 完整的 SQL Server 日志取证分析

天津鸿萌科贸发展有限公司是 Systools 系列软件的授权代理商。 SysTools SQL Log Analyzer 是 Systools 取证工具系列之一,用于调查 SQL Server 事务日志,以对数据库篡改进行取证分析。 什么是 SQL Server 事务日志? 在深入研究 SQL 事务日…