鸿蒙应用开发-拿捏自定义组件介绍

在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件，由开发者定义的称为自定义组件\textcolor{Red}{自定义组件}自定义组件。在平常开发中，@Builder复用机制会被经常使用，但其功能远不如自定义组件强大，@Builder通常是在一个页面之间的复用，而自定义组件通常用于多个页面之间的复用。

运用场景

上述的两张图片分别代表两个弹窗，中间分别对应了不同的内容。这种样式通常情况下在实际开发中，我们会使用自定义组件将两个部分的共同区域提取出来，最后在调用其时加上属于自己的内容部分即可。

定义

// 定义
@Component
struct MyComponent {
  // 状态变量
  @State message:string ='我是'
  build(){
     Text(this.message)
  }
}
//使用
@Entry
@Component
struct Index {
	build(){
        Column{
           MyComponent()//无参数使用
           MyComponent({message:'我是Sugar'})//传参数使用   
        }
    }
}

由上述定义可以看出跟普通样式就差在一个@Entry修饰，@Entry装饰的自定义组件将作为UI页面的入口，也就是说拥有它来修饰就代表一个独立的页面。

自定义组件除了必须要实现build()函数外,还可以定义其他的成员函数，以及成员变量。

@Component
struct MyComponent {
  // 状态变量
  @State message:string=''
  // 成员变量-数据
  info:string = ''
  // 成员变量-箭头函数
  sayHello=()=>{}
  // 成员函数
  sayHi(){}
  build(){
    // UI
  }
}

!!!\textcolor{Red}{!!!}!!!这边需要注意：

与类不同，自定义组件不支持静态函数、静态成员变量自定义组件的成员函数、变量均为私有成员变量/函数的使用

// 定义
@Component
struct MyComponent {
  @State message:string ='我是'
  info:string='我很开心'
  sayHello=()=>{
  }
  sayhi(){
    console.log('你好')
  }
  build(){
    Column(){
      Text(this.message)
      Text(this.info)
      Button('修改数据')
        .onClick(()=>{
          this.info='我很高兴'
          this.message='我是悟空'
          this.sayhi()
          this.sayHello()
        })
    }
  }
}
//使用
@Entry
@Component
struct Index{
  build(){
    Column(){
      MyComponent()//无参数使用
      MyComponent({message:'我是Sugar'})//传参数使用
      MyComponent({sayHello(){console.log('hello')}})//函数
    }
  }
}

解析：

这里我们无参数传递时使用自定义组件，所以message和info都为默认值，sayhi()日志输出，sayHello()为空,最后点击按钮后，只有状态变量message被更改，不是状态变量的info改变不会引起UI更改。

这里我们传递了一个参数值进去,所以一开始message的值被覆盖，显示为“我是Sugar”，点击按钮后的变化与无参数传递一样。

最后一种是传递了sayHello()的逻辑处理进去，所以在按下按钮后日志会多输出hello。

通用样式事件

自定义组件可以通过点语法的形式设置通用样式，通用事件。

@BuilderParam传递UI单参数传递

总的来说，参数，通用样式都讲过了，那么==不通用的组件==肯定放在{}中啦。

实现过程：

在子组件中设置默认的Builder,避免外部不传入定义BuilderParam接受外部传入的ui,并设置默认值使用@BuilderParam装饰的成员变量

多参数传递

子组件有多个BuilderParam，必须通过参数的方式来传入。

首先我们在父组件中使用@Builder将需要传入的组件进行封装。

在父组件中传入组件

在子组件中三步接受并使用ui

最终效果：

好了，本期就分享到这里，如果大家喜欢的文章，不要忘记点赞关注我哦！！！