在我们日常开发当中是否会经常遇到重复样式，如下图
image.png
我们可以将样式封装成公共样式，用@Styles关键词，代码如下
一、定义公共样式
将代码放于文件的最上面
/**
* 全局公共样式函数
*/
@Styles function fillScreen(){
.width('100%')
.height('100%')
.backgroundColor('#efefef')
.padding(20)
}
/**
* 全局集成扩展样式（只能给Text使用）
*/
@Extend(Text) function priceText(fontColor: ResourceColor = '#F36', fontSize: string|number|Resource = 18){
.fontColor(fontColor)
.fontSize(fontSize)
}
这个时候有人要问了，@Style和@Extend有什么区别
@Style只能封装公共样式，就是所有ArkUI组件都具备的样式属性，比如width，height等等
@Extend 只能扩展制定ArkUI组件的样式，比如@Extend(Text) 就只能写Text特有的样式，@Extend(Image)就只能写Image特有的样式。
二、使用公共样式
//使用fillScreen代码一
build() {
Row() {
Column({ space: 8 }) {
//代码略
}
.fillScreen()
}
}
//使用priceText代码二
Column({ space: 4 }) {
if (item.discount) {
Text(item.name)
Text('原价：￥' + item.price)
.decoration({ type: TextDecorationType.LineThrough })
.priceText('#ccc')
Text('折扣价：￥' + (item.price - item.discount))
.priceText()
Text('补贴：￥' + item.discount)
.priceText()
} else {
Text(item.name)
Text('￥' + item.price)
.priceText()
}
}
