非常好的无限列表

由Very Good Ventures创建的非常好的无限列表小部件。

当构建活动信息流、新闻信息流或任何其他需要按需获取和渲染内容供用户消费的功能时,InfiniteList非常方便。

示例

infinite_list

用法

基本的InfiniteList需要两个参数

  • itemLoader,负责异步获取内容
  • builder,负责根据特定项目(结果)返回一个Widget
import 'package:flutter/material.dart';
import 'package:very_good_infinite_list/very_good_infinite_list.dart';

void main() => runApp(MyApp());

Future<List<String>?> _itemLoader(int limit, {int start = 0}) {
  return Future.delayed(
    const Duration(seconds: 1),
    () => List.generate(limit, (index) => 'Item ${start + index}'),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Infinite List')),
        body: InfiniteList<String>(
          itemLoader: _itemLoader,
          builder: InfiniteListBuilder<String>(
            success: (context, item) => ListTile(title: Text(item)),
          ),
        ),
      ),
    );
  }
}

自定义

InfiniteList

InfiniteList有多个可选参数,允许您自定义加载和错误行为。

InfiniteList<String>(
  itemLoader: _itemLoader,
  builder: InfiniteListBuilder<String>(...),
  bottomLoader: (context) {
    // Return a custom widget which will be rendered at the bottom of the list
    // while more content is being loaded.
  },
  errorLoader: (context, retry, error) {
    // Return a custom widget which will be rendered when `itemLoader`
    // throws a generic `Exception` and there is prior content loaded.
    // `retry` can be invoked to attempt to reload the content.
  },
  // How long to wait between attempts to load items.
  // Defaults to 100ms.
  debounceDuration: Duration.zero,
  // What percentage of the screen should be scrolled before
  // attempting to load additional items.
  // Defaults to 0.7 (70% from the top).
  scrollOffsetThreshold: 0.5,
);

InfiniteListBuilder

InfiniteListBuilder有多个可选参数,允许您根据InfiniteList的各种状态渲染不同的widget。

InfiniteList<String>(
  itemLoader: _itemLoader,
  builder: InfiniteListBuilder<String>(
    empty: (context) {
      // Return a custom widget when `itemLoader` returns an empty list
      // and there is no prior content.
    },
    loading: (context) {
      // Return a custom widget when `itemLoader` is in the process of
      // fetching results and there is no prior content
    },
    success: (context, item) {
      // Return a custom widget when `itemLoader` has returned content.
      // Here item refers to a specific result.
      // This builder will be called multiple times as different results
      // come into view.
    },
    error: (context, retry, error) {
      // Return a custom widget when `itemLoader` throws an `InfiniteListException`.
      // `error` will also be called when `itemLoader` throws any `Exception`
      // if there is no prior content.
    },
  ),
);

请参考示例,了解InfiniteList的基本和复杂用法。

GitHub

https://github.com/VeryGoodOpenSource/very_good_infinite_list