鸿蒙应用开发-拿捏自定义组件在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件，由开发者定义的称为自定

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

介绍

在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')}})//函数
    }
  }
}