Flutter插件yapalivi的使用方法介绍

yapalivi

Yet Another Paginated List View 和一个 BIG WORK IN PROGRESS

Seriously, this is a BIG WORK IN PROGRESS

WIP AHEAD, you’ve been warned

关于此插件

Yapalivi 的目标是在 Flutter 中简化构建无限滚动列表的过程，同时保持与 ListView.builder 相似的性能。然而，我自己对 Flutter 非常陌生，因此此插件的大部分内容可能不会遵循任何最佳实践。

如何开始？

创建自己的 Provider

一个 Yapalivi 组件需要一个 Provider 来获取数据。目前有两种可能的 Provider 可以扩展：

• IPagedProvider：最基本的 Provider，仅包含列表视图正常工作所需的必要功能。
• IAutomaticLocalPagedProvider：此 Provider 可用于为从网络获取的数据提供离线后备（接受更好的名称建议）。

构建组件

对于最基础的功能，一个 Yapalivi 小部件需要一个 Provider 和一个 Builder。为了方便起见，Builder 函数将接收上下文、正在构建的项目的索引以及项目本身。

可选实现的函数：

• separatorBuilder：如果此函数不为 null，则会使用 ListView.separated 而不是 ListView.builder。此 Builder 接收上下文、当前索引、下一个索引、当前项目和下一个项目。

• filterFunction：这是一个大大的待完成功能。它可以用于过滤项目，并仅构建返回的项目，但可能会导致问题。

可选实现的小部件：

• placeholderWidget：当还有更多页面需要加载时，此小部件将在列表末尾显示。

• noMoreItemsWidget：当 Provider 没有更多数据可加载时，此小部件将在列表末尾渲染。

如果某些东西不起作用怎么办？

我可以绝对确定的是，某些功能可能无法正常工作。如果您发现任何问题或认为这对项目的改进有帮助，请（非常感谢！）在以下地址报告：Gitlab。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Yapalivi 示例')),
        body: YapaliviExample(),
      ),
    );
  }
}

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

class _YapaliviExampleState extends State<YapaliviExample> {
  final List<String> _items = List.generate(100, (index) => "Item $index");

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Yapalivi(
      provider: PagedProvider(
        loadPage: (page) async {
          // 模拟分页加载数据
          await Future.delayed(Duration(milliseconds: 500));
          if (page > 2) return null; // 假设第三页后没有更多数据
          return _items.sublist(page * 10, (page + 1) * 10);
        },
      ),
      builder: (context, index, item) {
        return ListTile(
          title: Text(item),
        );
      },
      separatorBuilder: (context, currentIndex, nextIndex, current, next) {
        return Divider(); // 分隔符
      },
      placeholderWidget: Center(child: CircularProgressIndicator()), // 加载占位符
      noMoreItemsWidget: Center(child: Text("没有更多数据了")), // 数据耗尽提示
    );
  }
}