鸿蒙Next骨架屏如何实现

在鸿蒙Next中如何实现骨架屏效果？想请教下具体的实现步骤和关键代码示例，是否有官方推荐的实现方式？另外，骨架屏的性能优化和适配不同设备尺寸方面有哪些注意事项？

2 回复

鸿蒙Next骨架屏实现很简单：用ProgressIndicator组件，设置indeterminate(true)，再加点自定义样式，比如颜色、尺寸。代码大概长这样：

<ProgressIndicator
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:indeterminate="true"
    ohos:progress_color="#FF0000"/>

搞定！像给界面穿了个“等待中的秋裤”，加载时优雅不尴尬~ 😄

更多关于鸿蒙Next骨架屏如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中实现骨架屏，可以通过以下步骤完成：

1. 布局设计

使用Column、Row和Stack等容器组件构建骨架结构，模拟实际内容的布局。

@Component
struct SkeletonScreen {
  build() {
    Column() {
      // 模拟头像
      Row() {
        Circle().width(60).height(60).fill('#E0E0E0')
      }
      .margin({ bottom: 20 })

      // 模拟文本行
      Column() {
        Line().width('80%').height(20).fill('#E0E0E0')
        Line().width('60%').height(20).fill('#E0E0E0')
      }
      .alignItems(HorizontalAlign.Start)
    }
    .padding(20)
  }
}

2. 动画效果

通过属性动画实现闪烁效果，增强用户体验：

@State private opacity: number = 0.3

aboutToAppear() {
  setInterval(() => {
    this.opacity = this.opacity === 0.3 ? 0.8 : 0.3
  }, 1000)
}

// 在组件中应用动画
Line()
  .width('80%')
  .height(20)
  .fill('#E0E0E0')
  .opacity(this.opacity)

3. 显示/隐藏控制

使用条件渲染在数据加载完成后切换显示内容：

@State isLoaded: boolean = false

build() {
  Column() {
    if (!this.isLoaded) {
      // 显示骨架屏
      SkeletonScreen()
    } else {
      // 显示实际内容
      ActualContent()
    }
  }
}

4. 封装复用

将骨架屏封装为自定义组件，便于在不同页面重复使用：

@Component
struct CustomSkeleton {
  build() {
    // 骨架屏具体实现
  }
}

实现要点：

  • 使用浅色背景（如#E0E0E0）模拟未加载状态
  • 保持骨架屏布局与实际内容布局一致
  • 通过状态变量控制显示时机
  • 适当添加动画提升用户体验

这种方式可以在数据加载期间提供良好的视觉反馈，避免页面空白带来的不良体验。

回到顶部