HarmonyOS 全局loading的菊花如何实现？

Question

这种页面上的菊花怎么实现？把每个页面都设置成Stack({ })？ 然后里面放一个菊花的控件？请提供全局loading的实现，参考一下。

Answer 1

可以封装一个组件进行全局调用，可以参考以下案例：

@Entry 
@Component 
export struct LoadingPage { 
  @Prop flag: boolean; 
  build() { 
    Row() { 
      LoadingProgress().color(Color.White).width(50).height(50) 
    } 
    .height(this.flag ? '100%' : 0) 
    .width('100%') 
    .position({ x: 0, y: 0 }) 
    .backgroundColor('#4D000000') 
    .justifyContent(FlexAlign.Center) 
  } 
}

调用：

import { LoadingPage } from './LoadingPage' 
@Entry 
@Component 
struct PageThree { 
  @State flag: boolean = false; // 控制是否加载 
  build() { 
    Column() { 
      Button('加载动画').onClick((event: ClickEvent) => { 
        this.flag = !this.flag; 
      }) 
      LoadingPage({ flag: this.flag }); 
    } 
    .height('100%') 
    .width('100%') 
    .alignItems(HorizontalAlign.Start) 
    .justifyContent(FlexAlign.Start) 
  } 
}