Flutter分页滚动插件scroll_pagination_flutter的使用

Flutter分页滚动插件scroll_pagination_flutter的使用

在本示例中，我们将展示如何使用 scroll_pagination_flutter 插件来实现一个分页滚动列表。该插件可以帮助开发者轻松地实现分页加载数据的功能。

示例代码

首先，我们需要安装 scroll_pagination_flutter 插件。在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  scroll_pagination: ^0.5.0

然后运行 flutter pub get 来获取依赖。

接下来，我们来看具体的实现代码。

分页列表示例

首先创建一个 BeerListView 类，该类将展示分页列表。

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

class _BeerListViewState extends State<BeerListView> {
  static const _pageSize = 20;

  final PagingController<int, BeerSummary> _pagingController =
      PagingController(firstPageKey: 0);

  [@override](/user/override)
  void initState() {
    _pagingController.addPageRequestListener((pageKey) {
      _fetchPage(pageKey);
    });
    super.initState();
  }

  Future<void> _fetchPage(int pageKey) async {
    try {
      final newItems = await RemoteApi.getBeerList(pageKey, _pageSize);
      final isLastPage = newItems.length < _pageSize;
      if (isLastPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + newItems.length;
        _pagingController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingController.error = error;
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) =>
      // 使用PagedListView来展示分页列表
      PagedListView<int, BeerSummary>(
        pagingController: _pagingController,
        builderDelegate: PagedChildBuilderDelegate<BeerSummary>(
          itemBuilder: (context, item, index) => BeerListItem(
            beer: item,
          ),
        ),
      );

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

在上述代码中：

• _pageSize 定义了每页加载的数据量。
• _pagingController 用于管理分页逻辑。
• _fetchPage 方法用于从远程API获取数据，并根据是否还有更多数据来决定是否追加到列表末尾或继续加载下一页。
• PagedListView 是一个可以自动处理分页逻辑的列表视图组件。

分页网格示例

接下来创建一个 BeerSliverGrid 类，该类将展示分页网格。

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

class _BeerSliverGridState extends State<BeerSliverGrid> {
  final BeerListingBloc _bloc = BeerListingBloc();
  final PagingController<int, BeerSummary> _pagingController =
      PagingController(firstPageKey: 1);
  late StreamSubscription _blocListingStateSubscription;

  [@override](/user/override)
  void initState() {
    _pagingController.addPageRequestListener((pageKey) {
      _bloc.onPageRequestSink.add(pageKey);
    });

    // 我们可以使用StreamBuilder，但这样会不必要地重新创建整个[PagedSliverGrid]
    // 而通过手动处理订阅并仅更新_pagingController更高效。
    _blocListingStateSubscription =
        _bloc.onNewListingState.listen((listingState) {
      _pagingController.value = PagingState(
        nextPageKey: listingState.nextPageKey,
        error: listingState.error,
        itemList: listingState.itemList,
      );
    });
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) => CustomScrollView(
        slivers: [
          BeerSearchInputSliver(
            onChanged: (searchTerm) => _bloc.onSearchInputChangedSink.add(
              searchTerm,
            ),
          ),
          PagedSliverGrid<int, BeerSummary>(
            pagingController: _pagingController,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: 100 / 150,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              crossAxisCount: 3,
            ),
            builderDelegate: PagedChildBuilderDelegate<BeerSummary>(
              itemBuilder: (context, item, index) => CachedNetworkImage(
                imageUrl: item.imageUrl,
              ),
            ),
          ),
        ],
      );

  [@override](/user/override)
  void dispose() {
    _pagingController.dispose();
    _blocListingStateSubscription.cancel();
    _bloc.dispose();
    super.dispose();
  }
}