Flutter列表控制插件list_controller的使用

list_controller 是一个用于创建具有异步加载、分页、过滤、数据实际化等功能的列表控制器的Dart包。本文将介绍如何在Flutter应用中使用这个插件，并提供完整的示例代码。

特性

• 检索、排序和过滤 列表数据
• 实际化 列表数据，无需重新加载
• 无限滚动 支持多种分页策略：keyset, offset等
• 支持多个方向加载 列表数据
• 中断数据加载
• 重新加载数据
• 显示中间加载结果
• 跟踪列表记录的变化

优势

• 确保实现的简便性和灵活性之间的平衡
• 最小化数据源负载
• 架构独立，兼容任何状态管理方法
• 兼容任何小部件
• 提供辅助工具，方便开发列表控制器

使用步骤

1. 定义列表控制器类
2. 添加 ListCore mixin 到该类中
3. 根据需要添加其他功能的mixin
4. 实现所需的基本函数

示例代码

以下是一个完整的示例，展示如何使用 list_controller 包来创建一个带有分页功能的列表控制器：

import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';
import 'package:list_controller/list_controller.dart';

class ListQuery extends Equatable {
  const ListQuery({this.weightGt = 0});

  final int weightGt;

  @override
  List<Object?> get props => [weightGt];
}

typedef ListStateExample = ListState<int, ListQuery>;

class LoadResult {
  const LoadResult({required this.records, required this.isFinalPage});

  final List<int> records;
  final bool isFinalPage;
}

void main() {
  runApp(const MaterialApp(
    title: 'List Controller Example',
    home: MyHomePage(),
  ));
}

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

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

class _MyHomePageState extends State<MyHomePage>
    with
        ListCore<int>,
        RecordsLoader<int, ListQuery, LoadResult>,
        KeysetPagination<int, ListQuery, LoadResult> {
  ListStateExample state = const ListStateExample(query: ListQuery());

  @override
  void initState() {
    loadRecords(state.query);
    super.initState();
  }

  @override
  void dispose() {
    closeList();
    super.dispose();
  }

  // RecordsLoader section:

  @override
  void onRecordsLoadStart(
          {required ListQuery query, required LoadingKey loadingKey}) =>
      setState(() {
        state = state.copyWith(stage: ListStage.loading());
      });

  @override
  Future<LoadResult> performLoadQuery(
      {required ListQuery query, required LoadingKey loadingKey}) async {
    await Future.delayed(const Duration(milliseconds: 1500));
    return LoadResult(
      records: List<int>.generate(20, (i) => query.weightGt + i + 1),
      isFinalPage: query.weightGt >= 80,
    );
  }

  @override
  void putLoadResultToState(
          {required ListQuery query,
          required LoadResult loadResult,
          required LoadingKey loadingKey}) =>
      setState(() {
        state = state.copyWith(
          records: [
            ...state.records,
            ...loadResult.records,
          ],
          stage: loadResult.isFinalPage ? ListStage.complete() : ListStage.idle(),
        );
      });

  // KeysetPagination section:

  @override
  ListStage getListStage(LoadingKey loadingKey) => state.stage;

  @override
  ListQuery buildNextPageQuery(LoadingKey loadingKey) =>
      ListQuery(weightGt: state.records.last);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('List Controller Example'),
      ),
      body: Stack(
        children: [
          ListView.builder(
            itemCount: state.records.length,
            itemBuilder: (context, index) {
              const recordsLoadThreshold = 1;
              if (index >= state.records.length - recordsLoadThreshold) {
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  loadNextPage();
                });
              }
              return ListTile(title: Text(state.records[index].toString()));
            },
          ),
          if (state.isLoading)
            const Center(child: CircularProgressIndicator()),
        ],
      ),
    );
  }
}

解释

1. 定义查询类：ListQuery 类用于表示要显示的记录的标准。
2. 初始化状态：在 _MyHomePageState 中初始化 state。
3. 实现基本函数：
   • onRecordsLoadStart：开始加载时更新状态。
   • performLoadQuery：从数据源加载数据。
   • putLoadResultToState：将加载的结果放入状态中。
4. 分页逻辑：使用 KeysetPagination 来处理分页。
5. UI部分：使用 ListView.builder 显示列表，并在接近底部时触发下一页加载。

通过上述步骤，您可以轻松地在Flutter应用中实现一个高效的列表控制器。希望这个示例能帮助您更好地理解和使用 list_controller 插件。