【鸿蒙开发基础】Harmony OS Next-@builder装饰器

1.什么是@builder装饰器？

在Harmony OS Next中，@Builder装饰器是在HarmonyOS ArkUI中使用的一种特殊装饰器，用于定义可重用的UI构建块。这些UI构建块可以独立于具体的组件存在，并且可以在不同的组件中重用，从而提高代码的复用性和维护性。

功能和用途

使用@Builder装饰器定义的函数通常用于生成UI组件，如文本、按钮等，并可以设置这些组件的属性，如字体大小、颜色等。这些由@Builder定义的UI组件可以在不同的@Entry或@Component中使用，实现快速组装和配置。

2.使用@builder装饰器

使用@builder构建一个登录界面，在主函数中直接调用即可，类似于之前文章写的自定义组件的语法，感兴趣的可以参考一下：https://blog.youkuaiyun.com/weixin_74851434/article/details/144197706?spm=1001.2014.3001.5502

@Entry
@Component
struct Index {


  build() {
 Column({space:12}){
   //使用@builder函数
Form()

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



  }
}


//构建一个@builder函数
@Builder
function Form(){
  Text('登录界面')
  TextInput({placeholder:'输入用户名：'})
  TextInput({placeholder:'输入密码'})
  Button('登录')
}

效果：

 

2.1@Builder装饰器的轻量级特点

由于@Builder的轻量级设计，它在性能方面可能优于包含更多功能的自定义组件。特别是在组件大量嵌套的场景中，@Builder可以通过减少不必要的状态检查和生命周期管理，从而提升应用性能。

但它的缺点是@Builder函数可以引用数据变量，但不支持数据更新后的UI刷新，所以使用时需要注意

@Entry
@Component
struct Index {
@State
TextName:string='请输入用户名'

  TextPassword:string='请输入密码'

  build() {
 Column({space:12}){
   //使用@builder函数
Form(this.TextName,this.TextPassword)

   Button('改变TextName的值')
     .onClick(()=>{
       this.TextName='请输入新的用户名'
         console.log(this.TextName)
     })
 }
    .height('100%')
    .width('100%')



  }
}


//构建一个@builder函数
@Builder
function Form(TextName:string,TextPassWord:string){
  Text('登录界面')
  TextInput({placeholder:TextName})
  TextInput({placeholder:TextPassWord})
  Button('登录')
}

这里我们传入TextName作为第一个输入框的值，点击按钮后却无法在UI界面产生数据的更新

但是在后台可以看到，打印的数据中显示TextName的值确实已经改变

2.2按引用类型传递

@Builder装饰器按照引用类型传值可以实现UI的更新

@Entry
@Component
struct Index {
@State
TextName:string='请输入用户名'

  TextPassword:string='请输入新的密码'

  build() {
 Column({space:12}){
   //使用@builder函数
//传递的参数为接口中定义的类型，且以对象的语法传递
Form({TextName:this.TextName,TextPassWord:this.TextPassword})

   Button('改变TextName的值')
     .onClick(()=>{
       this.TextName='请输入新的用户名'
         console.log(this.TextName)
     })
 }
    .height('100%')
    .width('100%')



  }
}


//构建一个@builder函数
@Builder
function Form(Item:FormItem){
  Text('登录界面')
//引用类型传值   
  TextInput({placeholder:Item.TextName})
  TextInput({placeholder:Item.TextPassWord})
  Button('登录')
}

//设置引用类型要使用的接口
interface FormItem{
  TextName:string,
  TextPassWord:string
}

实现效果：

以上就是@Builder的基础用法，感兴趣的读者可以自行定义数据，实践体会一下@Buidler装饰器的用法