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

鸿蒙NEXT开发-组件事件监听和状态管理（基于最新api12稳定版）

article 2024/10/2 17:28:52

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

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

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

目录

1. 组件事件

1.1 登录小案例

2. 组件状态管理

2.1 @State装饰器：组件内状态

2.1.1 基本介绍

2.1.2 简单代码示例-字符串类型

2.1.3 简单代码示例-number类型

2.1.4 简单代码示例-对象类型

2.1.5 简单代码示例-嵌套对象-不能触发视图更新

2.2 @Prop装饰器：父子单向同步

2.2.1 基本介绍

2.2.2 简单代码示例

2.3 @Link装饰器：父子双向同步

2.3.1 基本介绍

2.3.2 简单代码示例

2.4 @Provide和@Consume装饰器：与后代组件双向同步

2.4.1 基本介绍

2.4.2 简单代码示例

2.5 @Observed和@ObjectLink装饰器：嵌套类对象属性变化

2.5.1 基本介绍

2.5.2 简单代码示例

3. 排行榜小案例

3.1 代码结构

3.2 Index.ets

3.3 FruitModel.ets

3.4 TitleComponent.ets

3.5 TableHeaderComponent.ets

3.6 ItemComponent.ets

4. 学习地址

1. 组件事件

监听原生组件的事件和设置属性的方式是一样的都是链式调用，值得注意的是，我们注册事件必须使用箭头函数的写法，Next版本禁止使用匿名函数的形式来给组件注册事件

  • 匿名函数 function () {}

  • 尝试给一个TextInput和一个按钮注册一个值改变事件和点击事件

@Entry
  @Component
  struct Index {

    build() {
      Row() {
        Column({ space: 15 }) {
          Row() {
            TextInput({ placeholder: '请输入用户名' })
              .backgroundColor('#f4f5f6')
              .width('100%').onChange((value) => {
                console.log(value)
              })
          }.padding({
            left: 20,
            right: 20
          })

          Row() {
            Button("登录")
              .width('100%')
              .onClick(() => {
                AlertDialog.show({
                  message: '登录成功'
                })
              })

          }.padding({
            left: 20,
            right: 20
          })

        }
        .width('100%')
      }
      .height('100%')
    }
  }

  • promptAction弹出需要引入一个包才可以使用的，功能更多一些
  • AlertDialog 不需要引入包使用的，功能单一

请注意：在注册事件中的逻辑必须使用箭头函数 () => {}

  1. 因为function中this指向为undefind
  2. 箭头函数中的this指向当前struct实例，可以方便的调用方法和获取属性

1.1 登录小案例

import { promptAction } from '@kit.ArkUI'

@Entry
  @Component
  struct Index {
    /**
   * 手机号
   */
    @State phone:string=''

    /**
   * 验证码
   */
    @State code:string=''

    /**
    * 获取验证码
    */
    getCode(){
      // 判断手机号是否存在
      if(this.phone===''){
        promptAction.showToast({
          message:'手机号不能为空'
        })
        return
      }
      promptAction.showToast({
        message:'获取短信验证码成功，当前验证码是1234'
      })
    }

    /**
   * 登录
   */
    login(){
      if(this.phone!='' && this.code==='1234'){
        promptAction.showToast({message:'登录成功'})
        return
      }
      promptAction.showToast({message:'登录失败'})
      // 恢复手机号跟验证码初始化的值
      this.phone=''
      this.code=''
    }

    build() {
      Column() {
        // 华为账号登录
        Column({space:20}){
          TextInput({placeholder:'请输入手机号',text:this.phone})
            .width(300)
            .borderRadius(2)
            .onChange((value)=>{
              this.phone=value
            })
          TextInput({placeholder:'请输入验证码',text:this.code})
            .type(InputType.Password)
            .width(300)
            .borderRadius(2)
            .onChange((value)=>{
              this.code=value
            })

          Text('短信验证码登录').fontColor(Color.Blue).align(Alignment.Start).width('80%')
            .margin({bottom:10})
            .onClick(()=>{
              this.getCode()
            })

        }

        Button('登录')
          .width(300)
          .type(ButtonType.Normal)
          .borderRadius(10)
          .backgroundColor(Color.Red)
          .onClick(()=>{
            this.login()
          })
      }.justifyContent(FlexAlign.Center).width('100%').height('100%')
    }
  }

