介绍

装修器是一种特别类型的声明，它能够被附加到类声明，办法，拜访符，特点或参数上

来历：www.tslang.cn/docs/handbo…

HarmonyOS 有19种装修器

有必要【2】
制作一个页面，这两个肯定会用到

@Entry
@Component

可选【17】

@State
@Prop
@Link
@ObjectLink
@Watch
@Styles
@StorageProp
@StorageLink
@Provide
@Consume
@Observed
@Builder
@BuilderParam
@LocalStorageProp
@LocalStorageLink
@Extend
@Concurrent

假如你有必定编程根底，应该在你所了解的语言范畴已见过这种办法。

@format("Hello, %s")
helloWorld:string;

@Deprecated
private static void helloWord(){        
  System.out.println("这个办法现已不推荐运用");    
}

@ParamMetadata("ClassThree", 5)
class HelloWorld {
   inttimeYear;
}

@RestController
publicclassHelloWorldController{
}

@interfaceHelloWorldObject:NSObject{
}

装修器

@Entry@Component

@Entry//这是一个页面@Component//页面中有一个视图容器，即根布局 Row()
struct Index {
  @State message: string = 'Hello World'
  build() {    
     Row() {      
      Column() {        
           Text(this.message)          
             .fontSize(50)          
             .fontWeight(FontWeight.Bold)      
             }.width('100%')    
        }.height('100%')  
    }
  }
}

@State

组件内状况更新（即，变量内容产生改动，组件主动改写）

初始状况

点击 “更新this.message内容”

@Entry //这是一个页面@Component//页面中有一个视图容器，即根布局Row()
structIndex{
  @Statemessage:string='HelloWorld'
     build(){    
         Row(){        
            Column(){            
               Text(this.message)
                 .fontSize(50)
                 .fontWeight(FontWeight.Bold)
               Button('更新this.message内容')
                 .onClick(()=>{
                      this.message='HarmonyOS'
                 })
             }.width('100%')
          }.height('100%')
     }
}

@Link

父组件与子组件双向同步数据（即，父组件和子组件都能够更新父组件已关联的数据）

NOTE: 子组件中的 @Link 变量，不能初始化。

初始状况

点击 “Parent 更新文字内容“

点击 “Child 更新文字内容“

import { TestChild } from './TestChild'
@Entry //这是一个页面
@Component //页面中有一个视图容器，即根布局 Row()
struct Index {
    @State message: string = '混沌'
    build(){
       Row() {
          // 父组件
          Column({space:20}){
                   Text(this.message)
                      .fontSize(30)
                      .fontWeight(FontWeight.Bold)
                   Button('Parent更新文字内容')
                      .onClick(()=>{
                          this.message='HelloWord'
                      })
                   //子组件
                   TestChild({m:$message})
                   }.width('100%')
          }.height('100%')   
    }
}

@Componentexport
struct  TestChild{  
  @Link m: string  
  private childCount: number = 0
  build(){
     Button('Child更新文字内容')      
     .onClick( ()=>{        
         this.m = 'HarmonyOS - Child' + (this.childCount++)      
     })  
  }
}

@Prop

父组件与子组件单向同步数据（即，父组件能够同步数据至子组件，子组件无法同步数据到父组件）

初始化状况

点击 “Parent 更新文字内容“
NOTE:父组件的内容的每次更新都会影响到子组件内容的更新

点击 “TestChild更新文字内容“
NOTE:子组件的内容并没有影响到父组件内容Hello Word 3

点击 “Parent 更新文字内容“
NOTE:子组件的内容更新为HelloWord 4

NOTE:父组件的更新指的是其内容比较之前状况产生了改动，如下代码中，假如将count 字段内容不赋值给 message, 则子组件只是会更新一次内容

import { TestChild } from './TestChild'
@Entry //这是一个页面
@Component //页面中有一个视图容器，即根布局 Row()
struct Index {
   @State message: string = '混沌'
   count: number = 0
   build() {
     Row() {
       Column( {space : 20} ) {
         Text(this.message)
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
         Button('Parent 更新文字内容')
           .onClick( ()=>{
              this.message = 'Hello Word ' + this.count++
           })
         TestChild({m: this.message})
       }
       .width('100%')
     }
     .height('100%')
   }
}

