HarmonyOS7 骨架屏比转圈更有耐心：先把页面结构露出来

最新推荐文章于 2026-07-31 22:12:05 发布

原创最新推荐文章于 2026-07-31 22:12:05 发布 · 153 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

为一篇讲解 HarmonyOS7 骨架屏的中文技术文章绘制一张 sketch-notes 风格信息图

文章目录

前言

商品列表一进来居中放一个转圈，用户只能等。他不知道这里会出现什么，也不知道页面是不是卡住了。骨架屏好一点，它至少先告诉用户：这里会有图片、标题、价格和操作按钮。

为一篇 HarmonyOS7 ArkTS 教程绘制一张 sketch-notes 风格框架图，主题是

HarmonyOS7 做电商、课程、消息列表时，我更愿意用骨架屏承接首屏加载。骨架屏不是灰色装饰，它是在加载阶段提前交代页面结构。

为什么这个问题经常被写乱

骨架屏比转圈更有耐心这类内容很容易被写成“代码能跑就算讲完了”，但对初学者来说，这恰恰是最不够的地方。真正让人卡住的，往往不是某个组件名记不住，而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。

为一篇讲解 HarmonyOS7 骨架屏实现的中文文章绘制一张 sketch-notes 风格流程图

所以这篇文章不只想给你一个能跑的例子，更想把背后的判断过程讲清楚。你只要把这个判断过程吃透，后面自己改页面、补需求、查问题时，心里会稳很多。

骨架要贴近真实卡片

区域	骨架形状	真实内容
商品图	方形灰块	商品封面
标题	两条短线	商品名与卖点
价格	短线	价格
操作	小圆角块	加购按钮

骨架数量和首屏真实卡片接近就够了，不要无限铺满页面。骨架尺寸也要贴近真实内容，否则加载完成后页面会跳动。

先把页面目标想清楚

在真正写代码之前，先别急着盯着 API。更有用的做法是先想清楚：这个页面到底想解决什么问题，用户最在意的反馈是什么，哪些状态必须一直保持一致。

当你先把这条主线想明白，再回头看组件和状态设计，很多选择都会顺理成章。对小白来说，这一步尤其重要，因为它能帮你从“照着抄”慢慢过渡到“看得懂、改得动”。

完整 ArkTS 示例

interface GoodsItem23 {
  id: number
  name: string
  price: string
  tag: string
}

@Entry
@Component
struct SkeletonGoodsPage {
  @State loading: boolean = true
  @State loadFailed: boolean = false
  @State goods: GoodsItem23[] = []

  aboutToAppear(): void {
    this.loadGoods()
  }

  async loadGoods(): Promise<void> {
    this.loading = true
    this.loadFailed = false
    try {
      await new Promise<void>((resolve) => {
        setTimeout(() => resolve(), 700)
      })
      this.goods = [
        { id: 1, name: '轻量通勤双肩包', price: '¥199', tag: '今日好价' },
        { id: 2, name: '桌面无线充电底座', price: '¥129', tag: '热卖' },
        { id: 3, name: '降噪蓝牙耳机', price: '¥399', tag: '新品' }
      ]
    } catch (err) {
      this.loadFailed = true
    } finally {
      this.loading = false
    }
  }

  @Builder
  SkeletonCard() {
    Row({ space: 12 }) {
      Blank().width(86).height(86).backgroundColor('#E5E8EF').borderRadius(10)
      Column({ space: 10 }) {
        Blank().width('80%').height(16).backgroundColor('#E5E8EF').borderRadius(4)
        Blank().width('56%').height(16).backgroundColor('#EEF0F5').borderRadius(4)
        Blank().width(72).height(22).backgroundColor('#E5E8EF').borderRadius(11)
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
    }
    .padding(12)
    .backgroundColor(Color.White)
    .borderRadius(12)
  }

  @Builder
  GoodsCard(item: GoodsItem23) {
    Row({ space: 12 }) {
      Stack() {
        Text(item.tag).fontSize(12).fontColor(Color.White)
      }
      .width(86)
      .height(86)
      .backgroundColor('#2F6FED')
      .borderRadius(10)

      Column({ space: 8 }) {
        Text(item.name).fontSize(17).fontWeight(FontWeight.Medium)
        Text('次日达 · 支持七天无理由').fontSize(12).fontColor('#777777')
        Row() {
          Text(item.price).fontSize(18).fontColor('#D92D20').fontWeight(FontWeight.Bold)
          Blank()
          Button('加购').height(30)
        }
        .width('100%')
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
    }
    .padding(12)
    .backgroundColor(Color.White)
    .borderRadius(12)
  }

  build() {
    Column({ space: 14 }) {
      Text('商品推荐').fontSize(24).fontWeight(FontWeight.Bold).width('100%')

      if (this.loading) {
        ForEach([0, 1, 2], (index: number) => {
          this.SkeletonCard()
        }, (index: number) => index.toString())
      } else if (this.loadFailed) {
        Column({ space: 10 }) {
          Text('商品加载失败').fontSize(18).fontWeight(FontWeight.Bold)
          Button('重新加载').onClick(() => this.loadGoods())
        }
        .padding(24)
        .width('100%')
        .backgroundColor(Color.White)
        .borderRadius(12)
      } else {
        ForEach(this.goods, (item: GoodsItem23) => {
          this.GoodsCard(item)
        }, (item: GoodsItem23) => item.id.toString())
      }
    }
    .padding(16)
    .width('100%')
    .height('100%')
    .backgroundColor('#F6F7F9')
  }
}