Flutter分页列表插件paginated_list的使用

paginated_list

paginated_list 是一个Flutter插件，它提供了一个可滚动容器来显示项目列表。该列表可以水平或垂直滚动。此外，这个列表可以是无限的，即当用户滚动时，它会请求更多的项目。

Introduction

此库通过提供易于访问的函数使分页更简单。以下是一些关键特性的说明：

1. 类型化：PaginatedList<T> 接收一个泛型类型参数，这决定了构建器接收到的第一个参数类型以及items列表中的元素类型。
2. 加载更多：当最后一个项目完全可见时，会调用onLoadMore函数，在这里应该放置添加更多项目的逻辑。
3. 最近搜索按钮（可选）：如果设置isRecentSearch为true，则会在组件右上角添加一个IconButton，默认情况下允许删除旧搜索记录。
4. 是否为最后一页：通过isLastPage布尔值来判断是否已经显示了所有数据，如果是，则不会展示加载指示器且不触发加载更多操作。
5. 主布局：PaginatedList内部使用的是ListView.builder()，因此可能需要在外层包裹Expanded或者指定尺寸的SizedBox以确保其正确渲染。

示例GIF

Usage

以下是PaginatedList的基本用法示例：

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

class MovieList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PaginatedList<Movie>(
      loadingIndicator: const Padding(
        padding: EdgeInsets.symmetric(vertical: 20),
        child: Center(
          child: CircularProgressIndicator(color: Colors.black),
        ),
      ),
      items: state.movies, // 假设state.movies是从状态管理中获取的数据
      isRecentSearch: false,
      isLastPage: state.isLastPage, // 假设state.isLastPage是一个布尔变量，表示是否到达了最后一页
      onLoadMore: (index) => context.read<MovieBloc>().loadMore(),
      builder: (movie, index) => ListTile(
        title: Text(movie.title),
        subtitle: Text(movie.overview),
        leading: Image.network(movie.posterPath ?? ''),
      ),
    );
  }
}

对于网格视图，你可以使用PaginatedGrid：

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

class MovieGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PaginatedGrid<Movie>(
      loadingIndicator: const Padding(
        padding: EdgeInsets.symmetric(vertical: 20),
        child: Center(
          child: CircularProgressIndicator(color: Colors.black),
        ),
      ),
      items: state.movies, // 假设state.movies是从状态管理中获取的数据
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 20,
        mainAxisSpacing: 20,
        childAspectRatio: 0.7,
      ),
      isLastPage: state.isLastPage, // 假设state.isLastPage是一个布尔变量，表示是否到达了最后一页
      onLoadMore: () => context.read<MovieBloc>().loadMore(),
      builder: (movie, index) => Card(
        child: Column(
          children: [
            Image.network(movie.posterPath ?? ''),
            Text(movie.title),
            Text(movie.overview),
          ],
        ),
      ),
    );
  }
}

完整示例Demo

为了更好地理解如何使用paginated_list插件，下面提供了一个完整的例子，包括应用程序入口点和电影列表页面。

// main.dart
import 'package:flutter/material.dart';
import 'package:paginated_list/paginated_list.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Paginated List Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MovieListScreen(),
    );
  }
}

class MovieListScreen extends StatefulWidget {
  @override
  _MovieListScreenState createState() => _MovieListScreenState();
}

class _MovieListScreenState extends State<MovieListScreen> {
  final List<Movie> movies = [];
  bool isLastPage = false;

  @override
  void initState() {
    super.initState();
    loadMoreMovies();
  }

  Future<void> loadMoreMovies() async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));

    if (movies.length >= 20) {
      setState(() {
        isLastPage = true;
      });
      return;
    }

    final newMovies = List.generate(10, (index) => Movie(
      title: 'Movie ${movies.length + index + 1}',
      overview: 'Overview of movie ${movies.length + index + 1}',
      posterPath: 'https://via.placeholder.com/150',
    ));

    setState(() {
      movies.addAll(newMovies);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Movies'),
      ),
      body: PaginatedList<Movie>(
        loadingIndicator: const Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Center(
            child: CircularProgressIndicator(color: Colors.black),
          ),
        ),
        items: movies,
        isRecentSearch: false,
        isLastPage: isLastPage,
        onLoadMore: (_) => loadMoreMovies(),
        builder: (movie, index) => ListTile(
          title: Text(movie.title),
          subtitle: Text(movie.overview),
          leading: Image.network(movie.posterPath),
        ),
      ),
    );
  }
}

class Movie {
  final String title;
  final String overview;
  final String posterPath;

  Movie({required this.title, required this.overview, required this.posterPath});
}

在这个例子中，我们创建了一个简单的电影列表应用。每次滚动到底部时都会加载更多电影，并在达到最后一页后停止加载。