@Component
export struct TestChild{
   @Prop m: string
   private childCount: number = 0
   build(){
      Column( {space:20} ){
         Text(this.m).fontSize(30)
         Button('TestChild 更新文字内容')
           .onClick( ()=>{
              this.m = 'HarmonyOS - Child' + (this.childCount++)
            })
       }.backgroundColor(Color.Pink)
    }
}

@Provide@Consume

父组件与子组件的子组件(官方叫法：子孙组件)双向向同步数据（即，父组件与子孙组件能够彼此操作 @Provide 润饰的数据）

NOTE：@Provide 与@Consume声明的变量名有必要共同

初始状况

点击 “Parent 更新文字内容“
NOTE:父组件的内容的每次更新都会影响到子孙组件内容的更新

点击 “TestChild2更新文字内容“
NOTE:子孙组件的内容并会影响到父组件内容

再次点击 “Parent 更新文字内容“
NOTE:父组件的内容的每次更新都会影响到子孙组件内容的更新

import {TestChild } from './TestChild'
@Entry //这是一个页面
@Component // 页面中有一个视图容器，即根布局 Row()
struct Index {
  @Provide msg: string = '混沌'
  count: number = 0
  build(){
     Row(){
       Column( {space : 20} ) {
          Text(this.msg)
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
          Button('Parent 更新文字内容')
             .onClick( ()=>{
                  this.msg = 'Hello World ' + (this.count++)
               })
          TestChild()
       }.width('100%')
     }.height('100%')
  }
}

TestChild 嵌套TestChild2, TestChild2嵌套TestChild3

@Component
export struct TestChild{
   build(){
     TestChild2(){
       .width('100%')
       .backgroundColor(Color.Red)
       .align(Alignment.Center)
     }
   }
}
@Component
export struct TestChild2{
   build(){
      TestChild3()
   }
}
@Component
export struct TestChild3{
   @Consume msg: string
   count: number = 0
   build(){
      Column(){
        Text(this.msg).fontSize(30)
        Button('TestChild2 更新文字内容')
          .onClick( ()=>{
              this.msg = 'HarmonyOS - Child' + (this.count++)
           }) 
      }.backgroundColor(Color.Pink)
   }
}

@Observed@ObjectLink

父组件与嵌套目标或数组进行双向向同步数据

说明
实践事务研制中，咱们封装很多类（与 @Component 润饰的组件无关），这个时候，假如要让父组件和嵌套目标进行数据同步，前边所介绍的一切装修器是无法做到的。

NOTE
1.子组件中@ObjectLink装修器装修的状况变量用于接纳@Observed装修的类的实例，和父组件中对应的状况变量树立双向数据绑定
2.独自运用@Observed是没有任何效果的，需求搭配@ObjectLink或许@Prop运用初始状况

初始状况

点击 “Parent 更新文字内容“

NOTE:父组件中的文字没有改动，只是子组件数字产生了改动，这是因为中间产生了嵌套，详细到代码为:this.b.a.c + ”

点击 “TestChild2更新文字内容“

NOTE:子组件的文字内容产生了改动

NOTE：
这次你会发现点击“Parent 更新文字内容”，父组件文字没有产生改动，原因是因为有3级嵌套类怎么破解？

“子组件中@ObjectLink装修器装修的状况变量用于接纳@Observed装修的类的实例，和父组件中对应的状况变量树立双向数据绑定”

//引起此问题初始化代码
@State b: ClassB = new ClassB(new ClassA(0));
// 修正
@State a: ClassA = new ClassA(0)
@Stateb:ClassB=newClassB(a)

