当前位置：首页 > news >正文

鸿蒙开发03样式相关介绍（二）

news 来源：原创 2025/6/3 3:48:41

文章目录

一、样式复用
- 1.1 @Styles修饰符
- 1.2 @Extend修饰符
二、多态样式

一、样式复用

在页面开发过程中，会出出现大量重复的样式设置代码，可以使用@Styles和@Extend修饰符将帮助我们进行样式复用。

1.1 @Styles修饰符

@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。

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

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

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

      Row(){
        Button("支付宝支付", { type: ButtonType.Normal })
          .payAliStyle()
          .fontColor(Color.White)
      }.padding(20)
    }
  }
}

使用说明：

仅支持通用属性和通用事件
可以定义在组件内（不需加function）或全局
同时在组件内或全局定义时，组件内生效

限制条件：

方法中不能有参数
不支持导出

1.2 @Extend修饰符

@Extend修饰符针对某类组件进行样式扩展，同样为了复用样式。

@Entry
@Component
struct ExtendCase {

  build() {
    Column({space: 20}){
      Button('支付宝支付')
        .payButton('alipay')
      Button('微信支付')
        .payButton('wechat')
    }
    .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:"微信支付成功"})
    }
  })
}

使用说明：

只能定义在全局函数
指定组件，只支持指定组件的私有属性、私有事件
函数支持传参

限制条件：

不支持导出

二、多态样式

多态样式（stateStyles）根据组件内部状态的不同，快速设置不同样式。
ArkUI提供五种状态：

focused：获焦态
normal：正常态
pressed：按压态
disabled：不可用态
selected：选中态

@Entry
@Component
struct StateStylesCase {

  build() {
    Column({space: 20}){
      Row(){
        Text('你好！鸿蒙')
      }
      .padding(20)
      .height(80)
      .border({
        color: '#f3f4f5',
        width: 3
      })
      .borderRadius(4)
      .stateStyles({
        normal: {
          .backgroundColor(Color.White)
        },
        pressed: {
          .backgroundColor('#eee')
        }
      })
      .width('100%')
    }
    .padding(20)
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}