HarmonyOS开发：三种代码重用方式对比

原创于 2025-08-26 08:31:28 发布 · 145 阅读

CC 4.0 BY-SA版权

文章标签：

随着页面的复杂程度提高，页面有很多的样式代码或者结构代码，其中难免有重复的地方，这时我们将重复的代码提取出来，进行重用就可以提升编码效率，减少重复代码，提升代码可读性。下面是三种重用的区别。

名称	适合	参数
@Styles	抽取公共样式、事件	不可以传递参数, 全局或组件内定义
@Extend(组件名)	抽取特定组件样式、事件	可以传递参数, 只能全局定义
@Builder	抽取结构、样式、事件	可以传递参数, 全局或组件内定义

1.@Styles装饰器

@Styles通常是用来抽取通用的事件和属性，比如说：宽高，和点击事件等。

特点：

1、可以在全局定义也可以在局部定义

2、不能传递参数

3、可以使用状态变量

4、只能重用通用样式

语法：

// 全局定义
@Styles function functionName() {
  .通用属性()
  .通用事件(()=>{})
}

@Entry
@Component
struct FancyUse {
  
  // 在组件内定义
  @Styles fancy() {
      .通用属性()
      .通用事件(()=>{
        this.xxx
      })
  }

  build() {
    Column(){
      // 使用
      组件().fancy()
      组件().functionName()
    }

  }
}


//参考代码

@Styles
function globalSize() {
  .width(100)
  .height(100)
}

@Entry
@Component
struct Page05_Styles {
  @State message: string = '@styles';
  @State bgColor: ResourceColor = Color.Gray

  build() {
    Column({ space: 10 }) {
      Text('@Styles')
        .fontSize(20)
        .fontWeight(900)
        .padding(10)


      Column() {
      }
      .globalSize()
      .setBgColor()


      Button('按钮')
        .globalSize()
        .setBgColor()
    }
    .width('100%')
    .height('100%')
  }

  @Styles
  setBgColor() {
    .backgroundColor(this.bgColor)
    .onClick(() => {
      this.bgColor = Color.Yellow
    })
  }
}

2.@Extend装饰器

@Extend可以拓展组件的样式、事件。

特点：

1、只能设置在全局

2、可以传递参数

3、只能拓展指定的组件，也就是说只能重用拓展的组件相关的样式

4、不能使用状态变量

语法：

// 定义
@Extend(组件名) 
function functionName(参数1....) {
  .属性()
  .事件(()=>{})
}
// 使用
组件(){}
  .functionName(参数1...)


//参考代码
@Extend(Text)
function TextExtend(color: ResourceColor, message: string) {
  .textAlign(TextAlign.Center)
  .backgroundColor(color)
  .fontColor(Color.White)
  .fontSize(30)
  .onClick(() => {
    AlertDialog.show({
      message: message
    })
  })
}

@Entry
@Component
struct Page06_Extend {

  build() {
    Column() {
      Text('@Extends')
        .fontSize(20)
        .fontWeight(900)
        .padding(10)
      Swiper() {
        Text('0')
          .TextExtend(Color.Red,'轮播图 1')
        Text('1')
          .TextExtend(Color.Green,'轮播图 2')
        Text('2')
          .TextExtend(Color.Blue,'轮播图 3')
      }
      .width('100%')
      .height(160)
    }
    .width('100%')
    .height('100%')
  }
}

3.@Builder装饰器

@Builder是一个装饰器，它用于定义一个可复用的 UI 片段，这个片段可以被多个组件调用。你可以把它理解为一个自定义的、内联的、轻量级的“组件构建函数”。

特点：

1、可以设置全局，也可以设置局部

2、可以传递参数

3、可以重用结构、样式、事件

4、可以使用状态变量

语法：

// 自定义 全局 构建函数
@Builder function MyGlobalBuilderFunction(param1,param2...) {
  // 结构、属性、事件放这里
}
// 使用
MyGlobalBuilderFunction(param1,param2...)



// 自定义 组件内 构建函数
@Builder MyBuilderFunction( param1,param2...) {
  // 结构、属性、事件放这里
}
// 通过 this 来使用
this.MyBuilderFunction(param1,param2...)

//参考代码
// 全局的 Builder
@Builder
function globalItem(icon: ResourceStr, title: string) {
  Column({ space: 10 }) {
    Image(icon)
      .width('80%');
    Text(title);
  }
  .width('25%')
  .onClick(() => {
    AlertDialog.show({
      message: '点了 ' + title
    });
  })
}

