HarmonyOS stateStyles标签如何引用Extend装饰器，装饰的方法？

Question

import { TopBar } from 'lib_common/src/main/ets/view/TopBar';

@Entry
@Component
struct BookPracticeMultiNewPage {
  @State tipsPlay: boolean = false
  build() {
    Stack() {
      TopBar()
      Column() {
        Row() {
          Text() {
            Span('1/5')
            Span('阅读理解题').margin({ left: 10 })
          }
          .backgroundColor('#F1DDB9')
          .fontSize(13)
          .fontColor('#302D33')
          .height(32)
          .borderRadius(16)
          .padding({ left: 12, right: 12 })

          if (this.tipsPlay) {
            ImageAnimator()
              .images([
                { src: $r('app.media.ic_exercises_record_play_one_new') },
                { src: $r('app.media.ic_exercises_record_play_two_new') },
                { src: $r('app.media.ic_exercises_record_play_three_new') }
              ])
              .duration(500)
              .state(this.tipsPlay ? AnimationStatus.Running : AnimationStatus.Stopped)
              .width(23)
              .height(18)
          } else {
            Image($r('app.media.ic_exercises_record_play_three_new')).width(23).height(18)
          }
          Blank()
          Text('查看全文')
            .width(72)
            .height(34)
            .fontSize(12)
            .fontColor(Color.White)
            .backgroundColor('#AE7A44')
            .borderRadius(32)
            .textAlign(TextAlign.Center)
          Row() {
            Text('自动翻页').fontSize(13).margin(3).stateStyles({
              selected: selectedStyle,
              pressed: selectedStyle,
              normal: normalStyle
            })
            Text('手动翻页').fontSize(13).margin(3).stateStyles({
              selected: selectedStyle,//这个如何调用外部的Extend方法
              pressed: selectedStyle,
              normal: normalStyle
            })
          }
          .width(150)
          .height(32)
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#FF9500')
          .borderRadius(16)

        }
        .width('100%')
        .justifyContent(FlexAlign.Start)
        .alignItems(VerticalAlign.Center)
        .margin({ left: 35, top: 20 })
        .height('auto')
      }.width('96%').height('98%')
      .backgroundImage($r('app.media.bg_book_practive'))
      .backgroundImageSize(ImageSize.FILL)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#FFE9A9')
  }

  aboutToAppear(): void {

  }
}

@Extend(Text)
function selectedStyle() {
  .backgroundColor(Color.White)
  .borderRadius(15)
  .fontColor('FF9500')
}

@Extend(Text)
function normalStyle() {
  .fontColor('#00b5ad')
}

stateStyles标签如何引用Extend装饰器，装饰的方法

Answer 1

@Extend是修饰组件的 stateStyles是组件的事件 所以内部无法使用@Extend修饰

可以使用@Extend修改stateStyles事件 然后使用全局方法即可

例如

@Extend(Text) function stateStylesCommon () {
  .stateStyles({
    selected: {
      .backgroundColor(Color.White)
      .borderRadius(15)
      .fontColor('FF9500')
    },
    pressed: {
      .backgroundColor(Color.Blue)
      .borderRadius(15)
      .fontColor('FF9500')
    },
    normal: {
      .backgroundColor(Color.White)
      .fontColor('#00b5ad')
    }
  })
}