封装骨架屏

爱学习的小齐哥哥

于 2025-07-09 20:45:28 发布

阅读量193

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HarmonyOS学习过程封装文章标签：前端 javascript 开发语言 harmonyos 华为

本文链接：https://blog.youkuaiyun.com/m0_59315734/article/details/149233212

HarmonyOS学习过程封装专栏收录该内容

3 篇文章

订阅专栏

1.编写骨架屏时需要先封装一个灰色块（util）----HcSkeletonItem

@Component
export struct HcSkeletonItem {
  @Prop
  widthValue: Length = '100%'
 
  build() {
    Text()
      .height(16)
      .width(this.widthValue)
      .borderRadius(2)
      .backgroundColor($r('app.color.common_gray_bg'))
  }
}

2.封装一个容器动画的组件-------HcSkeleton

使用builderParam尾随闭包添加调用结构

@Component
export struct HcSkeleton {
  @State opacityValue: number = 1
 
  @Builder
  defaultBuilder() {
  }
 
  @BuilderParam
  default: () => void = this.defaultBuilder
 
  build() {
    Row({ space: 15 }) {
      this.default()
    }
    .opacity(this.opacityValue)
    .animation({
      duration: 600,
      playMode: PlayMode.Alternate,
      iterations: -1,
      curve: Curve.EaseInOut
    })
    .onAppear(() => {
      this.opacityValue = 0.5
    })
  }
}

3.结合使用骨架屏

HcSkeleton() {
  Column({ space: 16 }){
    HcSkeletonItem({ widthValue: 100 })
    HcSkeletonItem({ widthValue: '50%' })
    HcSkeletonItem()
  }
  .padding(16)
}