2. 组件状态管理

在声明式UI编程框架中，UI是程序状态的运行结果，用户构建了一个UI模型，其中应用的运行时的状态是参数。当参数改变时，UI作为返回结果，也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染，在ArkUI中统称为状态管理机制。

2.1 @State装饰器：组件内状态

2.1.1 基本介绍

@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。

需要注意的是，State修饰的类型

Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型以及数组中的对象属性无法触发视图更新

类型必须被指定。

不支持any，不支持简单类型和复杂类型的联合类型，不允许使用undefined和null。

2.1.2 简单代码示例-字符串类型

@Entry
@Component
struct Index {
   @State message:string='hello world'
  build() {
    Column(){
      Text(this.message).width(100).height(50).onClick(()=>{
        this.message='hello state'
      })

    }.width('100%').height('100%')
  }
}

2.1.3 简单代码示例-number类型

@Entry
@Component
struct Index {
   @State name:string='东林'
   @State age:number=18
  build() {
    Column(){
      Text(`${this.name}:${this.age}`)
        .width(100)
        .height(50)
        .onClick(()=>{
        this.age++
      })

    }.width('100%').height('100%')
  }
}

2.1.4 简单代码示例-对象类型

class People{
  name:string
  age:number

  constructor(name:string,age:number) {
    this.name=name
    this.age=age
  }
}

@Entry
  @Component
  struct Index {
    @State p:People=new People('东林',18)
    build() {
      Column(){
        Text(`${this.p.name}:${this.p.age}`)
          .width(100)
          .height(50)
          .onClick(()=>{
            this.p.age++
          })

      }.width('100%').height('100%')
    }
  }

2.1.5 简单代码示例-嵌套对象-不能触发视图更新

class People {
  name: string
  age: number
  model:Model

  constructor(name: string, age: number,model:Model) {
    this.name = name
    this.age = age
    this.model=model
  }
}

class Model{
  like:string=''
  constructor(like:string) {
    this.like=like
  }
}

@Entry
  @Component
  struct Index {
    @State p: People = new People('东林', 18, new Model('篮球'))

    build() {
      Column() {
        Text(`${this.p.model.like}`)
          .width(100)
          .height(50)
          .onClick(() => {
            this.p.model.like = '足球'
          })

      }.width('100%').height('100%')
    }
  }

2.2 @Prop装饰器：父子单向同步

2.2.1 基本介绍

@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的，但是变化不会同步回其父组件。

允许装饰的变量的类型

Object、class、string、number、boolean、enum类型，以及这些类型的数组。

不支持any，支持undefined和null。

支持Date类型。

嵌套类型以及数组中的对象属性无法触发视图更新

2.2.2 简单代码示例

@Entry
@Component
struct Index {
  @State name: string = '父亲'
  @State age: number = 0

  build() {
    Column() {
      Text(`${this.name} : ${this.age}`)
        .width(100)
        .height(50)
        .onClick(() => {
          this.age = 18
        }).backgroundColor(Color.Green)
      Demo({ age: this.age })
    }.width('100%').height('100%')
  }
}


@Component
struct Demo {
  @Prop age: number = 0

  build() {
    Column() {
      Text(this.age.toString())
        .width(100)
        .height(50).backgroundColor(Color.Pink)
    }.width('100%').height('100%')

  }
}

2.3 @Link装饰器：父子双向同步

2.3.1 基本介绍

子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

允许装饰的变量类型

Object、class、string、number、boolean、enum类型，以及这些类型的数组。

支持Date类型。嵌套类型以及数组中的对象属性无法触发视图更新

2.3.2 简单代码示例

