Flutter分页加载插件bloc_pagination的使用

Flutter分页加载插件bloc_pagination的使用

在本文中，我们将详细介绍如何使用bloc_pagination插件来实现Flutter应用中的分页加载功能。此插件通过BLoC模式（Business Logic Component）帮助开发者更方便地处理分页逻辑。

安装

首先，在你的pubspec.yaml文件中添加依赖：

dependencies:
  bloc_pagination: // 添加最新版本

然后导入该包：

import 'package:bloc_pagination/bloc_pagination.dart';

基本用法

以下是一个基本的使用示例：

class MyBloc extends PaginationBloc {
  [@override](/user/override)
  Future<ListResponse<PaginationModel>> findAll(int page,
      {AbstractQueryParameters? queryParameters}) async {
    /// 你的数据源
    return readRepository.findAll(page, params: queryParameters);
  }
}

class MyWidget extends StatelessWidget {
  final MyBloc _bloc = MyBloc();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocPagination<TempModel, ErrorWrapper>(
        bloc: _bloc,
        blocListener: (context, state) {},
        firstPageErrorBuilder: (context, error) {
          return Center(
            child: Text(error.message.toString()),
          );
        },
        bannerPinned: true,
        banner: SliverAppBarDelegate(
          maxHeight: 100,
          minHeight: 100,
          child: Container(
            color: Colors.green,
            padding: const EdgeInsets.symmetric(vertical: 10),
            child: Text('header widget'),
          ),
        ),
        footerPinned: true,
        footer: Container(
          color: Colors.green,
          height: 100,
          width: double.infinity,
          child: Text('footer widget'),
        ),
        itemsBuilder: (context, item, index) => InkWell(
          onTap: () => _bloc.add(EditListTypePaginationEvent(
              listType: _bloc.state.listType.isListed
                  ? ListType.gridView
                  : ListType.listView)),
          child: Container(
            color: Colors.green,
            margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
            height: 200,
            child: Text('index  ${item.id}'),
          ),
        ),
      ),
    );
  }
}

示例代码

以下是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _bloc = MyBloc();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text('Pagination page'),
        ),
        body: BlocPagination<TempModel, ErrorWrapper>(
          bloc: _bloc,
          firstPageErrorBuilder: (context, error) {
            return Center(
              child: Text(error.message.toString()),
            );
          },
          bannerPinned: true,
          banner: SliverAppBarDelegate(
            maxHeight: 100,
            minHeight: 100,
            child: Container(
              color: Colors.greenAccent,
              padding: const EdgeInsets.symmetric(vertical: 10),
              child: Text('header'),
            ),
          ),
          footerPinned: true,
          footer: Container(
            color: Colors.greenAccent,
            height: 100,
            width: MediaQuery.of(context).size.width,
            child: Text('footer'),
          ),
          itemsBuilder: (context, item, index) => InkWell(
            onTap: () => _bloc.add(EditListTypePaginationEvent(
                listType: _bloc.state.listType.isListed
                    ? ListType.gridView
                    : ListType.listView)),
            child: Container(
              color: Colors.green,
              margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
              height: 200,
              child: Text('index  ${item.id}'),
            ),
          ),
        ));
  }
}

class MyBloc extends PaginationBloc<TempModel> {
  MyBloc() : super(initialType: ListType.listView);

  [@override](/user/override)
  Future<ListResponse<TempModel>> findAll(int page,
      {AbstractQueryParameters? queryParameters}) async {
    await Future.delayed(const Duration(seconds: 1));

    // 抛出异常作为 ErrorWrapper() 或其他异常
    // throw ErrorWrapper(message: 'error');
    return ListedData(
        data: [for (int i = 0; i < 10; i++) TempModel(i)], total: 20);
  }
}

class TempModel {
  final int id;
  TempModel(this.id);
}

class ListedData with ListResponse<TempModel> {
  [@override](/user/override)
  List<TempModel> data;
  [@override](/user/override)
  int? total;
  ListedData({required this.data, this.total});
}

class ErrorWrapper {
  String? message;
  int? statusCode;
  ErrorWrapper({this.message, this.statusCode});
}