ArkUI @Styles：重复样式别一行行复制

今天我们用 @Styles 把几组重复样式收起来。

前面我们一直在写卡片、圆角、边框、背景色。这些东西如果每个组件都复制一遍，页面很快会变得又长又烦。@Styles 的价值很直接：它只复用样式，不生成结构。

参考文档：组件扩展

先分清它和 @Builder

@Builder 复用的是一段 UI：

• 可以有 Column、Text、Row。
• 可以组织多个子组件。
• 更像一段小模板。

@Styles 复用的是一串属性：

• 宽度。
• 留白。
• 圆角。
• 背景。
• 边框。

这两个别混。想复用结构，用 @Builder；想复用样式，用 @Styles。

写一个全局样式

@Styles
function sharedCardStyle() {
  .width('100%')
  .padding(16)
  .borderRadius(18)
  .backgroundColor('#FFFFFF')
  .border({ width: 1, color: '#E5E7EB' })
}

全局 @Styles 要写 function。它里面没有组件结构，只有链式属性。

调用时也很简单：

Column() {
  Text('全局 @Styles')
}
.sharedCardStyle()

再写一个组件内样式

@Styles
localNoteStyle() {
  .width('100%')
  .padding(14)
  .borderRadius(16)
  .backgroundColor('#F0FDFA')
}

组件内的 @Styles 不写 function。它更适合只服务当前页面的小样式。

这篇没有加点击事件，也没有做动态颜色。不是不能做，而是我们先把最常见的“样式复用”跑清楚。

页面效果

Demo 里有三块内容：

• 第一块使用全局 sharedCardStyle。
• 第二块使用组件内 localNoteStyle。
• 第三块继续复用全局样式，再额外覆盖背景色。

你可以顺手试试把卡片圆角或背景色改掉，看三块 UI 怎么跟着变化。这个反馈会很直观。

完整示例代码

文件位置：entry/src/main/ets/pages/arkUI/custom/ArkUIStylesDemo.ets

@Styles
function sharedCardStyle() {
  .width('100%')
  .padding(16)
  .borderRadius(18)
  .backgroundColor('#FFFFFF')
  .border({ width: 1, color: '#E5E7EB' })
}

@Entry
@Component
struct ArkUIStylesDemo {
  @Styles
  localNoteStyle() {
    .width('100%')
    .padding(14)
    .borderRadius(16)
    .backgroundColor('#F0FDFA')
  }

  @Builder
  HeaderBlock() {
    Column({ space: 8 }) {
      Text('ArkUI @Styles')
        .fontSize(28)
        .fontWeight(700)
        .fontColor('#111827')
      Text('重复样式别一行行复制')
        .fontSize(16)
        .fontColor('#4B5563')
      Text('@Styles 适合收起一组通用属性，比如宽度、留白、圆角、背景和边框。它不负责生成 UI 结构。')
        .fontSize(14)
        .fontColor('#6B7280')
        .lineHeight(22)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 20 }) {
        this.HeaderBlock()

        Column({ space: 8 }) {
          Text('全局 @Styles')
            .fontSize(18)
            .fontWeight(700)
            .fontColor('#111827')
          Text('sharedCardStyle 写在组件外，多个组件都能调用。它只放通用样式，不放子组件结构。')
            .fontSize(14)
            .fontColor('#4B5563')
            .lineHeight(21)
        }
        .sharedCardStyle()
        .alignItems(HorizontalAlign.Start)

        Column({ space: 8 }) {
          Text('组件内 @Styles')
            .fontSize(18)
            .fontWeight(700)
            .fontColor('#0F766E')
          Text('localNoteStyle 写在当前组件里，更适合只服务这个页面的小样式。')
            .fontSize(14)
            .fontColor('#115E59')
            .lineHeight(21)
        }
        .localNoteStyle()
        .alignItems(HorizontalAlign.Start)

        Column({ space: 8 }) {
          Text('它和 @Builder 不一样')
            .fontSize(18)
            .fontWeight(700)
            .fontColor('#B45309')
          Text('@Builder 收起的是一段 UI 结构，@Styles 收起的是一串样式属性。想清楚这个区别，后面封装就不容易乱。')
            .fontSize(14)
            .fontColor('#92400E')
            .lineHeight(21)
        }
        .sharedCardStyle()
        .backgroundColor('#FFFBEB')
        .alignItems(HorizontalAlign.Start)
      }
      .width('100%')
      .padding(24)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F8FAFC')
  }
}