@Entry
  @Component
  struct Index {
    @State name: string = '父亲'
    @State age: number = 0

    build() {
      Column() {
        Text(`${this.name} : ${this.age}`)
          .width(100)
          .height(50)
          .onClick(() => {
            this.age = 18
          }).backgroundColor(Color.Green)
        Demo({ age: this.age })
      }.width('100%').height('100%')
    }
  }


@Component
  struct Demo {
    @Link age: number

    build() {
      Column() {
        Text(this.age.toString())
          .width(100)
          .height(50).backgroundColor(Color.Pink).onClick(()=>{
            this.age=20
          })
      }.width('100%').height('100%')

    }
  }

2.4 @Provide和@Consume装饰器：与后代组件双向同步

2.4.1 基本介绍

@Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。

@Provide/@Consume装饰的状态变量有以下特性：

  • @Provide装饰的状态变量自动对其所有后代组件可用，即该变量被“provide”给他的后代组件。由此可见，@Provide的方便之处在于，开发者不需要多次在组件之间传递变量。
  • 后代通过使用@Consume去获取@Provide提供的变量，建立在@Provide和@Consume之间的双向数据同步，与@State/@Link不同的是，前者可以在多层级的父子组件之间传递。
  • @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，建议类型相同，否则会发生类型隐式转换，从而导致应用行为异常。

允许装饰的变量类型

Object、class、string、number、boolean、enum类型，以及这些类型的数组。

支持Date类型。

嵌套类型以及数组中的对象属性无法触发视图更新

2.4.2 简单代码示例

@Entry
  @Component
  struct Index {
    @State name: string = '父亲'
    @Provide age: number = 0

    build() {
      Column() {
        Text(`${this.name} : ${this.age}`)
          .width(100)
          .height(50)
          .onClick(() => {
            this.age = 18
          }).backgroundColor(Color.Green)
        Demo()
      }.width('100%').height('100%')
    }
  }


@Component
  struct Demo {
    @Consume age: number

    build() {
      Column() {
        Text(this.age.toString())
          .width(100)
          .height(50).backgroundColor(Color.Pink).onClick(()=>{
            this.age=20
          })
      }.width('100%').height('100%')

    }
  }

2.5 @Observed和@ObjectLink装饰器：嵌套类对象属性变化

2.5.1 基本介绍

上文所述的装饰器仅能观察到第一层的变化，但是在实际应用开发中，应用会根据开发需要，封装自己的数据模型。对于多层嵌套的情况，比如二维数组，或者数组项class，或者class的属性是class，他们的第二层的属性变化是无法观察到的。这就引出了@Observed/@ObjectLink装饰器。

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步：

  • 被@Observed装饰的类，可以被观察到属性的变化；
  • 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项，或者是class object中的属性，这个属性同样也需要被@Observed装饰。
  • @Observed用于嵌套类场景中，观察对象类属性变化，要配合自定义组件使用（示例详见嵌套对象），如果要做数据双/单向同步，需要搭配@ObjectLink或者@Prop使用（示例详见@Prop与@ObjectLink的差异）。

允许装饰的变量类型

必须为被@Observed装饰的class实例，必须指定类型。

不支持简单类型，可以使用@Prop。

支持继承Date、Array的class实例

2.5.2 简单代码示例

@Observed
  class People {
    name: string
    age: number
    model: Model

    constructor(name: string, age: number, model: Model) {
      this.name = name
      this.age = age
      this.model = model
    }
  }

@Observed
  class Model {
    like: string = ''

    constructor(like: string) {
      this.like = like
    }
  }

@Entry
  @Component
  struct Index {
    @State p: People = new People('东林', 18, new Model('篮球'))

    build() {
      Column() {
        child({ m: this.p.model }).onClick(() => {
          this.p.model.like = '足球'
        })
      }.width('100%').height('100%')
    }
  }

@Component
  struct child {
    @ObjectLink m: Model

    build() {
      Column() {
        Text(`${this.m.like}`)
          .width(100)
          .height(50)

      }

    }
  }

3. 排行榜小案例

实现如下功能

3.1 代码结构

3.2 Index.ets

import TitleComponent from '../component/TitleComponent'
import TableHeaderComponent from '../component/TableHeaderComponent'
import ItemComponent from '../component/ItemComponent'
import FruitModel from '../model/FruitModel'

