HarmonyOS | 状态管理(三) | @Link装饰器

系列文章目录

1.HarmonyOS | 状态管理(一) | @State装饰器
2.HarmonyOS | 状态管理(二) | @Prop装饰器


文章目录


前言

现在通过上面两篇的状态管理装饰器讲解,应该越来越清楚状态装饰器的作用了

上篇 HarmonyOS | 状态管理(二) | @Prop装饰器 讲解了父子单向同步 ,这篇文章讲解 @Link装饰器:父子双向同步


提示:以下是本篇文章正文内容,下面案例可供参考

一、@Link装饰器是什么?

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

二、限制条件

@Link装饰器不能在@Entry装饰的自定义组件中使用。

二、使用场景

typescript 复制代码
class GreenButtonState {
  width: number = 0;

  constructor(width: number) {
    this.width = width;
  }
}

@Component
struct GreenButton {
  @Link greenButtonState: GreenButtonState;

  build(){
    Button('Green Button')
      .width(this.greenButtonState.width)
      .height(40)
      .backgroundColor('#64bb5c')
      .fontColor('#FFFFFF,90%')
      .onClick(() => {
          if(this.greenButtonState.width < 700){
               this.greenButtonState.width += 60;
          }else{
               this.greenButtonState = new GreenButtonState(200);
          }
      })
  }
}

@Component
struct YellowButton {
  @Link yellowButtonState: number;

  build() {
    Button('Yellow Button')
      .width(this.yellowButtonState)
      .height(40)
      .backgroundColor('#f7ce00')
      .fontColor('#FFFFFF,90%')
      .onClick(() => {
         this.yellowButtonState += 40.0;
      })
  }
}


@Entry
@Component
struct ShufflingContainer {
  @State greenButtonState: GreenButtonState = new GreenButtonState(200);
  @State yellowButtonProp: number = 200;

  build() {
     Column(){
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
         Button('Parent View: Set yellowButton')
           .width(312)
           .height(40)
           .margin(12)
           .fontColor('#FFFFFF,90%')
           .onClick(() => {
               this.yellowButtonProp = (this.yellowButtonProp < 700) ? this.yellowButtonProp + 40 : 100;
           })

         Button('Parent View: Set GreenButton')
           .width(312)
           .height(40)
           .margin(12)
           .fontColor('#FFFFFF,90%')
           .onClick(() => {
             this.greenButtonState.width = (this.greenButtonState.width < 700) ? this.greenButtonState.width + 100 : 100;
           })

         GreenButton({ greenButtonState:$greenButtonState }).margin(12)

         YellowButton({ yellowButtonState:$yellowButtonProp }).margin(12)
       }
     }
  }
}

1.点击子组件GreenButton和YellowButton中的Button,子组件会发生相应变化,将变化同步给父组件。因为@Link是双向同步,会将变化同步给@State。

2.当点击父组件ShufflingContainer中的Button时,@State变化,也会同步给@Link,子组件也会发生对应的刷新。

typescript 复制代码
@Component
struct  Child{
   @Link items:number[];

   build(){
     Column() {
       Button(`Button1: push`)
         .margin(12)
         .width(312)
         .height(40)
         .fontColor('#FFFFFF,90%')
         .onClick(() => {
            this.items.push(this.items.length + 1)
         })

       Button(`Button2: replace whole item`)
         .margin(12)
         .width(312)
         .height(40)
         .fontColor('#FFFFFF,90%')
         .onClick(() => {
            this.items = [100,200,300,400,500]
         })
     }
   }
}

@Entry
@Component
struct Parent {
  @State arr: number[] = [1, 2, 3];

  build() {
    Column() {
       Child({ items: $arr }).margin(12)

       ForEach(this.arr,(item:number) =>{
          Button(`${item}`)
            .margin(12)
            .width(312)
            .height(40)
            .backgroundColor('#11a2a2a2')
            .fontColor('#e6000000')
       },(item: ForEachInterface) => item.toString())
    }
  }
}

ArkUI框架可以观察到数组元素的添加,删除和替换。在该示例中@State和@Link的类型是相同的number[]

相关推荐
遇到困难睡大觉哈哈8 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
幽蓝计划11 小时前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说11 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
Georgewu13 小时前
【HarmonyOS】应用开发拖拽功能详解
harmonyos
塞尔维亚大汉13 小时前
鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程
源码·harmonyos
Fanmeang16 小时前
OSPF高级特性之FRR
运维·网络·华为·ip·ospf·spf·frr
kumalab16 小时前
HarmonyOS ArkTS卡片堆叠滑动组件实战与原理详解(含源码)
华为·harmonyos
别说我什么都不会17 小时前
【OpenHarmony】鸿蒙开发之xml2jsDemo
harmonyos
HarmonyOS_SDK20 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
harmonyos
zhanshuo1 天前
鸿蒙操作系统核心特性解析:从分布式架构到高效开发的全景技术图谱
harmonyos