概要
当多个组件具有相同的样式时,若每个组件都单独设置,将会有大量的重复代码。为避免重复代码,可使用@Styles或者@Extend装饰器将多条样式设置提炼成一个方法,然后直接在各的位置进行调用,这样就能完成样式的复用了。
说明
@Styles语法结构:
@Styles可以定义在组件内或全局,在全局定义时需在方法名前面添加function关键字,组件内定义时则不需要添加function关键字。
1、全局样式:
@Styles
function functionName() { ... }
2.组件内样式:
@Entry
@Component
struct Index{
// 组件内
@Styles
functionName() { ... }
build() {
Text('原神,启动!')
.functionName()
}
}
技术细节
1.当前 @Styles 仅支持 通用属性 和 通用事件。
2. @Styles 支持 全局 定义和 组件内 定义。
3.组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles,如果找不到,则会全局查找。
4.组件内的@Styles方法只能在当前组件中使用,全局的@Styles方法目前只允许在当前的.ets文件中使用。
5.组件内定义@Styles方法时不需要使用function关键字,全局的@Styles方法需要使用function关键字@Styles方法不支持参数。
练习题
需求:两个按钮,复用按钮的样式(用两种样式):
.width(100)
.height(40)
.borderRadius(10)
答案:
组件内引用:
@Entry
@Component
struct StylePage {
build() {
Column(){
Row({space:30}){
Button('确认').type(ButtonType.Normal)
.backgroundColor(Color.Green)/*.width(150).height(60).borderRadius(10)*/
//引用自定义样式
.buttonStyle()
Button('取消').type(ButtonType.Normal)
.backgroundColor(Color.Grey)/*.width(150).height(60).borderRadius(10)*/
//引用自定义样式
.buttonStyle()
}
}
}
//组件内自定义样式
@Styles buttonStyle(){
.width(150)
.height(60)
.borderRadius(10)
}
}
全局引用:
@Entry
@Component
struct StyleGlobalPageC3 {
build() {
Column(){
Row({space:30}){
Button('确认').type(ButtonType.Normal)
.backgroundColor(Color.Green)/*.width(150).height(60).borderRadius(10)*/
//引用全局样式
.buttonStyleGlobal()
Button('取消').type(ButtonType.Normal)
.backgroundColor(Color.Grey)/*.width(150).height(60).borderRadius(10)*/
//引用全局样式
.buttonStyleGlobal()
}
}.width('100%')
.height('100%')
//对齐方式
.justifyContent(FlexAlign.Center)
}
}
//定义全局样式
@Styles function buttonStyleGlobal(){
.width(150)
.height(60)
.borderRadius(10)
}
小结:
注意@Styles装饰器的使用方法,下篇文章我们将讲@Extend装饰器的使用方法及不同以便更好理解。