Flutter无限分页列表插件listview_infinite_pagination的使用

无限分页ListView滚动

这是一个非常轻量级的Flutter包，用于实现带有分页功能的无限滚动ListView。

支持平台

该插件已在iOS、Android和Web上成功测试。

示例

以下示例是从仓库中的示例项目中提取的。更多示例可以在该项目中找到。

无限滚动ListView分页演示

功能

• ✅ 无限滚动ListView
• ✅ 自动化分页
• ✅ 可自定义的ListView项小部件
• ✅ 可自定义的初始加载小部件
• ✅ 可自定义的更多加载小部件
• ✅ 可自定义的空列表小部件
• ✅ 可自定义的错误小部件
• ✅ 可自定义的到达列表末尾时的小部件
• ✅ 刷新ListView

入门与使用

使用此包需要两个步骤：

1. 第一步：创建一个函数来获取数据，使用dataFetcher函数。
2. 第二步：实现和设计ListView，使用itemBuilder函数。

第一个示例：模型数据样本（字符串列表）

ListviewInfinitePagination<Post>(
  itemBuilder: (index, item) {
    return Text('$index => ${item.title}');
  },
  dataFetcher: (page) => dataFetchMocha(page),
)

// ####### 数据样本模拟函数 dataFetchMocha
Future<List<String>> dataFetchMocha(int page) async {
  List<String> testList = [];
  if (page < 4) {
    for (int i = 1 + (page - 1) * 20; i <= page * 20; i++) {
      testList.add('Item$i of page$page');
    }
  }
  return testList;
}

第二个示例：模型数据样本（API）

ListviewInfinitePagination<Post>(
  itemBuilder: (index, item) {
    return Text('$index => ${item}');
  },
  dataFetcher: (page) => dataFetchApi(page),
)

// ####### API 数据获取函数 dataFetchApi
Future<List<Post>> dataFetchApi(int page) async {
  const String baseUrl = 'https://jsonplaceholder.typicode.com/posts';
  List<Post> testList = [];

  try {
    final res = await http.get(Uri.parse("$_baseUrl?_page=$page&_limit=10"));
    json.decode(res.body).forEach((post) {
      testList.add(Post.fromJson(post));
    });
  } catch (err) {
    if (kDebugMode) {
      print('Something went wrong');
    }
  }
  return testList;
}

完整示例Demo

以下是一个完整的示例代码，展示了如何使用listview_infinite_pagination插件来实现无限分页的ListView。

main.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:listview_infinite_pagination/listview_infinite_pagination.dart';

// 引入Post模型文件
import 'model/post.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: const Text('Demo Listview Infinite Pagination',
            style: TextStyle(color: Colors.black)),
      ),
      body: ListviewInfinitePagination<Post>(
        itemBuilder: (index, item) {
          return Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: const Icon(Icons.image, size: 45),
                  title: Text('#${item.id} ${item.title}'),
                  subtitle: Text('${item.body!} - index $index'),
                ),
              ],
            ),
          );
        },
        dataFetcher: (page) => dataFetchApi(page),

        // ######## 可选配置 ########
        /// 如果你想要刷新并重置列表
        toRefresh: true,

        /// 如果你想要显示自定义的错误小部件
        // onError: (dynamic error) => Center(
        //   child: Text(error.toString()),
        // ),

        /// 如果你想要显示自定义的空列表小部件
        // onEmpty: const Center(
        //   child: Text('This is empty'),
        // ),
      ),
    );
  }
}

// 模拟数据获取函数
Future<List<String>> dataFetch(int page) async {
  await Future.delayed(const Duration(seconds: 0, milliseconds: 2000));
  List<String> testList = [];
  if (page < 4) {
    for (int i = 1 + (page - 1) * 20; i <= page * 20; i++) {
      testList.add('Item$i in page$page');
    }
  }
  return testList;
}

// API数据获取函数
Future<List<Post>> dataFetchApi(int page) async {
  const String baseUrl = 'https://jsonplaceholder.typicode.com/posts';
  List<Post> testList = [];

  final res = await http.get(Uri.parse("$baseUrl?_page=$page&_limit=10"));
  json.decode(res.body).forEach((post) {
    testList.add(Post.fromJson(post));
  });

  return testList;
}

model/post.dart

class Post {
  int? userId;
  int? id;
  String? title;
  String? body;

  Post({this.userId, this.id, this.title, this.body});

  Post.fromJson(Map<String, dynamic> json) {
    userId = json['userId'];
    id = json['id'];
    title = json['title'];
    body = json['body'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = {};
    data['userId'] = userId;
    data['id'] = id;
    data['title'] = title;
    data['body'] = body;
    return data;
  }
}