鸿蒙开发笔记-自定义组件

自定义组件概念

1. 概念：系统框架提供的称为“系统组件”，由开发者自定义的称为“自定义组件”；
2. 用途：抽离组件拆分页面，自定义特定效果的UI组件；

自定义组件代码框架

@Component
struct TestCustomComponent {
  build() {
    //TODO 内容
  }
}

同样样式、事件

1. 自定义组件可以通过点语法设置通用样式、通用事件
2. 针对整个自定义组件生效

使用

1. 导出export：默认导出和按需导出
2. 导入import

成员变量

1. 成员变量：变量和箭头函数
2. 成员可被传的参数覆盖
3. 普通函数无法通过传值覆盖

talk is cheap, show me the code

自定义组件代码

@Component
export struct TestCustomComponent {
  @State title: string = '默认标题'
  @State more: string = '默认更多'
  //如果传入了同名函数，此函数会被覆盖，属于成员变量
  clickMore = () => {
    console.log('test log', '点击了可被覆盖的默认')
  }

  //此函数不会被覆盖，非成员变量
  clickMore2() {
    
  }

  build() {
    Row() {
      Text(this.title)
      Text(this.more)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .onClick(() => {
      this.clickMore()
    })
  }
}

如何使用

import { TestCustomComponent } from '../pages/RegisterPage'

@Preview
@Entry
@Component
struct Index {
  clickMore = () => {
    console.log('test log', '我是传过来的方法')
  }

  build() {
    Column({ space: 20 }) {
      
      //不传值，使用自定义组件默认值
      TestCustomComponent()

      //传值，覆盖自定义组件的默认值
      TestCustomComponent({
        title: '传过来的订单',
        more: '传过来的查看更多 >',
        clickMore: this.clickMore
        //带不带()是有区别的，做过flutter的应该知道这个机制
        //clickMore: this.clickMore()
      })
    }
  }
}

图片