快捷導(dǎo)航

Flutter開發(fā)通用頁面Loading組件示例詳解

更新時(shí)間：2022年11月28日 10:34:52 作者：Fitem

這篇文章主要為大家介紹了Flutter開發(fā)通用頁面Loading組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前沿

頁面通用Loading組件是一個(gè)App必不可少的基礎(chǔ)功能，之前只開發(fā)過Android原生的頁面Loading，這次就按原生的邏輯再開發(fā)一個(gè)Flutter的Widget，對(duì)其進(jìn)行封裝復(fù)用

我們先看下效果：

原理

狀態(tài)

一個(gè)通用的頁面加載Loading組件應(yīng)該具備以下幾種狀態(tài)：

IDLE 初始化

Idle狀態(tài)，此時(shí)的組件還只是初始化

LOADING 加載中

Loading狀態(tài)，一般在網(wǎng)絡(luò)請(qǐng)求或者耗時(shí)加載數(shù)據(jù)時(shí)調(diào)用，通用顯示的是一個(gè)progress或者自定義的幀動(dòng)畫

LOADING_SUCCESS

LoadingSuccess加載成功，一般在網(wǎng)絡(luò)請(qǐng)求成功后調(diào)用，并將需要展示的頁面展示出來

LOADING_SUCCESS_BUT_EMPTY

頁面加載成功但是沒有數(shù)據(jù)，這種情況一般是發(fā)起列表數(shù)據(jù)請(qǐng)求但是沒有數(shù)據(jù)，通常我們會(huì)展示一個(gè)空數(shù)據(jù)的頁面來提醒用戶

NETWORK_BLOCKED

網(wǎng)絡(luò)錯(cuò)誤，一般是由于網(wǎng)絡(luò)異常、網(wǎng)絡(luò)請(qǐng)求連接超時(shí)導(dǎo)致。此時(shí)我們需要展示一個(gè)網(wǎng)絡(luò)錯(cuò)誤的頁面，并且?guī)в兄卦嚢粹o，讓用戶重新發(fā)起請(qǐng)求

ERROR

通常是接口錯(cuò)誤，這種情況下我們會(huì)根據(jù)接口返回的錯(cuò)誤碼或者錯(cuò)誤文本提示用戶，并且也有重試按鈕

/// 狀態(tài)枚舉
enum LoadingStatus {
  idle, // 初始化
  loading, // 加載中
  loading_suc, // 加載成功
  loading_suc_but_empty, // 加載成功但是數(shù)據(jù)為空
  network_blocked, // 網(wǎng)絡(luò)加載錯(cuò)誤
  error, // 加載錯(cuò)誤
}

點(diǎn)擊事件回調(diào)

當(dāng)網(wǎng)絡(luò)異常或者接口報(bào)錯(cuò)時(shí)，會(huì)顯示錯(cuò)誤頁面，并且提供重試按鈕，讓用戶點(diǎn)擊重新請(qǐng)求?；谶@個(gè)需求，我們還需要提供點(diǎn)擊重試后的事件回調(diào)讓業(yè)務(wù)可以處理重新請(qǐng)求。

 /// 定義點(diǎn)擊事件
 typedef OnTapCallback = Function(LoadingView widget);

提示文案

提供提示文案的自定義，方便業(yè)務(wù)根據(jù)自己的需求展示特定的提示文案

代碼實(shí)現(xiàn)

根據(jù)上面的原理來實(shí)現(xiàn)對(duì)應(yīng)的代碼

構(gòu)造方法

 /// 構(gòu)造方法
 LoadingView({
    Key key,
    @required this.child, // 需要加載的Widget
    @required this.todoAfterError, // 錯(cuò)誤點(diǎn)擊重試
    @required this.todoAfterNetworkBlocked, // 網(wǎng)絡(luò)錯(cuò)誤點(diǎn)擊重試
    this.networkBlockedDesc = "網(wǎng)絡(luò)連接超時(shí)，請(qǐng)檢查你的網(wǎng)絡(luò)環(huán)境",
    this.errorDesc = "加載失敗",
    this.loadingStatus = LoadingStatus.idle,
 }) : super(key: key);

根據(jù)不同的Loading狀態(tài)展示對(duì)應(yīng)的Widget

