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

发布于 1周前 作者 vueper 最后一次编辑是 5天前 来自 鸿蒙OS

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


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, 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装饰器，


更多关于HarmonyOS 鸿蒙Next stateStyles标签如何引用Extend装饰器，装饰的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

@Extend是修饰组件的 stateStyles是组件的事件 所以内部无法使用@Extend修饰 可以使用@Extend修改stateStyles事件 然后使用全局方法即可

例如

[@Extend](/user/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')
    }
  })
}

更多关于HarmonyOS 鸿蒙Next stateStyles标签如何引用Extend装饰器，装饰的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，next stateStyles标签通常用于定义UI组件在不同状态下的样式。而Extend装饰器则是一种用于扩展或修改已有功能的方式。不过，在鸿蒙系统的开发文档中，并没有直接提到Extend装饰器用于stateStyles标签的引用方法。

通常情况下，鸿蒙系统的样式和主题管理是通过XML或CSS样式表来实现的，而stateStyles标签是在这些样式表中定义的，用于指定组件在不同状态下的样式规则。

要在stateStyles中引用某种“扩展”的样式或功能，通常的做法是通过定义新的样式类或属性，并在样式表中引用它们。如果你提到的Extend装饰器是用于JavaScript或某种特定框架的扩展机制，那么它可能不适用于直接修改stateStyles标签。

对于鸿蒙系统来说，更常见的做法是使用系统提供的样式属性和类来定义组件的样式，并通过事件和状态管理来控制这些样式的应用。

在鸿蒙系统的实际开发中，如果需要实现类似“装饰”的效果，可以考虑通过自定义组件或样式类来实现。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部