南昌外贸网站建设,北京网站外包公司推荐,中国工程建设管理协会网站,重庆网站建设价格Styles装饰器#xff1a;定义组件重用样式
如果每个组件的样式都需要单独设置#xff0c;在开发过程中会出现大量代码在进行重复样式设置#xff0c;虽然可以复制粘贴#xff0c;但为了代码简洁性和后续方便维护#xff0c;我们推出了可以提炼公共样式进行复用的装饰器St…Styles装饰器定义组件重用样式
如果每个组件的样式都需要单独设置在开发过程中会出现大量代码在进行重复样式设置虽然可以复制粘贴但为了代码简洁性和后续方便维护我们推出了可以提炼公共样式进行复用的装饰器Styles。
Styles装饰器可以将多条样式设置提炼成一个方法直接在组件声明的位置调用。通过Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。
装饰器使用说明 当前Styles仅支持通用属性和通用事件。Styles方法不支持参数反例如下。
// 反例 Styles不支持参数
Styles function globalFancy (value: number) {.width(value)
}
Styles可以定义在组件内或全局在全局定义时需在方法名前面添加function关键字组件内定义时则不需要添加function关键字。
// 全局
Styles function functionName() { ... }// 在组件内
Component
struct FancyUse {Styles fancy() {.height(100)}
}
定义在组件内的Styles可以通过this访问组件的常量和状态变量并可以在Styles里通过事件来改变状态变量的值示例如下
Component
struct FancyUse {State heightVlaue: number 100Styles fancy() {.height(this.heightVlaue).backgroundColor(Color.Yellow).onClick(() {this.heightVlaue 200})}
}
组件内Styles的优先级高于全局Styles。 框架优先找当前组件内的Styles如果找不到则会全局查找。
使用场景 以下示例中演示了组件内Styles和全局Styles的用法。
// 定义在全局的Styles封装的样式
Styles function globalFancy () {.width(150).height(100).backgroundColor(Color.Pink)
}Entry
Component
struct FancyUse {State heightVlaue: number 100// 定义在组件内的Styles封装的样式Styles fancy() {.width(200).height(this.heightVlaue).backgroundColor(Color.Yellow).onClick(() {this.heightVlaue 200})}build() {Column({ space: 10 }) {// 使用全局的Styles封装的样式Text(FancyA).globalFancy ().fontSize(30)// 使用组件内的Styles封装的样式Text(FancyB).fancy().fontSize(30)}}
}
Extend装饰器定义扩展组件样式
在前文的示例中可以使用Styles用于样式的扩展在Styles的基础上我们提供了Extend用于扩展原生组件样式。
语法
Extend(UIComponentName) function functionName { ... }
用规则 和Styles不同Extend仅支持定义在全局不支持在组件内部定义。和Styles不同Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的Extend的方法。
// Extend(Text)可以支持Text的私有属性fontColor
Extend(Text) function fancy () {.fontColor(Color.Red)
}
// superFancyText可以调用预定义的fancy
Extend(Text) function superFancyText(size:number) {.fontSize(size).fancy()
}
和Styles不同Extend装饰的方法支持参数开发者可以在调用时传递参数调用遵循TS方法传值调用。
// xxx.ets
Extend(Text) function fancy (fontSize: number) {.fontColor(Color.Red).fontSize(fontSize)
}Entry
Component
struct FancyUse {build() {Row({ space: 10 }) {Text(Fancy).fancy(16)Text(Fancy).fancy(24)}}
}
Extend装饰的方法的参数可以为function作为Event事件的句柄。
Extend(Text) function makeMeClick(onClick: () void) {.backgroundColor(Color.Blue).onClick(onClick)
}Entry
Component
struct FancyUse {State label: string Hello World;onClickHandler() {this.label Hello ArkUI;}build() {Row({ space: 10 }) {Text(${this.label}).makeMeClick(this.onClickHandler.bind(this))}}
}
Extend的参数可以为状态变量当状态变量改变时UI可以正常的被刷新渲染。
Extend(Text) function fancy (fontSize: number) {.fontColor(Color.Red).fontSize(fontSize)
}Entry
Component
struct FancyUse {State fontSizeValue: number 20build() {Row({ space: 10 }) {Text(Fancy).fancy(this.fontSizeValue).onClick(() {this.fontSizeValue 30})}}
}
使用场景 以下示例声明了3个Text组件每个Text组件均设置了fontStyle、fontWeight和backgroundColor样式。
Entry
Component
struct FancyUse {State label: string Hello Worldbuild() {Row({ space: 10 }) {Text(${this.label}).fontStyle(FontStyle.Italic).fontWeight(100).backgroundColor(Color.Blue)Text(${this.label}).fontStyle(FontStyle.Italic).fontWeight(200).backgroundColor(Color.Pink)Text(${this.label}).fontStyle(FontStyle.Italic).fontWeight(300).backgroundColor(Color.Orange)}.margin(20%)}
}
Extend将样式组合复用示例如下。
Extend(Text) function fancyText(weightValue: number, color: Color) {.fontStyle(FontStyle.Italic).fontWeight(weightValue).backgroundColor(color)
}
通过Extend组合样式后使得代码更加简洁增强可读性。
Entry
Component
struct FancyUse {State label: string Hello Worldbuild() {Row({ space: 10 }) {Text(${this.label}).fancyText(100, Color.Blue)Text(${this.label}).fancyText(200, Color.Pink)Text(${this.label}).fancyText(300, Color.Orange)}.margin(20%)}
}
stateStyles多态样式
Styles和Extend仅仅应用于静态页面的样式复用stateStyles可以依据组件的内部状态的不同快速设置不同样式。这就是我们本章要介绍的内容stateStyles又称为多态样式。
概述 stateStyles是属性方法可以根据UI内部状态来设置样式类似于css伪类但语法不同。ArkUI提供以下四种状态
focused获焦态。normal正常态。pressed按压态。disabled不可用态。
使用场景 基础场景 下面的示例展示了stateStyles最基本的使用场景。Button处于第一个组件默认获焦生效focused指定的粉色样式。按压时显示为pressed态指定的黑色。如果在Button前再放一个组件使其不处于获焦态就会生效normal态的黄色。
Entry
Component
struct StateStylesSample {build() {Column() {Button(Click me).stateStyles({focused: {.backgroundColor(Color.Pink)},pressed: {.backgroundColor(Color.Black)},normal: {.backgroundColor(Color.Yellow)}})}.margin(30%)}
}
图1 获焦态和按压态 Styles和stateStyles联合使用 以下示例通过Styles指定stateStyles的不同状态。
Entry
Component
struct MyComponent {Styles normalStyle() {.backgroundColor(Color.Gray)}Styles pressedStyle() {.backgroundColor(Color.Red)}build() {Column() {Text(Text1).fontSize(50).fontColor(Color.White).stateStyles({normal: this.normalStyle,pressed: this.pressedStyle,})}}
}
图2 正常态和按压态 在stateStyles里使用常规变量和状态变量 stateStyles可以通过this绑定组件内的常规变量和状态变量。
Entry
Component
struct CompWithInlineStateStyles {State focusedColor: Color Color.Red;normalColor: Color Color.Greenbuild() {Button(clickMe).height(100).width(100).stateStyles({normal: {.backgroundColor(this.normalColor)},focused: {.backgroundColor(this.focusedColor)}}).onClick(() {this.focusedColor Color.Pink}).margin(30%)}
}
Button默认获焦显示红色点击事件触发后获焦态变为粉色。
图3 点击改变获焦态样式
