Flutter无限滚动列表插件infinite_listview_package的使用

Flutter无限滚动列表插件infinite_listview_package的使用

无限滚动列表 (Infinite ListView)

Flutter 插件 infinite_listview_package 提供了无限滚动列表视图小部件。

开始使用 (Getting Started)

1. 安装指南 请参照官方文档进行安装：

   // Installation Guide
   

2. 示例 可以查看示例代码了解如何使用此插件：

   // Example
   

使用指南 (Usage Guide)

1. 创建一个类并继承 InfiniteListView<T>，其中 T 是你将要构建的列表项的类型。
2. 实现 getItemWidget(T item) 方法，该方法应返回列表中单个项目的部件。
3. 实现 getListData(int pageNumber) 方法，这是一个异步方法，应根据参数中的 pageNumber 返回相应页数的项目列表。如果发生错误，该方法应返回 Future.error(...)。
4. 覆盖 getLoadingWidget()、getPaginationLoadingWidget()、getErrorWidget(dynamic error) 和 getPaginationErrorWidget(dynamic error) 方法来自定义请求过程中和错误时的部件。

完整示例代码

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:infinite_listview_package/infinite_listview_package.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Infinite ListView 示例',
      home: InfiniteListViewExample(),
    );
  }
}

class InfiniteListViewExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("无限滚动列表示例")),
      body: InfiniteListViewWidget(),
    );
  }
}

// 创建一个类并继承 InfiniteListView<Photo>
class InfiniteListViewWidget extends InfiniteListView<Photo> {
  [@override](/user/override)
  Widget getItemWidget(Photo item) {
    // 返回每个项目的部件
    return Card(
      child: Column(
        children: <Widget>[
          // 显示图片
          Image.network(
            item.thumbnailUrl!,
            fit: BoxFit.fitWidth,
            width: double.infinity,
            height: 160,
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text(
              item.title!,
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 16,
              ),
            ),
          ),
        ],
      ),
    );
  }

  [@override](/user/override)
  Future<List<Photo>> getListData(int? pageNumber) async {
    // 获取数据的异步方法
    final response = await http.get(
        Uri.parse("https://jsonplaceholder.typicode.com/photos?_page=$pageNumber"));

    if (response.statusCode == 200)
      return Photo.parseList(json.decode(response.body));
    else
      return Future.error("获取数据失败");
  }
}

// 定义 Photo 类
class Photo {
  final String? title;
  final String? thumbnailUrl;

  Photo(this.title, this.thumbnailUrl);

  factory Photo.fromJson(Map<String, dynamic> json) {
    return Photo(json["title"], json["thumbnailUrl"]);
  }

  static List<Photo> parseList(List<dynamic> list) {
    return list.map((i) => Photo.fromJson(i)).toList();
  }
}