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

鸿蒙5：组件监听和部分状态管理V2

web 2025/6/29 12:00:02

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下

如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

专栏地址: https://blog.csdn.net/qq_56760790/category_12794123.html

文章所属类目（HarmonyOS 语言-ArkTS）

1. 事件监听

2. 状态管理

2.1 @Local 状态

2.1.1 基本介绍

2.1.2 小案例-计数器案例

2.1.3 小案例-百度

1. 事件监听

监听原生组件的事件和设置属性的方式是一样的都是链式调用

值得注意的是，我们注册事件必须使用箭头函数的写法，Next版本禁止使用匿名函数的形式来给组件注册事件

需求：给一个TextInput注册一个 值改变事件onChange，给登录按钮注册 点击事件onClick

promAction.showToast()轻量级提示【自动消失】
promAction.showDialog()弹层级提示【点击消失】

import { promptAction } from '@kit.ArkUI'@Entry@Componentstruct EventListener {build() {Column({ space: 30 }) {TextInput({placeholder: '请输入用户名'}).onChange((value: string) => {promptAction.showToast({ message: value })})Button('登录').width('100%').onClick(() => {promptAction.showDialog({message: '登录成功'})})}.padding(20)}}

2. 状态管理

如果是有 状态管理V1基础 的同学，建议看一下 状态管理V2 迁移指导

@State => @Local
@Link => @Param/@Event
@Prop => @Param
@ObjectLink/@Observed/@Track => @ObservedV2/@Trace
@Watch => @Monitor
...

2.1 @Local 状态

2.1.1 基本介绍

@Local表示组件内部的状态，使得自定义组件内部的变量具有观测变化的能力：

当被@Local装饰的变量变化时，会刷新使用该变量的组件。
注意：@Local的观测能力仅限于被装饰的变量本身。

当装饰简单类型时，能够观测到对变量的赋值；
当装饰数组类型时，能观测到数组整体以及数组元素项的变化；
当装饰对象类型时，仅能观测到对象整体的赋值；
详见观察变化。

// @Local的观测能力仅限于被装饰的变量本身。
// 1. 当装饰简单类型时，能够观测到对变量的赋值；
// 2. 当装饰数组类型时，能观测到数组整体以及数组元素项的变化；
// 3. 当装饰对象类型时，仅能观测到对对象整体的赋值；
import { promptAction } from '@kit.ArkUI'// 给对象定义类型的两种方式
// 1. 接口 interface
// 2. 类 class
// 接口类型: 标记了对象的格式
interface User {name: stringage: number
}@Entry@ComponentV2struct LocalDemo {// 1. @Local 简单类型@Local money: number = 600@Local title: string = '老铁'@Local flag: boolean = true// 2. @Local 普通数组@Local list: string[] = ['刘备', '关羽', '张飞']// 3. @Local 对象  { name: '帅鹏', age: 18 }@Local user: User = {name: '帅鹏',age: 18}build() {Column() {Text(this.money.toString()).fontSize(30)Button('搞钱 +10000').onClick(() => {// money已经被@Local装饰了, 变量的变化能侦听到// 一旦修改了, 驱动界面组件更新this.money += 10000}).margin({ bottom: 50 })Text(this.title).fontSize(30)Text(this.flag.toString()).fontSize(30)Button('改值测试').onClick(() => {this.title += '666'this.flag = !this.flag}).margin({ bottom: 50 })Text(this.list.toString()).fontSize(30)Button('新增数组项').onClick(() => {this.list.push('黄忠')}).margin({ bottom: 50 })Text('用户:' + this.user.name).fontSize(30)Text('年纪:' + this.user.age).fontSize(30)Button('修改对象测试').onClick(() => {// this.user.name = '鹏哥'// this.user.age++// promptAction.showDialog({//   message: this.user.name + this.user.age// })// 对于整个对象覆盖, 就能监视到this.user = {name: '吕布',age: 30}})}.width('100%')}}

2.1.2 小案例-计数器案例

@Entry
@ComponentV2
struct LocalDemo {@Local count: number = 100build() {Row() {Button('-').onClick(() => {this.count--})Text(this.count.toString()).fontSize(30).margin(10)Button('+').onClick(() => {this.count++})}}
}

2.1.3 小案例-百度

实现一个简单的登录页面
账号admin，密码123456时登录提示 登录成功，否则提示用户名或者密码错误

import { promptAction } from '@kit.ArkUI'@Entry
@ComponentV2
struct EventCase {@Local username: string = ""@Local password: string = ""build() {Column({ space: 20 }) {Image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png').width(180)TextInput({ placeholder: '请输入用户名', text: this.username }).height(40).onChange((value: string) => {this.username = value})TextInput({ placeholder: '请输入密码', text: this.password }).height(40).type(InputType.Password).onChange((value: string) => {this.password = value})Button("登录").width('100%').onClick(() => {if (this.username === 'admin' && this.password === '123456') {promptAction.showDialog({message: this.username + this.password})}else {promptAction.showDialog({message: '登录失败'})}})}.padding({left: 20,right: 20}).width('100%')}
}

查看全文

http://www.xdnf.cn/news/14791.html