import {ClassA, ClassB, TestChild } from './TestChild'
@Entry //这是一个页面
@Component //页面中有一个视图容器，即根布局 Row()
struct Index {
      @State b: ClassB = new ClassB(new ClassA(0));
      build() {
         Row() {
          Column( {space : 20} ) {
            Text(this.b.a.c + '')
              .fontSize(30)
              .fontWeight(FontWeight.Bold)
            Button('Parent 更新文字内容')
              .onClick( ()=>{
                 this.b.a.c += 1;
              })
            TestChild({a: this.b.a})
         }.width('100%')
       }.height('100%')
    }
}

@Component
export struct TestChild {
      @ObjectLink a: ClassA;
      build(){
         Column(){
           Text(this.a.c + '').fontSize(30)
           Button('TestChild2 更新文字内容')
             .onClick( ()=>{
                 this.a.c += 1;
               } )
         }.backgroundColor(Color.Pink)
      }
}      
@Observed
export class ClassA {
   public c: number;
   constructor(c: number) {
      this.c = c;
   }
}
export class ClassB {
   public a: ClassA;
   constructor(a: ClassA) {
      this.a = a;
   }
}

@Watch

关注某个变量状况产生改动

NOTE：监听的这个变量不要放在回调办法中，让其产生二次改动，容易导致死循环

初始状况

点击 “Parent 更新文字内容“

点击 “TestChild2更新文字内容“

再次点击 “Parent 更新文字内容“

import {ClassA, ClassB, TestChild } from './TestChild'
@Entry //这是一个页面
@Component //页面中有一个视图容器，即根布局 Row()
struct Index {
   @State msg: string = '混沌'
   @State index: number = 0;
   build(){
      Row(){
        Column( {space : 20} ) {
          Text(this.msg + ' ' + this.index)
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
          Button('Parent 更新文字内容')
            .onClick( ()=>{
               this.index++
            })
          TestChild({count: this.index})
        }.width('100%')
      }.height('100%')
   }   
}

NOTE：运用 @Prop 润饰的原因：感知父组件改动 count 值

@Component
exportstructTestChild{
    @Prop @Watch('onCountUpdated') count: number;
    @State total: number = 0;
    // @Watch 回调
    onCountUpdated(propName: string): void {
       this.total += 1;
    }
    build(){
        Column(){
          Text('HarmonyOS - Child' + this.total).fontSize(30)
          Button('TestChild2 更新文字内容')
             .onClick( ()=>{
                this.count++
             })
        }.backgroundColor(Color.Pink)
    }
}

@LocalStorageLink@LocalStorageProp

LocalStorage是页面级的UI状况存储，经过@Entry装修器接纳的参数能够在页面内同享同一个LocalStorage实例。LocalStorage也能够在UIAbility内，页面间同享状况

LocalStorage在场景运用过程中包含了两个装修器，即@LocalStorageLink 和 @LocalStorageProp

@LocalStorageLink 效果图

初始状况

点击“Parent 更新文字内容” /“TestChild2 更新文字内容”

import { TestChild } from './TestChild';
// 创立新实例并运用给定目标初始化
let storage = new LocalStorage({ 'PropA': 47 });
// 使LocalStorage可从@Component组件拜访
@Entry(storage)
@Component
struct Index {
    // @LocalStorageLink变量装修器与LocalStorage中的'PropA'特点树立双向绑定
    @LocalStorageLink('PropA') count: number = 1;
    build(){
       Row(){
          Column( {space : 20} ){
             Text('混沌 ' + this.count)
               .fontSize(30)
               .fontWeight(FontWeight.Bold)
             Button('Parent 更新文字内容')
               .onClick( ()=>{
                  this.count++
               })
             TestChild()   
          }.width('100%')
       }.height('100%')
    }
}

@Component
export struct TestChild {
   // @LocalStorageLink变量装修器与LocalStorage中的'PropA'特点树立双向绑定
   @LocalStorageLink('PropA') count: number = 1;
   build() {
      Column( {space : 20} ) {
        Text('HarmonyOS - Child' + this.count)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Button('TestChild2 更新文字内容')
          .onClick( ()=>{
             this.count++
           })  
      }.width('100%')
      .backgroundColor(Color.Pink)
   }
}

总结，本例展示了:

