Flutter无限滚动插件simple_infinite_scroll的使用

Flutter无限滚动插件simple_infinite_scroll的使用

功能介绍

SimpleInfiniteScroll 是一个帮助简化显示大量数据过程的包，你希望以无限分页的方式展示这些数据。

• 无限滚动列表视图
• Dart 通用
• 自动分页
• 可定制加载视图
• 刷新列表视图
• 可定制的列表视图空状态
• 可定制的列表视图错误状态
• 可定制的列表视图到达列表末尾的状态

使用方法

SimpleInfiniteScroll 非常类似于 ListView.builder。基本实现需要以下参数：

• itemBuilder: 表示数据列表中每个索引项的 widget。
• controller: 控制列表视图的各种行为。
• initialPage: 初始加载页面值，默认为 1。
• limit: 每页显示的数据量。
• loadingWidget: 当滚动到最大时显示的 widget。
• fetch: 获取数据列表的函数，包含回调参数如 page 和 limit，你可以用它们作为从仓库调用数据的参数，默认为 1。

以下是带有模型数据的列表视图代码片段示例：

SimpleInfiniteScroll<Article>(
    initialPage: 1,
    limit: 1,
    fetch: (page, limit) => fetchArticles(page, limit),
    itemBuilder: (context, index, item){
        return ListTile(
            title: Text(item.title),
        );
    }
)

你可以像这样获取仓库数据：

Future<List<Article>> fetchArticles(page, limit) async{
    // 获取文章数据...
}

刷新功能

此包配备了刷新功能，使您轻松在列表视图中重新加载数据。 可以通过 SimpleInfiniteScrollController 来刷新列表视图。

final SimpleInfiniteScrollController _scrollController =
      SimpleInfiniteScrollController();
_scrollController.refresh();

要更改刷新指示器样式，请添加 refreshIndicatorStyle 属性。

SimpleInfiniteScroll<Article>(
    refreshIndicatorStyle: RefreshIndicatorStyle(
        color: Colors.green,
        displacement: 40.0,
        backgroundColor: Colors.grey.shade200
    ),
)

示例代码

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

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final SimpleInfiniteScrollController _scrollController =
      SimpleInfiniteScrollController();

  // 获取文章数据
  Future<List<Article>> fetchArticles(int page, int limit) async {
    await Future.delayed(const Duration(seconds: 1));
    return List.generate(10, (index) => Article(title: "Index $index"));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text('Home Screen'),
          actions: [
            IconButton(
              icon: const Icon(Icons.refresh),
              onPressed: () => _scrollController.refresh(),
            )
          ],
        ),
        body: SimpleInfiniteScroll<Article>(
          controller: _scrollController,
          fetch: (page, limit) => fetchArticles(page, limit),
          loadingWidget: Center(
            child: Container(
                padding: const EdgeInsets.all(15),
                child: const CircularProgressIndicator()),
          ),
          itemBuilder: (context, index, item) {
            return ListTile(
              title: Text(item.title ?? ''),
            );
          },
        ));
  }
}

class Article {
  int? id;
  String? title, body;

  Article({this.id, this.title, this.body});
}