HarmonyOS应用开发-ArkTS语言的@Styles与@Extend

前言

本次内容就是 Style 和 Extend 的介绍和玩法以及场景,然后后面用一个水果面板案例来巩固一下.很简单,但是内容多慢慢消化!!

style 用于将重复的样式给他提出来形成公共的样式,

extend 用于将原生也就是系统的组件样式扩展

Styles 装饰器

@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式

⚠️ : 该装饰器支持在ArkTS卡片中使用

Styles 支持在组件当中定义或者全局定义,全局定义的时候需要 function 关键字 ，组件内定义时则不需要添加function关键字。

语法: Styles xxxx () {....}

@Entry
@Component
struct StyleStudy {
  @State message: string = 'Hello World'

  // 组件内
  @Styles style_1() {
    .width(120)
    .height(120)
    .backgroundColor("red")
  }

  build() {
    Row() {
      Column() {
        Text("halo")
          .style_1().fontSize(50)
      }
      .width('100%')
    }
    .height('100%')
  }
}

• 全局样式,和组内一样的用

• @Styles方法不支持参数

@Styles function globalFancy (value: number) {
  .width(value)
}

• 组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值

• 组件内@Styles的优先级高于全局@Styles,框架优先找当前组件内的@Styles，如果找不到，则会全局查找, 可以看到我们取一个一样的名称的样式表默认找最近的

使用代码 demo

演示了组内的样式和全局的样式使用方法

// @Styles不支持参数
// @Styles function globalFancy(value: number) {
//   .width(value)
// }

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

@Entry
@Component
struct StyleStudy {
    @State message: string = 'Hello World'

    // 组件内
    @Styles style_1() {
        .height(120)
        .backgroundColor("red")
    }

    build() {
        Row() {
            Column() {
                Text("halo我是父组件")
                .style_1().fontSize(30)

                // 看看 组件内的@Styles可以通过this访问组件的常量和状态变量，
                // 并可以在@Styles里通过事件来改变状态变量的值
                FancyUse()

            }
            .width('100%')
        }
        .height('100%')
    }
}

@Component
struct FancyUse {
    @State heightValue: number = 100

    @Styles fancy() {
        // 传递动态参数
        .height(this.heightValu