一.@Extend:抽取特定组件样式、事件可以传递参数

@Extend(Image)
function  setImageStyle(){
  .size({width:100,height:100 } )
  .backgroundColor(Color.Red)

}

Image($r("app.media.layered_image")).setImageStyle()

二.@Styles: 抽取公共样式、事件不可以传递参数

@Styles function setCommonStyle(){
  .width(100)
  .height(100)
  .onClick(()=>{
   AlertDialog.show({message:"点击了"})
  })
}

      Text("设备介绍")
        .fontColor("#8fbce7")
        .fontSize(20)
        .textOverflow({ overflow: TextOverflow.Ellipsis })//需要配合maxLines使用
        .maxLines(2)
        .lineHeight(30).setCommonStyle()

      Image('https://www.itheima.com/images/logo.png').setCommonStyle()

三.@Builder:抽取结构、样式、事件可以传递参数

@Builder
function  buildSwiper(){
  Stack(){
    Swiper() {
      Image($r("app.media.layered_image")).setImageStyle()
      Image($r("app.media.icon_tip")).setImageStyle()
      Image($r("app.media.ic_back")).setImageStyle()
      Image($r("app.media.foreground")).setImageStyle()
    }
    .width("100%")
    .height(200)
    .indicator(
      Indicator.dot()// 小圆点
        .itemWidth(20)// 默认的宽
        .itemHeight(20)// 默认的高
        .color(Color.Black)// 默认的颜色
        .selectedItemWidth(30)// 选中的宽
        .selectedItemHeight(30)// 选中的高
        .selectedColor(Color.White) // 选中的颜色
    )
    .autoPlay(true)
    .loop(true)
    .interval(3000)
    .vertical(false)

   Text("Builder")
  }
}