FlutterはSmartRefresherを使用して、プルダウンリフレッシュおよびプルアップロード機能を実装します

ナンセンスな始まり：iOSでのMJRefreshは、UIScrollViewのオフセットを使用して対応する読み込みイベントをトリガーする、ネイティブ開発の友人に精通している必要があります。flutterのサードパーティSmartRefresherによって実装された同様のロードプロセスを簡単に記録しましょう。

手順1.サードパーティの依存関係を構成します。

flutterの下でpubspec.yamlファイルを開き、依存関係オプションでサードパーティの依存関係ライブラリを構成します。

ヒント：このファイルでは、カスタムフォントや画像のローカル画像を構成することもできます。

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  //刷新依赖库
  pull_to_refresh: ^1.5.6
复制代码

ターミナルを開き、実行コマンドを入力します：flutter packages get

フラッターが見つかりませんというプロンプトが表示された場合は、フラッターに現在のターミナル環境で構成された環境変数がないことを意味します。

環境変数を宣言し、フラッターSDKによって保存されたパスを入力して、赤い線で環境を構築します

 export PATH=/(你的SDK路)/flutter/bin:$PATH
复制代码

OK、フラッターパッケージを実行して依存関係をインストールします。

このとき、現在のアプリをコンパイルします。次の依存関係が表示されるため、健全なnullの安全性で実行できない場合。。。エラー、androidStudio構成ではこれを無視してください。

--no-sound-null-safety
复制代码

質問2、それをどのように使用するのですか？

サードパーティの依存関係をインポートする

import 'package:pull_to_refresh/pull_to_refresh.dart';
复制代码

BuilderでSmartRefresherコンポーネントを使用する

//加载状态控制器
RefreshController _refreshController = new RefreshController();
复制代码

@override
Widget build(BuildContext context) {
  
  return new Container(
    child: MediaQuery.removePadding(
        context: context,
        removeTop: true,
        removeBottom: false,
        child: new Scrollbar(
            //刷新组件包裹 ListView.builder
            child: new SmartRefresher(
                //允许下拉刷新
                enablePullDown: true,
                //允许上拉加载
                enablePullUp: true,
                //默认下拉样式
                header: WaterDropHeader(),
                //自定义上拉样式
                footer: CustomFooter(
                  builder: (BuildContext context, LoadStatus mode) {
                    Widget body;
                    if (mode == LoadStatus.idle) {
                      //闲置状态
                      body = Text("上拉加载更多");
                    } else if (mode == LoadStatus.loading) {
                      //加载状态
                      body = Text("正在努力加载中...");
                    } else if (mode == LoadStatus.failed) {
                      //加载数据失败
                      body = Text("加载失败，稍后重试");
                    } else {
                      //没有数据
                      body = Text("没有更多数据了");
                    }
                    return Container(
                      height: 55.0,
                      child: Center(child: body),
                    );
                  },
                ),
                controller: _refreshController,
                //列表组件
                child: ListView.builder(
                  itemBuilder: _buildListItem,
                  itemCount:_totalItems,
                  physics: AlwaysScrollableScrollPhysics(),
                ),
                onRefresh: _onRefresh,
                onLoading: _onLoading
            )
        )
    ),
  );
}
复制代码

更新ステータスの複数の選択肢

状態をロードするための複数の選択肢

完全なコード


//模拟刷新网络加载事件
Future<void> _onRefresh(){
  return Future.delayed(Duration(seconds: 2),(){
    // 延迟2s完成刷新
    setState(() {
      _refreshController.refreshCompleted();
    });
  });
}

//模拟加载网络加载事件
Future<void> _onLoading(){
  return Future.delayed(Duration(seconds: 2),(){
    // 延迟2s完成刷新
    setState(() {
      _totalItems += 9;
      _refreshController.loadComplete();
    });
  });
}
复制代码

画面録画2021-07-295.05.14pm.gif

ListViewのビルダー描画アイテムメソッドについては、主にコードが不器用であるため、ここではあまり説明しません。

記事のレベルは限られています、それをスプレーしないでください、主にあなたと共有して一緒に進歩することを望んでいます。皆様のお役に立てれば幸いです。[握りこぶし][握りこぶし][握りこぶし]

FlutterはSmartRefresherを使用して、プルダウンリフレッシュおよびプルアップロード機能を実装します

おすすめ