Zenn
💬

HarmonyOS NEXT開発実践：効率的なプルアップリフレッシュとプルダウンロードコンポーネントの制作（一）空ページのデザインと実装

に公開
HarmonyOS
tech

まえがき

HarmonyOSの開発の世界では、ユーザーエクスペリエンスが非常に重要です。私はネットワーク上で検索をしましたが、既存のプルアップリフレッシュとプルダウンロードコンポーネントは機能が不十分であったり、エレガントでなかったりします。したがって、自分で作ることにしました。このシリーズの記事では、HarmonyOSシステムコンポーネントを使用して優れたプルアップリフレッシュとプルダウンロードコントロールをどのようにカプセル化するかを詳しく解析します。今日は、空ページの開発から始め、HarmonyOSでこの機能をどのように実現するかを探ります。

ページの表示

画像の説明

プルダウンリフレッシュの表示効果：

画像の説明

一、空ページの重要性と基本ロジック

空ページはアプリケーションで非常に重要な役割を果たし、データの読み込み前にユーザーフriendlyなフィードバックを提供するだけでなく、プルアップリフレッシュとプルダウンロードにも使用されます。空ページを3つの状態に分けます：失敗ビュー、データなしビュー、および正常データビュー。各状態には特定の表示ロジックがあります。

コードの表示：

export enum EmptyStatus {
  fail, // 失敗ビュー
  nodata, // データなしビュー
  none // 正常データビュー
}

表示ロジック：

if(this.layoutType === EmptyStatus.none){
  // 正常ページ
}else{
  // 異常ページ
}

二、リソースの柔軟な置き換え

コンポーネントをより柔軟にするために、開発者が同名のリソースを置き換えて空ページの画像とテキストをカスタマイズできるようにしました。ネットワークエラーまたはデータが空の場合でも、開発者は簡単にカスタマイズできます。

コードの例：

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"))

三、ボタンリフレッシュの実装

コンポーネントに外部から渡されるリフレッシュ関数を提供し、ユーザーがリフレッシュボタンをクリックするとデータを再読み込みできるようにしました。

コードの例：

refresh? : () => void

四、完全なコードの表示

空ページコンポーネントの完全なコードは、リソースファイルの定義とコンポーネントの実装を含んでいます。

リソースファイル：

{
  "name": "emptypage_net_error",
  "value": "Oops，問題が発生しました。リフレッシュを試してください"
},
{
  "name": "emptypage_no_data",
  "value": "現在データがありません。他の場所をチェックしてください"
},

空ページのすべてのコード：

export enum EmptyStatus {
  fail, // 失敗ビュー
  nodata, // データなしビュー
  none // 正常データビュー
}

@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()
      }
    }
  }
}

おわりに

本稿では、HarmonyOSで機能が完全な空ページコンポーネントを実現する方法だけでなく、リソースの置き換えと外部関数の呼び出しによってコンポーネントの柔軟性和実用性を高める方法について学びました。これは私たちのHarmonyOS開発実践シリーズの始まりで、次の章ではプルアップロードとプルダウンリフレッシュの実装について詳しく探ります。ご期待ください。

Discussion