运用结构函数创立LocalStorage实例storage
运用@Entry装修器将storage添加到 Index 顶层组件中
@LocalStorageLink绑定LocalStorage对给定的特点，树立双向数据同步

@LocalStorageProp效果图

初始状况

点击 “Parent 更新文字内容”

在初始状况，点击“TestChild2 更新文字内容”

import { TestChild } from './TestChild';
// 创立新实例并运用给定目标初始化
let storage = new LocalStorage({ 'PropA': 47 });
// 使LocalStorage可从@Component组件拜访
@Entry(storage)
@Component
struct Index {
    // @LocalStorageLink变量装修器与LocalStorage中的'PropA'特点树立双向绑定
    @LocalStorageProp('PropA') count: number = 1;
    build() {
       Row() {
          Column( {space : 20} ) {
            Text('混沌 ' + this.count)
              .fontSize(30)
              .fontWeight(FontWeight.Bold)
            Button('Parent 更新文字内容')
              .onClick( ()=>{
                 this.count++
                 })
            TestChild() 
          }.width('100%')
       }.height('100%')
    }
}

let storage = LocalStorage.GetShared()
@Component
export struct TestChild{
   // @LocalStorageLink变量装修器与LocalStorage中的'PropA'特点树立双向绑定
   @LocalStorageLink('PropA') count: number = 1;
   build() {
      Column( {space : 20} ) {
        Text('HarmonyOS - Child' + this.count)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Button('TestChild2 更新文字内容')
          .onClick( ()=>{
             this.count++
          })
      }.width('100%')
      .backgroundColor(Color.Pink)
   }
}

总结
@LocalStorageLink(key)是和LocalStorage中key对应的特点树立双向数据同步：

本地修正产生，该修正会被写回LocalStorage中；
LocalStorage中的修正产生后，该修正会被同步到一切绑定LocalStorage对应key的特点上，包括单向（@LocalStorageProp和经过prop创立的单向绑定变量）、双向（@LocalStorageLink和经过link创立的双向绑定变量）变量。

这个例子中TestChild组件运用了@LocalStorageLInk, 当其值产生改动时，会同时影响到父布局运用到 @LocalStorageProp装修器的变量值，即子组件的变量经过LocalStorage能够影响到相应的父组件变量值，但父组件的相关变量值是无法影响到子组件的变量值

@StorageLink@StorageProp

AppStorage是运用大局的UI状况存储，是和运用的进程绑定的，由UI框架在运用程序启动时创立，为运用程序UI状况特点供给中心存储。

AppStorage在场景运用过程中包含了两个装修器，即@StorageLink 和 @StorageProp

和AppStorage不同的是，LocalStorage是页面级的，一般运用于页面内的数据同享。而AppStorage是运用级的大局状况同享，还相当于整个运用的“中枢”，持久化数据PersistentStorage和环境变量Environment都是经过和AppStorage中转，才能够和UI交互。

初始状况

点击“更新AppStorage内容”

点击“更新LocalStorage内容”

点击“TestChild2 更新文字内容”

NOTE: AppStorage 和LocalStorage是互不影响的

import { TestChild } from './TestChild';
AppStorage.SetOrCreate('PropA', 47);
// 创立新实例并运用给定目标初始化
let storage = new LocalStorage();
// 使LocalStorage可从@Component组件拜访
@Entry(storage)
@Component
struct Index {
   // @LocalStorageLink变量装修器与LocalStorage中的'PropA'特点树立双向绑定
   @StorageLink('PropA') count: number = 1;
   @LocalStorageLink('PropA') countL: number = 1;
   build() {
      Row(){
        Column( {space : 20} ) {
           Text('AppStorage ' + this.count)
             .fontSize(30)
             .fontWeight(FontWeight.Bold)
           Button('更新AppStorage内容')
             .onClick( ()=>{
                this.count++
             })
           Text('LocalStorage ' + this.countL)
             .fontSize(30)
             .fontWeight(FontWeight.Bold)
           Button('更新LocalStorage内容')
             .onClick( ()=>{
                this.countL++
             })
          TestChild() 
        }.width('100%')
      }.height('100%')
   }
}

