Practical Development of HarmonyOS NEXT: Creating Efficient Pull-Up Refresh and Pull-Down Load Components (Part I)

Practical Development of HarmonyOS NEXT: Creating Efficient Pull-Up Refresh and Pull-Down Load Components (Part I) Design and Implementation of Empty Pages

Foreword:

In the world of HarmonyOS development, user experience is crucial. I searched online and found that existing pull-up refresh and pull-down load components are either incomplete in functionality or not elegant enough. Therefore, I decided to create a set of components that are both aesthetically pleasing and practical. This series of articles will delve into how to use HarmonyOS system components to encapsulate excellent pull-up refresh and pull-down load controls. Today, we will start with the development of empty pages and explore how to implement this feature in HarmonyOS.

Page Display

Pull-Down Refresh Display Effect:

I. The Importance of Empty Pages and Basic Logic

Empty pages play a vital role in applications, not only for pull-up refresh and pull-down load but also to provide user-friendly feedback before data loading. We divide empty pages into three states: failure view, no data view, and normal data view. Each state has its specific display logic.

Code Display:

export enum EmptyStatus {
  fail, // Failure view
  nodata, // No data view
  none // Normal data view
}

Display Logic:

if(this.layoutType === EmptyStatus.none){
  // Normal page
}else{
  // Exception page
}

II. Flexibility of Resource Replacement

To make the component more flexible, we allow developers to customize the images and text of the empty page by replacing resources with the same name. Whether it's a network anomaly or no data, developers can easily make personalized settings.

Code Example:

Image($r("app.media.emptypage_net_error")).width(100)
Text($r("app.string.emptypage_net_error"))
Image($r("app.media.emptypage_no_data")).width(100)
Text($r("app.string.emptypage_no_data"))

III. Implementation of Button Refresh

We provide an external refresh function for the component so that data can be reloaded when the user clicks the refresh button.

Code Example:

refresh? : () => void

IV. Complete Code Display

Below is the complete code for the empty page component, including the definition of resource files and the implementation of the component.

Resource File:

{
  "name": "emptypage_net_error",
  "value": "Oops，遇到问题了，刷新试试"
},
{
  "name": "emptypage_no_data",
  "value": "暂时没有任何数据，去别处看看吧"
},

All Code for Empty Page:

export enum EmptyStatus {
  fail, // Failure view
  nodata, // No data view
  none // Normal data view
}

@Preview
@Component
export struct EmptyWidget{
  @BuilderParam @Require
  child : () => void

  refresh? : () => void

  @Link layoutType : EmptyStatus

  build() {
    Stack({alignContent:Alignment.Center}){
      if(this.layoutType === EmptyStatus.none){
        this.child()
      }else{
        Column(){
          if(this.layoutType === EmptyStatus.fail){
            Image($r("app.media.emptypage_net_error")).width(100)
            Text($r("app.string.emptypage_net_error"))
          }else if(this.layoutType === EmptyStatus.nodata){
            Image($r("app.media.emptypage_no_data")).width(100)
            Text($r("app.string.emptypage_no_data"))
          }
          Button($r("app.string.emptypage_refresh"))
            .margin({top:10})
            .onClick(()=>{
            this.pressedReload()
          })
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.White)
        .width("100%")
        .height("100%")
      }
    }.width("100%")
    .height("100%")
  }

  private pressedReload(){
    if(!LibNetworkStatus.getInstance().isNetworkAvailable()){
      LibToast.show(Application.getInstance().resourceManager.getStringSync($r("app.string.network_no_connect").id))
    }else{
      if(this.refresh){
        this.refresh()
      }
    }
  }
}

Summary:

Through this article, we have not only learned how to implement a fully functional empty page component in HarmonyOS but also understood how to enhance the flexibility and practicality of the component through resource replacement and external function calls. This is just the beginning of our HarmonyOS development series. The following articles will delve into the implementation of pull-up load and pull-down refresh. Stay tuned.