Flutter下拉刷新及加载更多插件refresh_loadmore的使用

简介

refresh_loadmore 是一个Flutter组件，支持下拉刷新和上拉加载更多数据。它为开发者提供了简洁且高效的API来实现这两项功能。

快速开始

在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  refresh_loadmore: ^2.0.7

然后执行 flutter pub get 来安装包。

使用方法

主要属性与函数

• onRefresh: 下拉刷新时的回调函数。
• onLoadmore: 上拉以加载更多数据的回调函数。
• isLastPage: 是否为最后一页，如果为true，则无法加载更多。
• child: 子组件。
• noMoreWidget: 底部没有更多数据时的提示文字组件。
• loadingWidget: 正在加载数据时的提示组件。
• padding: 可自定义的内边距。
• scrollController: 自定义的 ScrollController，或不使用。

示例代码

以下是一个完整的示例应用，展示了如何使用 refresh_loadmore 插件。

import 'package:flutter/material.dart';
import 'package:refresh_loadmore/refresh_loadmore.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool isLastPage = false;
  List<String>? list;
  int page = 1;

  @override
  void initState() {
    super.initState();
    loadFirstData();
  }

  Future<void> loadFirstData() async {
    await Future.delayed(Duration(seconds: 1), () {
      setState(() {
        list = [
          'dddd', 'sdfasfa', 'sdfgaf', 'adsgafg', 
          'dddd', 'sdfasfa', 'sdfgaf', 'adsgafg', 
          'dddd', 'sdfasfa', 'sdfgaf', 'adsgafg', 
          'adsgafg', 'dddd', 'sdfasfa', 'sdfgaf', 
          'adsgafg'
        ];
        isLastPage = false;
        page = 1;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: list != null
          ? RefreshLoadmore(
              onRefresh: loadFirstData,
              onLoadmore: () async {
                await Future.delayed(Duration(seconds: 1), () {
                  setState(() {
                    list!.addAll(['123', '234', '457']);
                    page++;
                  });
                  print(page);
                  if (page >= 3) {
                    setState(() {
                      isLastPage = true;
                    });
                  }
                });
              },
              noMoreWidget: Text(
                'No more data, you are at the end',
                style: TextStyle(
                  fontSize: 18,
                  color: Theme.of(context).disabledColor,
                ),
              ),
              isLastPage: isLastPage,
              child: list!.isNotEmpty
                  ? ListView.builder(
                      itemCount: list!.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(list![index]),
                          trailing: Icon(Icons.accessibility_new),
                        );
                      },
                    )
                  : Center(
                      child: Text('empty'),
                    ),
            )
          : Center(child: CircularProgressIndicator()),
    );
  }
}

在这个例子中，我们创建了一个简单的Flutter应用程序，它包含一个带有下拉刷新和加载更多功能的列表。当用户滚动到底部时，会触发加载更多数据的功能；而当用户向下拉动页面时，则会触发刷新操作。

渲染效果

以下是该插件的实际渲染效果截图：

通过这些截图，您可以直观地了解插件的工作方式以及它如何响应用户的交互行为。希望这个插件能够帮助您更轻松地实现下拉刷新和加载更多的功能！