HarmonyOS NEXT学习——@Styles、@Extend、stateStyles

@Styles装饰器 定义组件重用样式

• 仅支持通用属性和通用事件
• 不支持参数
• 可以定义全局和组件内使用，全局使用需要加function

// 全局
@Styles function functionName() { ... }

// 在组件内
@Component
struct FancyUse {
  @Styles fancy() {
    .height(100)
  }
}
1
2
3
4
5
6
7
8
9
10

• 组件内@Styles的优先级高于全局@Styles。

// 定义在全局的@Styles封装的样式
@Styles function globalFancy  () {
  .width(100)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
@Preview
struct FancyUse {
  @State heightValue: number = 100
  // 定义在组件内的@Styles封装的样式
  @Styles fancy() {
    .width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }

  build() {
    Column({ space: 10 }) {
      // 使用全局的@Styles封装的样式
      Text('FancyA')
        .globalFancy()
        .fontSize(30)
      // 使用组件内的@Styles封装的样式
      Text('FancyB')
        .fancy()
        .fontSize(30)
      //组件内优先级高于全局
      Text('FancyAB')
        .globalFancy()
        .fancy()
        .fontSize(30)
    }
    .alignItems(HorizontalAlign.Start)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

@Extend装饰器：定义扩展组件样式

• @Styles用于样式的扩展
• 可以传参数
• 仅能全局定义

@Extend(Text) function fancyText(weightValue: number, color: Color,clickE:()=>void) {
  .fontStyle(FontStyle.Italic)
  .fontSize(weightValue)
  .backgroundColor(color)
  .onClick(clickE)
}
@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  onClickHandler(){
    console.log('40')
  }
  build() {
    Column() {
      Text(`${this.label}`)
        .fancyText(30, Color.Blue,()=>{console.log('30')})
      Text(`${this.label}`)
        .fancyText(40, Color.Pink,()=>{this.onClickHandler()})
      Text(`${this.label}`)
        .fancyText(50, Color.Orange,()=>{console.log('50')})
    }
    .alignItems(HorizontalAlign.Start)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

三个点击事件

stateStyles 多态样式

stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下五种状态：

• focused：获焦态。
• normal：正常态。
• pressed：按压态。
• disabled：不可用态。
• selected：选中态。

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Column() {
      Text(`${this.label}`)
        .stateStyles({
          normal:{
            .backgroundColor(Color.Yellow)
          },
          pressed:{
            .backgroundColor(Color.Pink)
          }
        })
        .fontSize(40)
    }
    .alignItems(HorizontalAlign.Start)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22