鸿蒙5：组件监听和部分状态管理V2-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51166786/article/details/149024609

1. 事件监听

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

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

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

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

import { promptAction } from '@kit.ArkUI'

@Entry
  @Component
  struct 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: string
  age: number
}

@Entry
  @ComponentV2
  struct 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 = 100
  
  build() {
    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%')
  }
}