HarmonyOS中是否有骨架屏的设计范例？

Question

如题：HarmonyOS中是否有骨架屏的设计范例？

Answer 1

参考如下demo

@Extend(Column)
function commonStyle(width: string, color: Resource, opacity: number) {
  .width(width)
  .height('100%')
  .backgroundColor(color)
  .opacity(opacity)
  .borderRadius(2)
}

@Entry
@Component
export default struct YangTest1Page {
  @State arr: number[] = [];
  @State ColumnBgColor: Resource = $r('app.color.gray_C0C0C0')//C0C0C0
  @State ColumnOpacityCom: number = 0.5;
  @State ListOpacityCom: number = 0.5;
  @State listItemHeight: string = '20%'

  startAnimation() {
    animateTo({
      duration: 600, // 动画时长
      tempo: 0.6, // 播放速率
      curve: Curve.EaseInOut, // 动画曲线
      delay: 200, // 动画延迟
      iterations: -1, // 播放次数
      playMode: PlayMode.Alternate, // 动画模式
      onFinish: () => {
        console.info('play end')
      }
    }, () => {
      this.ListOpacityCom = 0.1;
    })
  }

  build() {
    Column() {
      List({ initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Column() {
              Row() {
                Column().commonStyle('50%', this.ColumnBgColor, this.ColumnOpacityCom)
                Column().commonStyle('30%', this.ColumnBgColor, this.ColumnOpacityCom)
              }.justifyContent(FlexAlign.SpaceBetween).width('100%').height('25%')

              Blank().height('8%')
              Row() {
                Column().commonStyle('50%', this.ColumnBgColor, this.ColumnOpacityCom)
                Column().commonStyle('30%', this.ColumnBgColor, this.ColumnOpacityCom)
              }.justifyContent(FlexAlign.SpaceBetween).width('100%').height('10%')

              Blank().height('8%')
              Row() {
                Column().layoutWeight(1)
                Column().commonStyle('30%', this.ColumnBgColor, this.ColumnOpacityCom)
              }.justifyContent(FlexAlign.SpaceBetween).width('100%').height('10%')

              Blank().height('8%')
              Row()
                .height('12%')
                .backgroundColor(this.ColumnBgColor)
                .width('100%')
                .opacity(this.ColumnOpacityCom)
                .borderRadius(2)
            }.margin({ top: '4%', bottom: '2%' })
          }
          .width('90%')
          .height(this.listItemHeight)
        }, (item: number) => JSON.stringify(item))
      }
      .alignListItem(ListItemAlign.Center)
      .listDirection(Axis.Vertical) // 排列方向
      .divider({ strokeWidth: 1, color: $r('app.color.gray_F4F5F7') }) // 每行之间的分界线 F4F5F7
      .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
      .onScrollIndex((firstIndex: number, lastIndex: number) => {
        console.info('first' + firstIndex)
        console.info('last' + lastIndex)
      })
      .scrollBar(BarState.Off)
      .opacity(this.ListOpacityCom)

      .width('100%')
      .onAppear(() => {
        this.startAnimation()
      })
    }.width('100%').height('100%').padding({ top: 5 })
    .onAreaChange((oldValue: Area, newValue: Area) => {
      const listHeight = Number(newValue.height)
      const length = Math.round(listHeight / 120)
      for (let i = 0; i < length; i++) {
        this.arr.push(i)
      }
      this.listItemHeight = Math.floor(100 / length) + '%'
    })
  }
}