@Component
export struct TestChild {
   // @LocalStorageLink变量装修器与LocalStorage中的'PropA'特点树立双向绑定
   @StorageLink('PropA') count: number = 1;
  build(){
    Column( {space : 20} ) {
      Text('HarmonyOS - Child' + this.count)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Button('TestChild2 更新文字内容')
        .onClick( ()=>{
          this.count++
        })
    }.width('100%')
    .backgroundColor(Color.Pink)
  }
}

@Builder

@Builder 用于UI元素复用，开发者能够将重复运用的UI元素抽象成一个办法，在build办法里调用

初始状况

点击“更新”

总结
值引用办法，能够感知父组件的状况改动
值传递办法，无法感知父组件的状况改动

@Entry
@Component
struct Index {
   @State count: number = 1;
   @Builder BuilderOne($$: { paramA1: number }) {
      Column() {
        Text(`组件1值引用: ${$$.paramA1} `).fontSize(20)
      }.width('100%').backgroundColor(Color.Pink)
   }
   @Builder BuilderTwo(paramA1: number) {
      Column() {
        Text(`组件2值传递: ${paramA1} `).fontSize(20)
      }.width('100%').backgroundColor(Color.Pink)
   }
   build() {
     Row() {
       Column({ space: 20 }) {
          Text('混沌 ' + this.count)
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
          Button('更新')
            .onClick(() => {
               this.count++
            })
         this.BuilderOne({ paramA1: this.count })
         this.BuilderTwo(this.count)
       }.width('100%')
     }.height('100%')
   }
}

@BuilderParam

当开发者创立了自界说组件，并想对该组件添加特定功用时，例如在自界说组件中添加一个点击跳转操作。若直接在组件内嵌入事情办法，将会导致一切引进该自界说组件的当地均添加了该功用。为处理此问题，ArkUI引进了@BuilderParam装修器，@BuilderParam用来装修指向@Builder办法的变量，开发者可在初始化自界说组件时对此特点进行赋值，为自界说组件添加特定的功用。该装修器用于声明恣意UI描述的一个元素，类似slot占位符。

import Prompt from '@system.prompt';
import { TestChild } from './TestChild';
@Entry
@Component
struct Index {
   @Builder BuilderOne() {
      TestChild( {msg: 'BuilderOne 视图'} ) {
         Text('1').fontColor(Color.Red)
      }
   }
   @Builder BuilderTwo() {
      Stack(){
         TestChild( {msg: 'BuilderTwo 视图'} ) {
           Text('1').fontColor(Color.Red)
           Text('2').fontColor(Color.Red)
         }
      }.onClick( () => {
         Prompt.showToast({message: '点了 BuilderTwo'})
      })
   }
   @BuilderParam aBuilder0: () => void = this.BuilderOne
   @BuilderParam aBuilder1: () => void = this.BuilderTwo
   build(){
      Column({ space: 20 }) {
        this.aBuilder0()
        this.aBuilder1()
        TestChild( {msg: '中国'} ) {
           Text('1').fontColor(Color.Red)
        })
      }.width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
   }
}

@Component
export struct TestChild {
     msg: string
     @BuilderParam aB0: () => {}
     build(){
       Column( {space : 20} ) {
          this.aB0()
          Text('TestChild上下有 '+ this.msg)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          this.aB0()  
       }.width('100%')
       .backgroundColor(Color.Pink)
     }
}

总结

@BuilderParam既能够指向一个目标，也能够指向@Builder润饰的办法
关于子组件占位呈现两个的问题，应该是系统原因
带占位的自界说视图是无法呼应onClick事情的，所以在本示例种，将子组件外边再添加了一个容器组件，用来进行点击事情呼应

@Styles

假如每个组件的款式都需求独自设置，在开发过程中会呈现很多代码在进行重复款式设置，尽管能够复制粘贴，但为了代码简洁性和后续便利保护，咱们推出了能够提炼公共款式进行复用的装修器@Styles

