ArkUI之自定义组件

ArkUI之自定义组件

如何使用自定义组件来提高代码复用性和开发效率？（对照js中react函数组件学习）

子组件可以放在单独的文件，需要使用export导出：自定义组件

子组件代码：

@Component
export struct MyComponents {
  private title:string
  build() {
    Text(this.title)
  }
}

父组件代码

import {MyComponents} from './myComponents'
@Entry
@Component
struct Index {
  build() {
    Column(){
      MyComponents({title: '商品列表'})
    }
  }
}

子组件可以放在与父组件同一文件里

全局自定义构建函数

@Entry
@Component
struct Index {
  build() {
    myComponents('订单列表')
  }
}

@Builder function myComponents(Title:string){
  Text(Title)
}

局部自定义构建函数

注意加this

@Entry
@Component
struct Index {
  build() {
    this.myComponents('订单列表')
  }
  @Builder  myComponents(Title:string){
    Text(Title)
  }
}

局部公共样式函数

@Component
struct Index {
  // 局部公共样式函数
  @Styles fillScreen(){
    .width('100%')
    .height('100%')
    .backgroundColor('#EFEFEF')
    .padding(20)
  }
  build() {
    Text('订单列表')
      .fillScreen()
  }
}

全局公共样式函数

@Extend(Text) function priceStyle(){
  .fontColor('#F36')
  .fontSize(18)
}

@Entry
@Component
struct Index {
  build() {
    Text('订单列表')
      .priceStyle()
  }
}