鸿蒙NEXT开发-样式的语法和单位包括@Extend和@Styles复用样式样式-语法 ArkTS以声明方式组合和扩展

样式

样式-语法

ArkTS以声明方式组合和扩展组件来描述应用程序的UI；
同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑

样式属性

属性方法以 . 链式调用的方式配置系统组件的样式和其他属性

@Entry
  @Component
  struct Index {
    build() {
      Text('演示')
        .backgroundColor('red')
        .fontSize(50)
        .width('100%')
        .height(100)
    }
  }

枚举值

对于系统组件，ArkUI还为其属性预定义了一些枚举类型。文档链接

@Entry
  @Component
  struct Index {
    build() {
      Text('演示')
        .fontSize(50)
        .width('100%')
        .height(100)
        .backgroundColor(Color.Blue)
        .textAlign(TextAlign.Center)
        .fontColor(Color.White)
    }
  }

样式相关属性通过链式函数的方式进行设置
如果类型是枚举的，通过枚举传入对应的值

注意：有的属性强烈建议使用枚举（大部分枚举值都是数字，但是数字无法体现代码含义）

有的组件如fontColor可以使用系统自带颜色枚举，也可以使用色值

样式-像素单位

官方文档地址:developer.huawei.com/consumer/cn…

ArkUI为开发者提供4种像素单位，框架采用vp为基准数据单位

像素单位转换

在在样式中，我们如果写px，那么px直接表示的是物理像素，也就是分辨率，那么我们的手机分辨率密度各有不同，无法针对这种密度写一个固定值，所以vp会自动根据手机密度去进行适配，所以vp它提供了一种灵活的方式来适应不同屏幕密度的显示效果。

样式-@Extend 复用

假设我们就想针对 Text进行字体和样式的复用，此时可以使用Extend来修饰一个全局的方法

使用 @Extend 装饰器修饰的函数只能是全局
函数可以进行传参，如果参数是状态变量，状态更新后会刷新UI
且参数可以是一个函数，实现复用事件且可处理不同逻辑

注意： Extend扩展符只能和使用它的组件位于同一个文件，不允许导入导出，导入导出也使用不了

import { promptAction } from '@kit.ArkUI'

@Entry
  @Component
  struct Index {

    build() {
      Column({ space: 20 }) {
        Button("微信支付")
          .payButton("alipay")
        Button("微信支付")
          .payButton("wechat")
        Button("微信支付")
          .payButton("alipay")
        Button("微信支付")
          .payButton("wechat")
        Button("微信支付")
          .payButton("alipay")
        Button("微信支付")
          .payButton("wechat")
        Button("微信支付")
          .payButton("alipay")

      }
      .padding(20)
        .width('100%')
    }
  }

// 不允许导出
@Extend(Button)
  function  payButton (type: "alipay" | "wechat") {
    .type(ButtonType.Normal)
      .fontColor(Color.White)
      .width('100%')
      .height(50)
      .borderRadius(4)
      .backgroundColor(type === "wechat" ? "#00c168" : "#ff1256e0")
      .onClick(() => {
        if(type === "alipay") {
          promptAction.showToast({ message: '支付宝支付成功' })
        }else {
          promptAction.showToast({ message: '微信支付成功' })
        }

      })
  }

注意：@Extend()小括号里面要跟上要拓展组件的名称

样式-@Styles 复用

在开发过程中会出现大量代码在进行重复样式设置，@Styles 可以帮我们进行样式复用

通用属性通用事件

在Styles修饰的函数中能够点出来就是通用属性和事件-（比如Text的字体颜色-字体大小都不属于通用属性，类似Button里面就没字体颜色字体大小这些属性）

Styles修饰的函数不允许传参数

注意：全局Styles扩展符只能和使用它的组件位于同一个文件，不允许导入导出，导入导出也使用不了

import { promptAction } from '@kit.ArkUI'

@Styles
  function payStyle () {
    .width('100%')
      .height(50)
      .borderRadius(4)
      .backgroundColor("#00c168")
      .onClick(() => {
        promptAction.showToast({ message: '微信支付成功' })
      })
  }

@Entry
  @Component
  struct Index {
    @Styles
    payStyle() {
      .width('100%')
        .height(50)
        .borderRadius(4)
        .backgroundColor("#ff1256e0")
        .onClick(() => {
          promptAction.showToast({ message: '支付宝支付成功' })
        })
    }


    build() {
      Column({ space: 20 }) {
        Row() {
          Button("微信支付", { type: ButtonType.Normal })
            .payStyle()
            .fontColor(Color.White)
        }
        .padding(10)
        Row() {
          Button("微信支付", { type: ButtonType.Normal })
            .payStyle()
            .fontColor(Color.White)
        }
        .padding(10)
        Row() {
          Button("微信支付", { type: ButtonType.Normal })
            .payStyle()
            .fontColor(Color.White)
        }
        .padding(10)

      }
    }
  }

注意： Styles和Extend均只支持在当前文件下的全局或者组件内部定义，如果你想要在其他文件导出一个公共样式，导出公共使用，ArtTS是不支持的，这种方式还是需要考虑组件复用。