@Entry
@Component
struct Page07_Builder {
  build() {
    Column({ space: 20 }) {
      Text('@Builder')
        .fontSize(20)
        .fontWeight(900)
        .padding(10)

      Row() {
        Row() {
          // 全局
          globalItem($r('app.media.ic_reuse_01'), '阿里拍卖')
          globalItem($r('app.media.ic_reuse_02'), '菜鸟')

          // 组件内部
          this.localItem($r('app.media.ic_reuse_03'), '芭芭农场')
          this.localItem($r('app.media.ic_reuse_04'), '阿里药房')

        }
      }
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  localItem(icon: ResourceStr, title: string) {
    Column({ space: 10 }) {
      Image(icon)
        .width('80%');
      Text(title);
    }
    .width('25%')
    .onClick(() => {
      AlertDialog.show({
        message: '点了 ' + title
      });
    })
  }
}

案例练习：

interface XMNavItem {
  title: string
  icon: ResourceStr // 联合属性 Resource | string
}

@Entry
@Component
struct Page15_GridDemo_Xiaomi_Scrollbar {
  // 数据 只需要渲染，所以没有使用@State 修饰
  navList: XMNavItem[] = [
    { title: '上新精选', icon: $r('app.media.ic_xiaomi_nav_01') },
    { title: '智能家电', icon: $r('app.media.ic_xiaomi_nav_02') },
    { title: '小米众筹', icon: $r('app.media.ic_xiaomi_nav_03') },
    { title: '有品会员', icon: $r('app.media.ic_xiaomi_nav_04') },
    { title: '有品秒杀', icon: $r('app.media.ic_xiaomi_nav_05') },
    { title: '原产地', icon: $r('app.media.ic_xiaomi_nav_06') },
    { title: '生活优选', icon: $r('app.media.ic_xiaomi_nav_07') },
    { title: '手机', icon: $r('app.media.ic_xiaomi_nav_08') },
    { title: '小米自营', icon: $r('app.media.ic_xiaomi_nav_09') },
    { title: '茅台酒饮', icon: $r('app.media.ic_xiaomi_nav_10') },
    { title: '鞋服饰品', icon: $r('app.media.ic_xiaomi_nav_11') },
    { title: '家纺餐厨', icon: $r('app.media.ic_xiaomi_nav_12') },
    { title: '食品生鲜', icon: $r('app.media.ic_xiaomi_nav_13') },
    { title: '好惠买', icon: $r('app.media.ic_xiaomi_nav_14') },
    { title: '家具家装', icon: $r('app.media.ic_xiaomi_nav_15') },
    { title: '健康养生', icon: $r('app.media.ic_xiaomi_nav_16') },
    { title: '有品海购', icon: $r('app.media.ic_xiaomi_nav_17') },
    { title: '个护清洁', icon: $r('app.media.ic_xiaomi_nav_18') },
    { title: '户外运动', icon: $r('app.media.ic_xiaomi_nav_19') },
    { title: '3C数码', icon: $r('app.media.ic_xiaomi_nav_20') }
  ]
  // 创建控制器对象
  scroller: Scroller = new Scroller()

  build() {
    Column() {
      Text('小米有品')
        .fontSize(20)
        .fontWeight(900)
        .padding(10)
      Grid(this.scroller) {
        ForEach(this.navList, (item: XMNavItem) => {
          GridItem() {
            Column() {
              Image(item.icon)
                .width('80%')
              Text(item.title)
                .fontSize(12)
            }
            .height('100%')
          }
          .width('20%')
        })
      }
      .rowsTemplate('1fr 1fr')
      .height(160)
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(5)
      .padding({ bottom: 10 })
      .scrollBar(BarState.Off) // 关闭滚动条

      // 自定义滚动条
      ScrollBar({
        scroller: this.scroller,
        direction: ScrollBarDirection.Horizontal, // 横向滚动
        state: BarState.On // 持续显示
      }) {
        Text()
          .height(5)
          .width(20)
          .backgroundColor(Color.Orange)
          .borderRadius(3)
      }
      .width(50)
      .height(5)
      .backgroundColor(Color.Gray)
      .borderRadius(3)
      .offset({ y: -10 })

    }
    .width('100%')
    .height('100%')
    .padding(10)
    .backgroundColor('#f5f5f5')

  }
}