Flutter分页管理插件paginator的使用

Flutter分页管理插件paginator的使用

Paginator简介

Paginator 是一个用于简化 Flutter 应用程序分页功能的插件。无论您处理的是大数据集还是需要平滑分页功能，Paginator 都提供了内置工具来高效地获取、分页和显示数据。

开始使用

1. 在 pubspec.yaml 文件中添加 Paginator 包。

   dependencies:
     paginator: ^0.0.1
   

2. 导入包：

   import 'package:paginator/paginator.dart';
   

使用示例

以下是一个完整的示例，展示如何使用 Paginator 插件进行分页管理。

示例代码

import 'package:example/bloc/user/user_bloc.dart'; // 假设有一个用户数据流
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:paginator/paginator.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Paginator Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: BlocProvider<UserBloc>(
        create: (context) => UserBloc(), // 创建一个数据流实例
        child: const UserListScreen(),
      ),
    );
  }
}

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

  final int page = 1; // 当前页码

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PaginatedList(
      paginationDataFetcher: ({bool refreshFetching = false}) {
        context.read<UserBloc>().add(FetchUsersEvent(page: page)); // 触发数据加载事件
      },
      builder: (context, scrollController) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("用户列表"),
            centerTitle: true,
          ),
          body: BlocBuilder<UserBloc, UserState>(
            builder: (context, state) {
              if (state is UserInitial) {
                return const Center(
                  child: CircularProgressIndicator(),
                ); // 加载中
              } else if (state is UserFetchFailure) {
                return Center(
                  child: Text(state.errorMessage), // 加载失败
                );
              } else if (state is UserFetchSuccess) {
                final users = state.users;

                return ListView.separated(
                  controller: scrollController,
                  separatorBuilder: (_, __) => const SizedBox(height: 16),
                  padding: const EdgeInsets.only(left: 16, right: 16, bottom: 24),
                  shrinkWrap: true,
                  itemCount: state.hasReachedEnd ? users.length : users.length + 1,
                  itemBuilder: (context, index) {
                    if (!state.hasReachedEnd && index >= users.length) {
                      return const Center(
                        child: Padding(
                          padding: EdgeInsets.symmetric(vertical: 8),
                          child: CircularProgressIndicator(),
                        ),
                      ); // 加载更多时的占位符
                    }
                    final user = users[index];
                    return ListTile(
                      minTileHeight: 70,
                      leading: CircleAvatar(
                        radius: 16,
                        child: Text(user.id.toString()),
                      ),
                      minLeadingWidth: 50,
                      title: Text(user.name),
                    );
                  },
                );
              }
              return const SizedBox(); // 默认返回空
            },
          ),
        );
      },
    );
  }
}