flutter 下拉刷新pull_to_refresh使用介绍

2,105 阅读1分钟

1、pull_to_refresh在pub.dev上情况:

image.png

2、使用方法,直接上代码,具体说明请看注释说明

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class HomeMerch extends StatefulWidget {
  HomeMerch({Key? key}) : super(key: key);

  @override
  _HomeMerch createState() => _HomeMerch();
}

class _HomeMerch extends State<HomeMerch> {
  // 定义原始数据
  List<String> items = ["1", "2", "3", "4", "5", "6", "7", "8"];
  // 定义刷新控制器
  RefreshController _refreshController =
  RefreshController(initialRefresh: false);

  void _onRefresh() async{
    // 延时1秒,模拟网络请求
    await Future.delayed(Duration(milliseconds: 1000));
    // 如果请求失败,需要使用_refreshController.refreshFailed()修改状态--LoadStatus
    
    // 刷新成功,数据恢复原样
    items = ["1", "2", "3", "4", "5", "6", "7", "8"];
    if (mounted) {
      setState(() {});
    }
    // 重置获取数据LoadStatus
    _refreshController.refreshCompleted(resetFooterState: true);
  }

  void _onLoading() async {
    // 延时1秒,模拟网络请求
    await Future.delayed(Duration(milliseconds: 1000));
    // 如果已经到了15个,模拟数据都获取完成, 并设置LoadStatus
    if (items.length == 15) {
      _refreshController.loadNoData(); 
      return;
    }
    // if failed,use loadFailed(),if no data return,use LoadNodata()
    items.add((items.length+1).toString());
    if (mounted) {
      setState(() {});
    }
    _refreshController.loadComplete();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SmartRefresher(
        enablePullDown: true, // 下拉刷新
        enablePullUp: true, // 上拉加载数据
        header: WaterDropHeader(),
        footer: CustomFooter( // 设置上拉、下拉时的提示内容
          builder: (context, mode) {
            Widget body;
            if (mode == LoadStatus.idle) {
              body =  Text("pull up load");
            } else if (mode==LoadStatus.loading) {
              body =  CupertinoActivityIndicator();
            } else if (mode == LoadStatus.failed) {
              body = Text("Load Failed!Click retry!");
            } else if (mode == LoadStatus.canLoading) {
              body = Text("release to load more");
            } else {
              body = Text("No more Data");
            }
            return Container(
              height: 55.0,
              child: Center(child:body),
            );
          },
        ),
        controller: _refreshController,
        onRefresh: _onRefresh,
        onLoading: _onLoading,
        child: ListView.builder(
          itemBuilder: (c, i) => Card(child: Center(child: Text(items[i]))),
          itemExtent: 100.0,
          itemCount: items.length,
        ),
      ),
    );
  }
}