鸿蒙NEXT版实战开发：UI框架-如何实现页面加载的loading效果

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

如何实现页面加载的loading效果

使用Stack堆叠组件和LoadingProgress加载组件来实现首次进入页面，页面加载的效果。

参考代码如下： 

@Entry 
@Component 
struct PageLoading { 
  @State isLoading: Boolean = true; 
 
  aboutToAppear(): void { 
    // 模拟网络请求操作，请求网络3秒后得到数据，通知组件，变更列表数据 
    setTimeout(() => { 
      this.isLoading = false; 
    }, 3000); 
  } 
 
  build() { 
    Stack() { 
      if (this.isLoading) { 
        Column() { 
          LoadingProgress() 
            .color(Color.White) 
            .width(80).height(80) 
          Text('努力加载中..') 
            .fontSize(16) 
            .fontColor(Color.White) 
        } 
        .width('100%') 
        .height('100%') 
        .backgroundColor('#40000000') 
        .justifyContent(FlexAlign.Center) 
      } else { 
        Column(){ 
          Text('主页') 
        } 
      } 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(Color.White) 
  } 
}

​