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

文章目录

一、样式复用
- 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 {@StylespayAliStyle(){.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%')}
}