其中idle、success狀態(tài)直接展示需要加載的Widget（這里也可以使用漸變動(dòng)畫進(jìn)行切換過度）

 ///根據(jù)不同狀態(tài)展示不同Widget
  Widget _buildBody() {
    switch (widget.loadingStatus) {
      case LoadingStatus.idle:
        return widget.child;
      case LoadingStatus.loading:
        return _buildLoadingView();
      case LoadingStatus.loading_suc:
        return widget.child;
      case LoadingStatus.loading_suc_but_empty:
        return _buildLoadingSucButEmptyView();
      case LoadingStatus.error:
        return _buildErrorView();
      case LoadingStatus.network_blocked:
        return _buildNetworkBlockedView();
    }
    return widget.child;
  }

buildLoadingView，這里簡單用了系統(tǒng)的CircularProgressIndicator，也可以自己顯示幀動(dòng)畫

  /// 加載中 View
  Widget _buildLoadingView() {
    return Container(
      width: double.maxFinite,
      height: double.maxFinite,
      child: Center(
        child: SizedBox(
          height: 22.w,
          width: 22.w,
          child: CircularProgressIndicator(
            strokeWidth: 2,
            valueColor: AlwaysStoppedAnimation<Color>(AppColors.primaryBgBlue),
          ),
        ),
      ),
    );
  }

其他提示頁面，這里做了一個(gè)統(tǒng)一的封裝

/// 編譯通用頁面
  Container _buildGeneralTapView({
    String url = "images/icon_network_blocked.png",
    String desc,
    @required Function onTap,
  }) {
    return Container(
      color: AppColors.primaryBgWhite,
      width: double.maxFinite,
      height: double.maxFinite,
      child: Center(
        child: SizedBox(
          height: 250.h,
          child: Column(
            children: [
              Image.asset(url,
                  width: 140.w, height: 99.h),
              SizedBox(
                height: 40.h,
              ),
              Text(
                desc,
                style: AppText.gray50Text12,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
              SizedBox(
                height: 30.h,
              ),
              if (onTap != null)
                BorderRedBtnWidget(
                  content: "重新加載",
                  onClick: onTap,
                  padding: 40.w,
                ),
            ],
          ),
        ),
      ),
    );
  }
    /// 加載成功但數(shù)據(jù)為空 View
  Widget _buildLoadingSucButEmptyView() {
    return _buildGeneralTapView(
      url: "images/icon_empty.png",
      desc: "暫無數(shù)據(jù)",
      onTap: null,
    );
  }
  /// 網(wǎng)絡(luò)加載錯(cuò)誤頁面
  Widget _buildNetworkBlockedView() {
    return _buildGeneralTapView(
        url: "images/icon_network_blocked.png",
        desc: widget.networkBlockedDesc,
        onTap: () {
          widget.todoAfterNetworkBlocked(widget);
        });
  }
  /// 加載錯(cuò)誤頁面
  Widget _buildErrorView() {
    return _buildGeneralTapView(
        url: "images/icon_error.png",
        desc: widget.errorDesc,
        onTap: () {
          widget.todoAfterError(widget);
        });
  }

使用

  Widget _buildBody() {
     var loadingView = LoadingView(
      loadingStatus: LoadingStatus.loading,
      child: _buildContent(),
      todoAfterNetworkBlocked: (LoadingView widget) {
        // 網(wǎng)絡(luò)錯(cuò)誤，點(diǎn)擊重試
        widget.updateStatus(LoadingStatus.loading);
        Future.delayed(Duration(milliseconds: 1000), () {
          widget.updateStatus(LoadingStatus.error);
        });
      },
      todoAfterError: (LoadingView widget) {
        // 接口錯(cuò)誤，點(diǎn)擊重試
        widget.updateStatus(LoadingStatus.loading);
        Future.delayed(Duration(milliseconds: 1000), () {
          // widget.updateStatus(LoadingStatus.loading_suc);
          widget.updateStatus(LoadingStatus.loading_suc_but_empty);
        });
      },
    );
     Future.delayed(Duration(milliseconds: 1000), (){
       loadingView.updateStatus(LoadingStatus.network_blocked);
     });
     return loadingView;
  }