Flutter分页合同处理插件smart_pag_contract的使用

smart_pag_contract 是一个用于在 Flutter 中处理分页数据的插件。它提供了一个简单的 API 来管理分页数据，并且可以与 Flutter 的 ListView 或 GridView 等组件无缝集成。以下是使用 smart_pag_contract 插件的步骤和示例代码。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  smart_pag_contract: ^1.0.0  # 请确保使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 smart_pag_contract 包：

import 'package:smart_pag_contract/smart_pag_contract.dart';

3. 创建分页控制器

创建一个 PagContractController 来管理分页数据。你需要提供一个 PagContract 对象，它负责从数据源获取数据。

final pagController = PagContractController<int, MyDataModel>(
  pagContract: MyPagContract(),
);

MyPagContract 是一个自定义的类，你需要实现 PagContract 接口。例如：

class MyPagContract implements PagContract<int, MyDataModel> {
  [@override](/user/override)
  Future<PaginatedData<MyDataModel>> fetchData(int pageKey, int pageSize) async {
    // 这里实现从网络或本地数据库获取数据的逻辑
    // 例如，使用 http 包从 API 获取数据
    final response = await http.get('https://example.com/api/data?page=$pageKey&size=$pageSize');
    final jsonData = jsonDecode(response.body);
    final List<MyDataModel> dataList = (jsonData['data'] as List)
        .map((item) => MyDataModel.fromJson(item))
        .toList();

    return PaginatedData(
      data: dataList,
      nextPageKey: jsonData['nextPageKey'],
    );
  }
}

4. 使用 PagContractController 构建 UI

你可以使用 PagContractController 来构建分页列表。例如，使用 ListView.builder 来显示分页数据：

class MyPaginatedList extends StatelessWidget {
  final PagContractController<int, MyDataModel> pagController;

  MyPaginatedList({required this.pagController});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: pagController.itemCount,
      itemBuilder: (context, index) {
        final item = pagController.itemAt(index);
        return ListTile(
          title: Text(item.title),
          subtitle: Text(item.description),
        );
      },
      controller: pagController.scrollController,
    );
  }
}

5. 初始化并加载数据

在你的 StatefulWidget 中初始化 PagContractController 并加载第一页数据：

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final PagContractController<int, MyDataModel> pagController;

  [@override](/user/override)
  void initState() {
    super.initState();
    pagController = PagContractController<int, MyDataModel>(
      pagContract: MyPagContract(),
    );
    pagController.loadFirstPage();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Paginated List'),
      ),
      body: MyPaginatedList(pagController: pagController),
    );
  }

  [@override](/user/override)
  void dispose() {
    pagController.dispose();
    super.dispose();
  }
}

6. 处理加载更多数据

PagContractController 会自动处理滚动事件，并在用户滚动到列表底部时加载更多数据。你可以在 PagContract 的 fetchData 方法中处理分页逻辑。

7. 错误处理和加载状态

你可以使用 PagContractController 的状态来显示加载指示器或错误信息：

class MyPaginatedList extends StatelessWidget {
  final PagContractController<int, MyDataModel> pagController;

  MyPaginatedList({required this.pagController});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ValueListenableBuilder<PagContractState>(
      valueListenable: pagController,
      builder: (context, state, child) {
        if (state is PagContractLoading) {
          return Center(child: CircularProgressIndicator());
        } else if (state is PagContractError) {
          return Center(child: Text('Error: ${state.errorMessage}'));
        } else if (state is PagContractLoaded) {
          return ListView.builder(
            itemCount: pagController.itemCount,
            itemBuilder: (context, index) {
              final item = pagController.itemAt(index);
              return ListTile(
                title: Text(item.title),
                subtitle: Text(item.description),
              );
            },
            controller: pagController.scrollController,
          );
        } else {
          return Center(child: Text('No data available'));
        }
      },
    );
  }
}