【中秋国庆不断更】OpenHarmony多态样式stateStyles使用场景 ...

@Styles和@Extend仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。这就是我们本章要介绍的内容stateStyles（又称为：多态样式）。
概述

stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下四种状态：
​                ● focused：获焦态。
​                ● normal：正常态。
​                ● pressed：按压态。
​                ● disabled：不可用态。
​                ● selected10+：选中态。
使用场景

基础场景

下面的示例展示了stateStyles最基本的使用场景。Button处于第一个组件，默认获焦，生效focused指定的粉色样式。按压时显示为pressed态指定的黑色。如果在Button前再放一个组件，使其不处于获焦态，就会生效normal态的黄色。

1. @Entry
2. @Component
3. struct StateStylesSample {
4.   build() {
5.     Column() {
6.       Button('Click me')
7.         .stateStyles({
8.           focused: {
9.             .backgroundColor(Color.Pink)
10.           },
11.           pressed: {
12.             .backgroundColor(Color.Black)
13.           },
14.           normal: {
15.             .backgroundColor(Color.Yellow)
16.           }
17.         })
18.     }.margin('30%')
19.   }
20. }

复制代码

图1 获焦态和按压态

@Styles和stateStyles联合使用

以下示例通过@Styles指定stateStyles的不同状态。

1. @Entry
2. @Component
3. struct MyComponent {
4.   @Styles normalStyle() {
5.     .backgroundColor(Color.Gray)
6.   }
8.   @Styles pressedStyle() {
9.     .backgroundColor(Color.Red)
10.   }
12.   build() {
13.     Column() {
14.       Text('Text1')
15.         .fontSize(50)
16.         .fontColor(Color.White)
17.         .stateStyles({
18.           normal: this.normalStyle,
19.           pressed: this.pressedStyle,
20.         })
21.     }
22.   }
23. }

复制代码

图2 正常态和按压态

在stateStyles里使用常规变量和状态变量

stateStyles可以通过this绑定组件内的常规变量和状态变量。

1. @Entry
2. @Component
3. struct CompWithInlineStateStyles {
4.   @State focusedColor: Color = Color.Red;
5.   normalColor: Color = Color.Green
7.   build() {
8.     Button('clickMe').height(100).width(100)
9.       .stateStyles({
10.         normal: {
11.           .backgroundColor(this.normalColor)
12.         },
13.         focused: {
14.           .backgroundColor(this.focusedColor)
15.         }
16.       })
17.       .onClick(() => {
18.         this.focusedColor = Color.Pink
19.       })
20.       .margin('30%')
21.   }
22. }

复制代码

Button默认获焦显示红色，点击事件触发后，获焦态变为粉色。
图3 点击改变获焦态样式

本文由博客一文多发平台 OpenWrite 发布！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！