Flutter分页加载插件 paging_view 的使用

paging_view 是一个类似于 Android Jetpack Paging 库的插件，用于管理和显示分页列表。本文将详细介绍如何使用 paging_view 插件，并提供一个完整的示例代码。

Live Preview

您可以访问 Live Preview 查看 paging_view 的实际效果。

如何使用

1. 创建一个继承自 DataSource 的类

首先，您需要创建一个继承自 DataSource 的类，并实现 load 方法来获取数据。

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:paging_view/paging_view.dart';

class DataSourcePublicRepositories extends DataSource<int, Repository> {
  DataSourcePublicRepositories({
    required this.repository,
  });

  final GitHubRepository repository;

  [@override](/user/override)
  Future<LoadResult<int, Repository>> load(LoadAction<int> action) async =>
      switch (action) {
        Refresh() => await fetch(null),
        Prepend(key: final _) => const None(),
        Append(key: final key) => await fetch(key),
      };

  Future<LoadResult<int, Repository>> fetch(int? key) async {
    final PageData<int, Repository> data;
    if (key == null) {
      data = await repository.repositories();
    } else {
      data = await repository.repositories(since: key);
    }
    return Success(page: data);
  }
}

2. 在 Widget 中获取步骤 1 中创建的类实例

接下来，在您的 Widget 中获取该类的实例。

@riverpod
DataSourcePublicRepositories dataSourcePublicRepositories(
    DataSourcePublicRepositoriesRef ref) {
  final dataSource = DataSourcePublicRepositories(
    repository: ref.watch(gitHubRepositoryProvider),
  );

  ref.onDispose(() {
    dataSource.dispose();
  });

  return dataSource;
}

3. 将步骤 2 中获得的实例设置到 PagingList 或 PagingGrid

最后，将数据源实例设置到 PagingList 或 PagingGrid 组件中。

class HomePage extends ConsumerWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    final dataSource = ref.watch(dataSourcePublicRepositoriesProvider);

    final body = PagingList<int, Repository>(
      dataSource: dataSource,
      builder: (context, repository, index) => Card(
        child: ListTile(
          title: Text(repository.fullName),
          subtitle: Text(repository.description),
        ),
      ),
      errorBuilder: (context, e) => Center(
        child: Text('$e'),
      ),
      initialLoadingWidget: const Center(
        child: Padding(
          padding: EdgeInsets.all(16),
          child: CircularProgressIndicator.adaptive(),
        ),
      ),
      appendLoadingWidget: const Center(
        child: Padding(
          padding: EdgeInsets.all(16),
          child: CircularProgressIndicator.adaptive(),
        ),
      ),
      padding: const EdgeInsets.symmetric(horizontal: 16),
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text('GitHub public repositories'),
      ),
      body: RefreshIndicator(
        onRefresh: () async => dataSource.refresh(),
        child: body,
      ),
    );
  }
}

完整示例 Demo

以下是一个完整的示例代码，展示了如何在应用中使用 paging_view 插件。

// main.dart
import 'package:example/app.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    const ProviderScope(
      child: App(),
    ),
  );
}

// app.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'home_page.dart';

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

// home_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'data_source_public_repositories.dart';

class HomePage extends ConsumerWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    final dataSource = ref.watch(dataSourcePublicRepositoriesProvider);

    final body = PagingList<int, Repository>(
      dataSource: dataSource,
      builder: (context, repository, index) => Card(
        child: ListTile(
          title: Text(repository.fullName),
          subtitle: Text(repository.description),
        ),
      ),
      errorBuilder: (context, e) => Center(
        child: Text('$e'),
      ),
      initialLoadingWidget: const Center(
        child: Padding(
          padding: EdgeInsets.all(16),
          child: CircularProgressIndicator.adaptive(),
        ),
      ),
      appendLoadingWidget: const Center(
        child: Padding(
          padding: EdgeInsets.all(16),
          child: CircularProgressIndicator.adaptive(),
        ),
      ),
      padding: const EdgeInsets.symmetric(horizontal: 16),
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text('GitHub public repositories'),
      ),
      body: RefreshIndicator(
        onRefresh: () async => dataSource.refresh(),
        child: body,
      ),
    );
  }
}