ArkUI的样式二 - 技术栈

在上一个篇章中我们介绍和了解了基本的样式组件方法属性等，在这一篇内容中我们来了解一下@Styles装饰器和@Extend装饰器。

在我们很多的开发场景中都会用到很多重复的样式，这会出现大量代码在进行重复的样式设置，@Styles装饰器可以将多条样式设置成一个方法，直接在组件声明的位置调用。注意：@Styles仅支持通用属性和通用事件，也就是说组件的样式和事件我们是无法使用@Styles装饰器。 @Styles可以定义在组件内或全局，在全局定义时需要在方法名前面添加function关键字，而在组件内定义时则不需要添加function关键字。

使用示例如下:

less 复制代码

@Styles
function exampleStyle2() {
  .width("100%")
  .height(100)
  .padding(16)
  .backgroundColor("#ff0000")
}

@Entry
@Component
struct StylesPage {
  @Styles
  exampleStyle() {
    .width("100%")
    .height(100)
    .padding(16)
    .backgroundColor("#ff0000")
  }

  build() {
    Column({ space: 12 }) {
      Text("Hello")
        .fontColor("#ffffff")
        .exampleStyle()

      Text("hello")
        .width("100%")
        .height(100)
        .padding(16)
        .backgroundColor("#ff0000")

      Text("你好")
        .exampleStyle2()
    }
  }
}

从图片中我们便可以看得出来无论是使用哪一种方式，所呈现出来的效果都是一致的，这便是@Styles的基本使用方法。

@Extend装饰器，从上面描述中我们便可以知晓@Styles用于样式的复用但是限制于通用样式，于是为了弥补这个缺失，@Extend装饰器便产生出来，用于扩展原生组件样式。

与@Styles的不同： @Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。

@Extend装饰的方法支持参数，可以在调用时传递参数，调用遵循TS方法传值调用。

@Extend装饰的方法的参数可以为function，作为Event事件的句柄。

@Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染。

@Extend仅支持在全局定义，不支持在组件内部定义。

使用示例如下：

typescript 复制代码

import { promptAction } from '@kit.ArkUI'

@Extend(Text)
function extendTxt() {
  .backgroundColor("#ff6600")
  .fontColor("#ffffff")
  .fontWeight(FontWeight.Bold)
  .height(20)
  .onClick(() => { promptAction.showToast({message: "我是Extend的导出" }) })
}

@Entry
@Component
struct StylesPage {
  @Styles
  exampleStyle() {
    .width("100%")
    .height(100)
    .padding(16)
    .backgroundColor("#ff0000")
  }

  build() {
    Column({ space: 12 }) {
      Text("Hello")
        .extendTxt()
      Text("hello")
        .extendTxt()

      Text("你好")
        .extendTxt()

    }
  }
}

从代码中我们便可以看得出@Extend的基本使用手法

Harmony OS NEXT API12

本次就暂时介绍这么多，在下一篇内容中我会给大家介绍一下样式复用的修饰器

谢谢各位的观看，有错误不足的地方，本人乐于接受各位的意见