Flutter分页加载Firestore数据插件 paginate_firestore 的使用

在Flutter应用中，使用paginate_firestore插件可以方便地实现从Firestore数据库分页加载数据。以下是详细的设置和使用方法。

Setup（设置）

首先确保你的项目已经配置了cloud_firestore包。如果还没有，请按照官方文档进行设置。

Usage（使用）

添加依赖

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

dependencies:
  paginate_firestore: ^最新版本号

然后运行flutter pub get来安装依赖。

导入库

在需要使用的Dart文件中导入paginate_firestore：

import 'package:paginate_firestore/paginate_firestore.dart';

基本用法示例

以下是一个简单的例子，展示如何使用PaginateFirestore小部件来显示来自Firestore的数据，并支持分页加载：

PaginateFirestore(
  // item builder type是必须的。
  itemBuilder: (context, documentSnapshots, index) {
    final data = documentSnapshots[index].data() as Map?;
    return ListTile(
      leading: CircleAvatar(child: Icon(Icons.person)),
      title: data == null ? Text('Error in data') : Text(data['name']),
      subtitle: Text(documentSnapshots[index].id),
    );
  },
  // orderBy是必需的以启用分页
  query: FirebaseFirestore.instance.collection('users').orderBy('name'),
  // 更改类型根据需求
  itemBuilderType: PaginateBuilderType.listView,
  // 获取实时数据
  isLive: true,
  itemsPerPage: 5, // 每页显示条目数
),

结合刷新指示器使用

如果你想让列表支持下拉刷新，可以结合RefreshIndicator一起使用：

PaginateRefreshedChangeListener refreshChangeListener = PaginateRefreshedChangeListener();

RefreshIndicator(
  child: PaginateFirestore(
    itemBuilder: (context, documentSnapshots, index) => ListTile(
      leading: CircleAvatar(child: Icon(Icons.person)),
      title: Text(documentSnapshots[index].data()['name']),
      subtitle: Text(documentSnapshots[index].id),
    ),
    // orderBy是必需的以启用分页
    query: FirebaseFirestore.instance.collection('users').orderBy('name'),
    listeners: [
      refreshChangeListener,
    ],
  ),
  onRefresh: () async {
    refreshChangeListener.refreshed = true;
  },
)

完整示例代码

下面是一个完整的示例代码，包括初始化Firebase、创建一个基本的Flutter应用以及使用PaginateFirestore显示用户信息的例子：

import 'package:flutter/material.dart';
import 'package:paginate_firestore/paginate_firestore.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore pagination library',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        brightness: Brightness.dark,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firestore pagination example'),
        centerTitle: true,
      ),
      body: Scrollbar(
        isAlwaysShown: true,
        child: PaginateFirestore(
          header: const SliverToBoxAdapter(child: Text('HEADER')),
          footer: const SliverToBoxAdapter(child: Text('FOOTER')),
          itemBuilderType: PaginateBuilderType.listView,
          itemBuilder: (context, documentSnapshots, index) {
            final data = documentSnapshots[index].data() as Map?;
            return ListTile(
              leading: const CircleAvatar(child: Icon(Icons.person)),
              title: data == null ? const Text('Error in data') : Text(data['name']),
              subtitle: Text(documentSnapshots[index].id),
            );
          },
          query: FirebaseFirestore.instance.collection('users').orderBy('name'),
          itemsPerPage: 5,
          isLive: true,
        ),
      ),
    );
  }
}