动态布局下加载loading效果实现

@Component 
export struct LocalStateCard { 
  @State state: string = StatefulEvents.Send.Action.LOADING; 
  @Prop pageId: string; 
  @State payload: payloadProd = undefined; 
  private context: Context = getContext(this); 
  private callback; 
  
  aboutToAppear() { 
    this.registerEvent(); //emit注册监听事件，监听动态布局接口响应结果 
  } 
  
  aboutToDisappear() { 
    emitter.off(this.context, EmitEventIdStr.NOTICE_NETWORK_REQUEST_RESULT, this.callback); 
  } 
  
  build() { 
   LoadingProgress() 
      .color($r('sys.color.ohos_id_color_progress')) 
      .width(50) 
      .height(50) 
      .visibility(this.state === StatefulEvents.Send.Action.LOADING ? Visibility.Visible : Visibility.None) 
      .focusable(false) // 避免loading动画抢占焦点，导致loading动画结束搜索框才能获焦 
  } 
  
  private handleMessage() { 
    try { 
      if (!this.payload || this.payload?.pageId !== this.pageId) return; 
      this.state = this.payload.method; 
    } catch (err) {} 
  } 
  
  private registerEvent(){ 
    this.callback = (eventData) => { 
      this.payload = eventData.data; 
      this.handleMessage(); 
    }; 
    emitter.on(this.context, EmitEventIdStr.NOTICE_NETWORK_REQUEST_RESULT, this.callback); 
  } 
}

@Entry 
@Component 
struct PagePage { 
  private pageInstanceManager: PageInstanceManager | null = null; 
  @State pageId: string = 'c|xxxxxxx'; 
  
  aboutToAppear() { 
    this.pageInstanceManager = FLayoutHelper.getInstance().createPageInstanceManager(this.pageId); 
  } 
  
  build() { 
    Column() { 
      LocalStateCard({pageId: this.pageId}); 
      if (this.pageInstanceManager) { 
        Frame({ pageInstanceManager: this.pageInstanceManager }); 
      } 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor($r('sys.color.ohos_id_color_sub_background')) 
  } 
}

export class PageLoadServiceImpl implements FLPageLoadService.Provider { 
    private currentEntryPageId: string = ""; 
    private isNetwork: boolean = true; 
  
    request(pageRequest: PageRequest, cardData?: FLCardData): Promise<JSONObject> { 
        return new Promise<JSONObject>((resolve,reject) => { 
            this.currentEntryPageId = pageRequest.getPageId(); 
            let retryTime = 0; 
                       const pageId: string = pageRequest.getPageId(); 
               const extra = pageRequest.getExtra(); 
               const pageSize: number = extra?.pageSize || 25; 
               let requestBean = new PageDetailRequestBean(1, pageSize, pageId); 
            new PageDetailRequest().request(requestBean).then((pageData) => {      
                resolve(pageData); 
            }).catch((err)=>{ 
                this.emitSuccess(this.currentEntryPageId, StatefulEvents.Send.Action.NONETWORK);  // 向LocalStateCard组件广播请求结果 
                reject(new FLException(err, ResponseErrorCode.ERROR, 'cardListRequest.cardListRequest request error')); 
            });;       
        }); 
    } 
  
  
    parse(pageParser: FLPageParser, data: JSONObject): Promise<FLPageBundle> { 
        return new Promise<FLPageBundle>((resolve, reject) => { 
            const pageId=data?.router?.entry; 
            let rtnCode = data?.rtnCode; 
            if (pageId) { 
                this.emitSuccess(this.currentEntryPageId, StatefulEvents.Send.Action.SUCCESS); 
                resolve(pageParser.parsePage(data.pages, pageId));           
            } else { 
                this.emitSuccess(this.currentEntryPageId, StatefulEvents.Send.Action.NONETWORK); // 向LocalStateCard组件广播请求结果 
                reject(new FLException(ResponseErrorCode.ERROR_NO_NETWORK, ResponseErrorCode.ERROR_NO_NETWORK, 'parse error ')); 
            } 
        }); 
    } 
    private emitSuccess(pageId: string, method: string) { 
        var eventData: EventData = { 
            data:{ method, pageId} 
        }; 
        const context: UIAbilityContext = getContext(); 
        emitter.emit(context, EmitEventIdStr.NOTICE_NETWORK_REQUEST_RESULT, eventData); 
    } 
} 
 

@Component 
export struct StatefullCard { 
  cardData: FLCardData; 
  private subscriberId: number = Subscriber.INVALID_ID; 
  @State statefulVisibility: Visibility = Visibility.Visible; 
  @State state: string = StatefulEvents.Send.Action.LOADING; 
  
  aboutToAppear() { 
    this.subscribe() 
  } 
  aboutToDisappear() { 
    this.unsubscribe() 
  } 
  
  private subscribe(): void { //注册监听，动态布局(id=stateful)加载成功的事件 
    this.subscriberId = EventQueue.sharedInstance.subscribe(this.subscriberId, this.cardData, function (msg:any){ 
      this.state = msg?.payload?.method; 
    }.bind(this)) 
  } 
  
  private unsubscribe(): void { 
    if (this.subscriberId != Subscriber.INVALID_ID) { 
        EventQueue.sharedInstance.unsubscribe(this.subscriberId); 
    } 
    this.subscriberId = Subscriber.INVALID_ID; 
  } 
  
  build() { 
    LoadingProgress() 
      .color($r('sys.color.ohos_id_color_progress')) 
      .width(50) 
      .height(50) 
      .visibility(this.state === StatefulEvents.Send.Action.LOADING ? Visibility.Visible : Visibility.None) 
      .focusable(false) // 避免loading动画抢占焦点，导致loading动画结束搜索框才能获焦 
  } 
  
  @Builder 
  static cardBuilder(options: BuildOptions<FLCardData>) { 
    StatefullCard({cardData: options.data} ) 
  } 
} 
  
export const StatefullCardBuilder = { 
  name: "statefullcard", 
  builder: StatefullCard.cardBuilder, 
  dataType: FLCardData 
}

{ 
  "name": "com.example.xxx.appgallery.homepage", 
  "type": "page", 
  }, 
  "children": [ 
    { 
      "type": "box", 
      "style": { 
        "height": "100%" 
      }, 
      "children": [ 
        { 
          "type": "tabs", 
          "data": { 
            "defaultItem": "{{tabScope.selection}}" 
          }, 
          "style": ".tabStyle", 
          "children": [ 
            { 
              "type": "tabcontent", 
              "data": { 
                "smoothScroll": false 
              }, 
              "children": [ 
                { 
                  "type": "box", 
                  "style": { 
                    "height": "100%" 
                  }, 
                  "s-for": "{{index,item in tabScope.list}}", 
                  "children": [ 
                    { 
                      "id": "stateful", 
                      "type": "statefullcard", 
                      "if": "{{index > 0}}" 
                    }, 
                    { 
                      "type": "frame", 
                      "style": { 
                        "height": "100%" 
                      }, 
                      "data": { 
                        "pageId": "{{item.frame.pageId}}" 
                      } 
                    } 
                  ] 
                } 
              ] 
            }, 
            { 
              "type": "tabitem", 
              "style": ".tabitemStyle", 
              "children": [ 
                { 
                  "type": "tabbutton", 
                  "s-for": "{{item in tabScope.list}}", 
                  "data": { 
                    "tabName": "{{item.title}}", 
                    "icon":"{{item.icon}}" 
                  } 
                } 
              ] 
            } 
          ] 
        } 
      ] 
    } 
  ] 
}