初始状况

点击粉色区域

import Prompt from '@system.prompt';
@Entry
@Component
struct Index {
   //仅支撑公共特点
   @Styles fancy() {
      .width(200)
      .height(300)
      .backgroundColor(Color.Pink)
      .onClick(() => {
         Prompt.showToast({message: 'I am fancy'})
      })
   }
   build() {
      Column({ space: 20 }) {
         Text('Styles')
           .textAlign(TextAlign.Center)
           .fancy()
      }.width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
   }
}

总结

@Styles 当前仅支撑通用特点
@Styles润饰的办法不支撑参数
引用@Styles 润饰的办法时，建议放在最后，比如：Text().fancy().textAlign(….)应该变为Text().textAlign(….).fancy()

@Extend

用于扩展原生组件款式

留意

1.原生指的ArkTS写的组件
2. 扩展，不是新界说添加不存在的特点

初始状况

点击粉色区域

import Prompt from '@system.prompt';
//仅支撑公共特点
@Styles function fancy() {
    .width(200)
    .height(300)
    .backgroundColor(Color.Pink)
    .onClick(() => {
        Prompt.showToast({message: 'I am fancy'})
    })
}
@Extend(Text) function superFancy(size:number, onClick?: () => void) {
     .fontSize(size)
     .textAlign(TextAlign.Center)
     .fancy()
     .onClick(onClick)
}
@Entry
@Component
struct Index {
    onClickHandler() {
       Prompt.showToast({message: 'fancy出去了'})
    }
    build(){
      Column({ space: 20 }) {
        Text('Styles')
          .superFancy(30, this.onClickHandler.bind(this))
      }.width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
    }
}

总结

@Extend 在@Styles根底上，添加了传参特性
@Extend 有必要界说为大局
支撑封装指定的组件的私有特点和私有事情和预界说相同组件的@Extend的办法

@Concurrent

在运用TaskPool时，履行的并发函数需求运用该装修器润饰，否则无法经过相关校验。

关于这个装修器，没有什么特别的东西，假如运用到了，可参阅官方辅导即可

import taskpool from '@ohos.taskpool';
@Concurrent
function add(num1: number, num2: number): number {
    return num1 + num2;
}
async function ConcurrentFunc(): Promise<void> {
  try {
    let task: taskpool.Task = new taskpool.Task(add, 1, 2);
    console.info("taskpool res is: " + await taskpool.execute(task));
  }catch (e) {
  }
}
@Entry
@Component
struct Index {
   @State message: string = 'Hello World'
   build(){
      Row(){
        Column(){
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .onClick(() => {
               ConcurrentFunc();
            })
        }.width('100%')
      }.height('100%')
   }
}

结尾

到此咱们已学完一切的装修器用法

个人感觉@BuilderParam和@ObjectLink了解起来仍是有点费力。

灵敏运用装修器，全凭官方辅导文档是不行的，它只是供给了一种最小化的场景运用模型，到了详细事务完成场景中，十分容易犯糊涂蒙圈

HarmonyOS 编程之重器-装饰器

介绍

装修器

@Entry@Component

@State

@Link

@Prop

@Provide@Consume

@Observed@ObjectLink

@Watch

@LocalStorageLink@LocalStorageProp

@StorageLink@StorageProp

@Builder

@BuilderParam

@Styles

@Extend

@Concurrent

结尾

作者信息

推广

HarmonyOS 编程之重器-装饰器

介绍

装修器

@Entry@Component

@State

@Link

@Prop

@Provide@Consume

@Observed@ObjectLink

@Watch

@LocalStorageLink@LocalStorageProp

@StorageLink@StorageProp

@Builder

@BuilderParam

@Styles

@Extend

@Concurrent

结尾

相关文章

年终杂感：从算法到前端，我的六年码龄

🐶再花2分钟，试下冷门小工具 → Postfix Completion

一键三连、自动导入：打造属于你自己的prettier工具

【游戏行业部】反外挂技术的革新：如何有效应对 FPS 外挂的威胁

作者信息

推广