@Extend、@Styles、@Builder样式和结构复用

@Extend：扩展组件（样式、事件）

// 这里用Text是因为轮播图内使用的是Text组件
// Extend可以传参
@Extend(Text)
function bannerItem (params: string) {
  .textAlign(TextAlign.Center)
  .fontSize(30)
  .onClick(() => {
    AlertDialog.show({message: '点击了'})
  })
}

@Entry
@Component
struct Index {
  @State value: string = '';
​
  build() {
    Column() {
      Swiper() {
        Text('11111111111').bannerItem('我是可以传参的')
      }
    }
  }
}

@Styles：抽取通用属性、事件

// Styles 不可以传参
@Styles function commonStyle () {
  .width(100)
  .height(100)
  .onClick(() => {
    AlertDialog.show({message: '我点击了'})
  })
}


@Entry
@Component
struct Index {
  @Styles setBg () {
    .backgroundColor('pink')
  }

  build() {
    Column() {
      Swiper() {
        Text('11111111111').setBg().commonStyle()
      }
    }
  }
}

@Builder：自定义构建函数（结构、样式、事件）

// Builder 可以传参
@Builder
function navItem (icon: ResourceStr, text: string) {
  Column({space: 5}) {
    Text('哈哈')
    Text('你好')
  }
  .width(100)
  .onClick(() => {})
}

@Entry
@Component
struct Index {
  @Styles setBg () {
    .backgroundColor('pink')
  }

  build() {
    Column() {
      navItem($r('app.media.haha'), 'text')
      navItem($r('app.media.haha'), 'text')
    }
  }
}