Flutter列表管理插件list_manager的使用

Flutter列表管理插件list_manager的使用

项目名称

• GitHub仓库大小：
• 贡献者数量：
• 星标数量：
• 分叉数量：
• 关注者数量：

list_manager 是一个帮助开发者高效地实现分页、过滤和搜索功能的 Flutter 包。该包可以单独或组合使用这些操作。

如何使用

步骤一：添加依赖

在 pubspec.yaml 文件中添加 list_manager 依赖：

dependencies:
  list_manager: ^latest_version

步骤二：定义数据模型

定义用于存储数据的模型类：

class PostDataModel {
  PostDataModel({
    required this.userId,
    required this.id,
    required this.title,
    required this.body,
  });

  int userId;
  int id;
  String title;
  String body;
}

步骤三：定义控制器

定义分页控制器和过滤控制器：

late PagingController<PostDataModel> controller;
late FilterController<PostDataModel> filterController;

步骤四：配置分页控制器

配置分页控制器以加载数据：

controller = PagingController(
  pagingHelper: PagingHelper.init(error: error, loader: loader()),
  loadData: ({
    required PagingHelper helper,
  }) async {
    return Future.delayed(
      const Duration(seconds: 1),
      () {
        List<PostDataModel> list = [];
        int page = (helper.page ?? 0);
        for (int i = 10 * (page); i < 10 * (page + 1); i++) {
          var model = PostDataModel.fromMap(postData["data"][i]); // postData 是本地存储的 JSON 数据
          list.add(model);
        }
        controller.setPagingConfig(
          helper.copyWith(
            hasNext: true,
            loadNext: true,
            page: (page + 1),
            nextUrl: "nextUrl",
          ) ??
              PagingHelper.init(),
        );
        return Success(data: list);
      },
    );
  },
);

步骤五：配置过滤控制器

配置过滤控制器以加载过滤选项和处理过滤逻辑：

filterController = FilterController(
  loadFilters: loadFilters,
  pagingController: PagingController(
    pagingHelper: PagingHelper.init(error: filterError, loader: loader()),
    loadData: fetch2,
  ),
  applyFilter: ({
    required List<FilterData> selFilters,
    required String query,
    required PagingHelper helper,
  }) async {
    return Future.delayed(
      const Duration(seconds: 1),
      () {
        List<PostDataModel> list = [];
        int page = (helper.page ?? 0);
        for (int i = 10 * (page); i < 10 * (page + 1); i++) {
          var model = PostDataModel.fromMap(filterData["data"][i]);
          list.add(model);
        }
        if (page == 2) {
          return const Failure(reason: "Custom Error Filter wala");
        }
        filterController.pagingController?.setPagingConfig(
          helper.copyWith(
            hasNext: true,
            loadNext: true,
            page: (page + 1),
            nextUrl: "nextUrl",
          ) ??
              PagingHelper.init(),
        );
        return Success(data: list);
      },
    );
  },
);

步骤六：加载过滤选项

加载过滤选项并传递给过滤组件：

Future<Result<List<FilterData>>> loadFilters() async {
  await Future.delayed(const Duration(seconds: 2));
  final list = [
    FDropdownData(
      title: "用户",
      key: "user_id",
      onChange: () {},
      options: ["user1", "user2"],
    ),
    FDropdownData(
      title: "项目",
      key: "project_id",
      onChange: () {},
      options: ["project1", "project2"],
    ),
    FSliderData(
      title: "金额范围",
      minKey: "amount_less_than",
      maxKey: "amount_greater_than",
      labels: const RangeLabels("0", "20000"),
      values: const RangeValues(0, 20000),
      min: 0,
      max: 100000,
    ),
    FDateData(
      title: "日期",
      startDateKey: "start_date",
      endDateKey: "end_date",
      start: DateTime.now(),
      end: DateTime.now().add(const Duration(days: 34)),
    ),
    FRadioData(
      title: "按金额排序",
      key: "sort_by_amount",
      options: ["升序", "降序"],
    ),
    FRadioData(
      title: "按日期排序",
      key: "sort_by_date",
      options: ["升序", "降序"],
    ),
  ];
  return Success(data: list);
}

步骤七：加载数据

加载分页数据：

Future<Result<List<PostDataModel>>> fetch(PagingHelper? helper) async {
  return Future.delayed(
    const Duration(seconds: 1),
    () {
      List<PostDataModel> list = [];
      int page = (helper?.page ?? 0);
      for (int i = 10 * (page); i < 10 * (page + 1); i++) {
        var model = PostDataModel.fromMap(postData["data"][i]);
        list.add(model);
      }
      controller.setPagingConfig(
        helper?.copyWith(
          hasNext: true,
          loadNext: true,
          page: (page + 1),
          nextUrl: "nextUrl",
        ) ??
            PagingHelper.init(),
      );
      return Success(data: list);
    },
  );
}

步骤八：使用带有配置的过滤和分页控制器的组件

将配置好的过滤和分页控制器用于 ListManager 组件：

ListManager<PostDataModel>(
  itemBuilder: (
    BuildContext context,
    PostDataModel data,
    int index,
  ) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 10),
      padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 10),
      decoration: BoxDecoration(
        color: Colors.grey.shade300,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text("${data.id}. ${data.title}"),
    );
  },
  pagingController: controller,
  filterController: filterController,
  loader: const Center(
    child: Text(
      "Loading",
      style: TextStyle(
        fontSize: 22,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
  error: (context, error) {
    return Center(
      child: Text(
        "$error =&gt; Some Error Occured",
        style: const TextStyle(color: Colors.red),
      ),
    );
  },
)

步骤九：添加搜索和过滤按钮

添加搜索框和过滤按钮：

Row(
  children: [
    Expanded(
      child: SearchWidget(
        filterController: filterController,
        inputBorder: const OutlineInputBorder(),
      ),
    ),
    IconButton(
      icon: const Icon(Icons.filter_alt),
      onPressed: () async {
        showFilterBottomSheet();
      },
    ),
  ],
)

步骤十：显示底部过滤面板

显示底部过滤面板：

void showFilterBottomSheet() async {
  filterController.startLoadingFilters();
  showModalBottomSheet(
    context: context,
    isDismissible: false,
    showDragHandle: true,
    scrollControlDisabledMaxHeightRatio: 0.8,
    builder: (context) {
      return FilterComponent(
        title: "Filters",
        controller: filterController,
      );
    },
  );
}