Flutter utilise SmartRefresher pour implémenter des fonctions d'actualisation et de chargement pull-up

Début absurde : MJRefresh sous iOS doit être familier à un ami du développement natif, en utilisant le décalage de UIScrollView pour déclencher l'événement de chargement correspondant. Enregistrons brièvement le processus de chargement similaire mis en œuvre par le SmartRefresher tiers de Flutter.

Étape 1. Configurez les dépendances tierces.

Ouvrez le fichier pubspec.yaml sous flutter et configurez la bibliothèque de dépendances tierces dans l'option de dépendance.

Astuce : ce fichier peut également configurer des polices personnalisées et des images locales d'image.

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
复制代码

Ouvrez le terminal et entrez la commande d'exécution : flutter packages get

S'il affiche flutter not found, cela signifie que flutter n'a pas de variables d'environnement configurées dans l'environnement de terminal actuel.

Déclarez les variables d'environnement, et renseignez le chemin enregistré par le SDK flutter pour construire l'environnement au niveau de la ligne rouge

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

Ok, exécutez à nouveau les packages Flutter pour installer les dépendances.

À ce stade, compilez l'application actuelle. Si la sécurité ne peut pas s'exécuter avec un son nul, car les dépendances suivantes s'affichent. . . Erreur, ignorez ceci sous la configuration AndroidStudio.

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

Question 2, comment l'utiliser ?

Importer des dépendances tierces

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

Utiliser le composant SmartRefresher dans le générateur

//加载状态控制器
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
            )
        )
    ),
  );
}
复制代码

Choix multiples pour l'état d'actualisation

Choix multiple pour l'état de chargement

code complet

//模拟刷新网络加载事件
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();
    });
  });
}
复制代码

Pour la méthode d'élément de dessin du constructeur dans ListView, je n'entrerai pas trop dans la description ici, principalement parce que le code est maladroit.

Le niveau de l'article est limité, merci de ne pas le vaporiser, espérons surtout partager avec vous et progresser ensemble. Ce serait encore plus gratifiant de vous aider tous. [poings serrés] [poings serrés] [poings serrés]