@Entry
@Component
struct Index {
  @State fruitModels: FruitModel[] = [new FruitModel('1', '苹果', '10000')
    , new FruitModel('2', '橘子', '9000')
    , new FruitModel('3', '香蕉', '8000')
    , new FruitModel('4', '梨子', '7000')
    , new FruitModel('5', '枣子', '6000')
    , new FruitModel('6', '山竹', '5000')
    , new FruitModel('7', '桃子', '4000')
    , new FruitModel('8', '西瓜1', '3000')
    , new FruitModel('9', '西瓜2', '3000')
    , new FruitModel('10', '西瓜3', '3000')
    , new FruitModel('11', '西瓜4', '3000')
    , new FruitModel('12', '西瓜5', '3000')
    , new FruitModel('13', '西瓜6', '3000')
    , new FruitModel('14', '西瓜7', '3000')
    , new FruitModel('15', '西瓜8', '3000')
    , new FruitModel('16', '西瓜9', '3000')
    , new FruitModel('17', '西瓜10', '3000')
    , new FruitModel('18', '西瓜11', '3000')
    , new FruitModel('19', '西瓜12', '3000')
    , new FruitModel('20', '西瓜13', '3000')
  ]

  /**
   * 刷新数据
   */
  load() {

  }

  build() {
    Column() {
      // 标题
      TitleComponent({ fruitModels: this.fruitModels })
      // 表头
      TableHeaderComponent().margin({ bottom: 20 })
      // 内容
      ItemComponent({ fruitModels: this.fruitModels })
    }
    .height('100%')
    .width('100%')
  }
}

3.3 FruitModel.ets

/**
 * 水果数据类
 */
export default class FruitModel {
  /**
   * 排名
   */
  id: string
  /**
   * 水果名
   */
  name: string
  /**
   * 投票数
   */
  vote: string

  constructor(id: string, name: string, vote: string) {
    this.id = id
    this.name = name
    this.vote = vote

  }
}

3.4 TitleComponent.ets

import AppContext from '@ohos.app.ability.common'
import FruitModel from '../model/FruitModel'

/**
 * 水果排行榜标题组件
 */
@Component
  export default struct TitleComponent{

    @State title:string='水果排行榜'

    @Link fruitModels:FruitModel[]

    build() {

      Row(){
        // 显示返回图标跟标题
        Row(){
          Image($r('app.media.back'))
            .width(30)
            .height(30)
            .margin({right:10})
            .onClick(()=>{
              // 退出当前app
              let context=getContext() as AppContext.UIAbilityContext
              context.terminateSelf()
            })

          Text(this.title)
            .fontSize(30)

        }.width('50%')
          .height(40)
          .justifyContent(FlexAlign.Start)

        // 显示刷新图标
        Row(){
          Image($r('app.media.reset'))
            .height(30)
            .width(30)
            .margin({right:20})
            .onClick(()=>{
              // 刷新数据
              this.fruitModels=[new FruitModel('1','草莓','10000')
                                ,new FruitModel('2','西瓜','9000')
                                ,new FruitModel('3','香蕉','8000')
                                ,new FruitModel('4','梨子','7000')
                                ,new FruitModel('5','枣子','6000')
                                ,new FruitModel('6','山竹','5000')
                                ,new FruitModel('7','桃子','4000')
                                ,new FruitModel('8','西瓜1','3000')
                                ,new FruitModel('9','西瓜2','3000')
                                ,new FruitModel('10','西瓜3','3000')
                                ,new FruitModel('11','西瓜4','3000')
                                ,new FruitModel('12','西瓜5','3000')
                                ,new FruitModel('13','西瓜6','3000')
                                ,new FruitModel('14','西瓜7','3000')
                                ,new FruitModel('15','西瓜8','3000')
                                ,new FruitModel('16','西瓜9','3000')
                                ,new FruitModel('17','西瓜10','3000')
                                ,new FruitModel('18','西瓜11','3000')
                                ,new FruitModel('19','西瓜12','3000')
                                ,new FruitModel('20','西瓜13','3000')
                               ]
            })

        }.width('50%')
          .height(40)
          .justifyContent(FlexAlign.End)
      }
      .width('100%')
        .backgroundColor(Color.Pink)
        .justifyContent(FlexAlign.SpaceBetween)

    }
  }

