骨架屏的封装

最新推荐文章于 2024-09-24 08:48:12 发布

wo_hao_e

最新推荐文章于 2024-09-24 08:48:12 发布

阅读量479

点赞数 19

文章标签：开发语言鸿蒙

本文链接：https://blog.csdn.net/wo_hao_e/article/details/142027111

版权

骨架屏为当在加载时，需要设置等待的一些灰色块框架

1.编写骨架屏时需要先封装一个灰色块----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)
}