Flutter自定义加载更多插件custom_loadmore的使用

简介

custom_loadmore 组件是一个方便的 Flutter 小部件，使得实现加载更多功能变得更加简单。它提供了一个灵活且易于使用的界面，并可以集成到任何 Flutter 项目中。这使开发者能够更专注于其他方面的开发，同时提供了控制布局和外观的能力。

特性

• 加载更多功能
• 可修改的布局
• 内置UI功能处理

安装

要将此组件添加到你的项目中，请遵循以下步骤：

1. 在你的 pubspec.yaml 文件中添加以下依赖：

   dependencies:
     custom_loadmore: ^1.0.0
   

2. 运行 flutter pub get。

3. 使用该包时，确保导入该文件：

   import 'package:custom_loadmore/custom_loadmore.dart';
   

使用方法

步骤1：创建数据提供器

实现 ICustomLoadMoreDataProvider 接口。

class LoadmoreDataProvider implements ICustomLoadMoreDataProvider<int> {
  int indexStart = 0;
  int numberItemPerPage = 20;
  final int itemTotalCount = 100;
  bool haveMore = true;

  [@override](/user/override)
  Future<List<int>?> loadMore(int pageIndex, int pageSize) async {
    await Future.delayed(const Duration(seconds: 3)); // 模拟网络延迟
    if (!haveMore) {
      return [];
    }
    if (Random().nextBool()) {
      throw Exception("Load more failed"); // 模拟加载失败
    }
    var values = List.generate(numberItemPerPage, (index) => index + indexStart);
    indexStart += numberItemPerPage;

    if (indexStart >= itemTotalCount) {
      haveMore = false;
    }
    return values;
  }
}

步骤2：在 CustomLoadMore 小部件中提供数据提供器

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

  [@override](/user/override)
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final CustomLoadMoreController<int> customLoadMoreController =
      CustomLoadMoreController()
    ..addListener(() {
      print("Load more status: ${customLoadMoreController.currentItems}");
    });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        extendBodyBehindAppBar: false,
        extendBody: true,
        body: Column(
          children: [
            const SizedBox(
              height: 24,
            ),
            Expanded(
              child: InfiniteLoadMoreList<int>(
                customLoadMoreController: customLoadMoreController,
                initBuilder: (context) {
                  return const Text("Init");
                },
                initLoaderBuilder: (context) {
                  return const CircularProgressIndicator();
                },
                initFailedBuilder: (context, error) {
                  return Text(" $error");
                },
                initSuccessWithNoDataBuilder: (context) {
                  return const Text("Init success with no data");
                },
                listItemBuilder: (context, index, items) {
                  return Container(
                    color: Colors.primaries[index % Colors.primaries.length],
                    width: 200,
                    child: Center(
                      child: Column(
                        children: [
                          // Text("$item...."),
                          Lottie.asset('assets/images/test2.json'),
                        ],
                      ),
                    ),
                  );
                },
                loadMoreBuilder: (context) {
                  return const ListTile(
                    title: Center(
                      child: CircularProgressIndicator(),
                    ),
                  );
                },
                loadMoreFailedBuilder: (context, error) {
                  return ListTile(
                    leading: const Text("Load more failed"),
                    trailing: ElevatedButton(
                      onPressed: () {
                        customLoadMoreController.retryLoadMore();
                      },
                      child: const Text("Reload"),
                    ),
                  );
                },
                noMoreBuilder: (context) {
                  return const Text("No more");
                },
                loadMoreDataProvider: LoadmoreDataProvider(),
              ),
            ),
            const Divider(
              height: 1,
              thickness: 1,
              color: Colors.black,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    customLoadMoreController.refresh();
                  },
                  child: const Text("Reload"),
                ),
                ElevatedButton(
                  onPressed: () {
                    print("current items: ${customLoadMoreController.currentItems}");
                  },
                  child: const Text("Log current items"),
                ),
              ],
            ),
            const SizedBox(
              height: 24,
            ),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    print("current items: ${customLoadMoreController.currentItems}");
  }
}