3.5 TableHeaderComponent.ets

/**
 * 表头组件
 */
@Component
  export default struct TableHeaderComponent {
    build() {
      Row(){
        Text('排名')
          .fontSize(20)
          .width('20%')
          .fontWeight(400)
          .fontColor('#989A9C')

        Text('种类')
          .fontSize(20)
          .width('50%')
          .fontColor('#989A9C')

        Text('得票数')
          .fontSize(20)
          .width('30%')
          .fontWeight(400)
          .fontColor('#989A9C')
      }.width('100%')
        .height(30)
        .backgroundColor(Color.Green)

    }
  }

3.6 ItemComponent.ets

import FruitModel from '../model/FruitModel'

/**
 * 内容主体
 */

@Component
  export default struct ItemComponent {
    /**
   * 水果数据
   */
    @Link fruitModels: FruitModel[]

    build() {
      Column() {
        List({space:20}) {
          ForEach(this.fruitModels, (item: FruitModel) => {
            ListItem() {
              Row() {
                Text(item.id)
                  .fontSize(20)
                  .width('20%')
                  .margin({left:10})
                Text(item.name)
                  .fontSize(20)
                  .width('50%')
                Text(item.vote)
                  .fontSize(20)
                  .width('30%')
              }
              .width('100%')
            }
          })
        }
      }
    }
  }

4. 学习地址

全网首发鸿蒙NEXT星河版零基础入门到实战，2024年最新版，企业级开发！视频陆续更新中！_哔哩哔哩_bilibili


http://www.kler.cn/news/329160.html

相关文章：

  • calibre-web默认左上角字体修改
  • 【分布式微服务云原生】有哪些流行的微服务架构以及各自的组件，怎么完成服务治理等。
  • Spring MVC 常用注解
  • 深度学习自编码器 - 分布式表示篇
  • 鸿蒙开发（NEXT/API 12）【状态查询与订阅】手机侧应用开发
  • 《算法岗面试宝典》重磅发布！
  • Java之方法的使用
  • 《OpenCV》—— 指纹验证
  • DAY18||530.二叉搜索树的最小绝对值差 |501.二叉搜索树中的众数| 236.二叉树的最近公共祖先
  • 车辆重识别（2021ICML改进的去噪扩散概率模型）论文阅读2024/9/29
  • CS 工作笔记：SmartEdit 里创建的是 CMS Component
  • 【Spring】深入理解控制反转-IOC
  • Linux网络操作命令与函数全面总结
  • 机器视觉工程师一直做调试，维护岗位，想转岗软件方面C#从零开始，快则三年不到，慢则一辈子不会
  • YOLO11改进 | 检测头 | 小目标遮挡物性能提升的检测头Detect_MultiSEAM【完整代码】
  • 好玩的水表电表
  • we3.0里的钱包是什么？
  • Linux——pod的控制器
  • AR 眼镜之-蓝牙电话-来电铃声与系统音效
  • PO2GO、PO2Vec论文阅读与模型复现报告
  • 【STM32开发笔记】移植AI框架TensorFlow到STM32单片机【下篇】
  • 【环保背景高管1009】2022顶刊论文数据，环保背景高管对投资的影响探究
  • 初识算法 · 双指针（1）
  • LeetCode 面试经典150题 69.x的平方根
  • html嵌入百度地图
  • 酒店智能门锁SDK接口pro[V10] 门锁校验C#-SAAS本地化-未来之窗行业应用跨平台架构
  • 如何解决 Photoshop 中的“暂存盘已满”错误
  • 用于高频交易预测的最优输出LSTM
  • 【Nacos 架构 原理】服务发现模块之Nacos注册中心服务数据模型
  • Python 并发新境界：探索 `multiprocessing` 模块的无限可能