Flutter懒加载列表插件lazy_loading_list_view的使用

Flutter懒加载列表插件lazy_loading_list_view的使用

功能

将此添加到你的Flutter应用程序中，以实现以下功能：

1. 使用单个可重用的小部件创建项目中的所有ListView。
2. 通过简单调用一个函数来加载更多数据，从而处理ListView中的分页。
3. 在获取更多数据时提供默认的加载状态。用户可以通过提供自己的loadingStateBuilder来覆盖它。
4. 当没有返回数据时提供默认的空状态。用户可以通过提供自己的emptyState小部件来覆盖它。
5. 自动处理下拉刷新功能。

使用方法

在项目的pubspec.yaml文件中添加LazyLoadingListView包：

lazy_loading_list_view: ^0.0.7

在文件顶部添加以下内容：

import 'package:lazy_loading_list_view/lazy_loading_list_view.dart';

使用以下示例创建一个LazyLoadingListView：

// 创建一个LazyLoadingListView实例
LazyLoadingListView<MyData>(  
    // 定义加载数据的方法，接收页面参数并返回异步数据
    loadItems: (int page) async { 
        return await getData(page: page);
    }, 
    // 定义构建列表项的方法，接收上下文、数据项和索引
    buildItem: (BuildContext context, MyData item, int index) { 
        return MyCustomListItem(item: item); 
    }, 
)  

你可以进一步自定义LazyLoadingListView，例如覆盖separatorBuilder、loadingStateBuilder、emptyState、pageSize和刷新指示器颜色：

LazyLoadingListView<MyData>(  
    loadItems: (int page) async { 
        return await getData(page: page);
    }, 
    buildItem: (BuildContext context, MyData item, int index) { 
        return MyCustomListItem(item: item); 
    }, 
    // 定义自定义分隔符
    separatorBuilder: (context, index) {
        return const SizedBox(height: 10);
    },
    // 定义自定义加载状态
    loadingStateBuilder: (context) {
        return const MyCustomLoadingState();
    },
    // 提供自定义空状态小部件
    emptyState: MyEmptyState(),
    // 定义每页大小
    pageSize: 10,
    // 定义刷新指示器颜色
    refreshColor: Colors.deepPurple,
)  

你还可以访问ListView的所有常规属性，例如physics、padding等：

LazyLoadingListView<MyData>(  
    loadItems: (int page) async {
        return await getData(page: page);
    },
    buildItem: (BuildContext context, MyData item, int index) {
        return MyCustomListItem(item: item);
    },
    separatorBuilder: (context, index) {
        return const SizedBox(height: 10);
    },
    loadingStateBuilder: (context) {
        return const MyCustomLoadingState();
    },
    emptyState: MyEmptyState(),
    pageSize: 10,
    refreshColor: Colors.deepPurple,
    scrollController: ScrollController(), // 提供自己的滚动控制器
    scrollDirection: Axis.horizontal, // 提供自己的滚动方向
    reverse: false, // 提供自己的反向设置
    physics: const BouncingScrollPhysics(), // 提供自己的物理行为
    shrinkWrap: true, // 提供自己的shrinkWrap设置
    padding: const EdgeInsets.all(12), // 定义自己的填充
)

示例代码

以下是完整的示例demo：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Lazy Loading List View Example')),
        body: LazyLoadingListView<MyData>(
          loadItems: (int page) async {
            // 模拟从网络或数据库加载数据
            return await Future.delayed(Duration(seconds: 2), () {
              List<MyData> data = [];
              for (int i = 0; i < 10; i++) {
                data.add(MyData('Item ${page * 10 + i}'));
              }
              return data;
            });
          },
          buildItem: (BuildContext context, MyData item, int index) {
            return ListTile(
              title: Text(item.name),
            );
          },
          separatorBuilder: (context, index) {
            return Divider();
          },
          loadingStateBuilder: (context) {
            return Center(child: CircularProgressIndicator());
          },
          emptyState: Center(child: Text('No Data Found')),
          pageSize: 10,
          refreshColor: Colors.blue,
        ),
      ),
    );
  }
}

class MyData {
  final String name;

  MyData(this.name);
}