Flutter无限滚动功能插件advanced_infinite_scroll的使用

2023 © Bikramaditya Meher

一个多功能的 Flutter 包，用于实现高级滚动。无论你需要无限滚动、响应式网格视图还是可定制加载器，AdvancedInfiniteScroll 都能满足你的需求。

功能

• 无限滚动
• 响应式网格/列表视图
• 下拉刷新功能
• 可定制加载器（用于加载更多或初始加载）
• 处理“无数据找到”小部件
• 处理“错误”小部件
• 优化可见项的渲染
• 头部/尾部小部件
• 空加载器大小（查看示例）

使用方法

要使用此包，请在 pubspec.yaml 文件中添加 advanced_infinite_scroll 作为依赖项。

数据获取

你可以从网络或其他来源获取数据。为了演示，这里有一个虚拟的数据获取函数：

Future<List<String>> onListFutureDummy(int page, int perPage, Map? params) async {
  debugPrint("ON LOAD DATA AIS :: $page");
  await Future.delayed(const Duration(seconds: 1));
  return List.generate(perPage, (index) => "PAGE :: $page ::");
  // return [];
}

这个函数模拟了一个带有延迟的网络调用，并生成虚拟数据。

基本设置

以下是一个简单的示例，展示了如何使用 AdvancedInfiniteScroll：

AdvancedInfiniteScroll<String>(
  minItemWidth: 120,
  minItemsPerRow: 1,
  maxItemsPerRow: 1,
  controller: controller,
  loaderSize: 1,
  headerWidget: Container(
    height: 50,
    color: Colors.green,
    child: const Center(child: Text("Header")),
  ),
  footerWidget: Container(
    height: 50,
    color: Colors.red,
    child: const Center(child: Text("Header")),
  ),
  noDataFoundWidget: (c) {
    return TextButton(
      onPressed: () {
        c.refresh();
      },
      child: const Text("Refresh"),
    );
  },
  loadingWidget: const Center(child: CircularProgressIndicator()),
  // onFuture: onListFutureDummy,
  loadingMoreWidget: Center(
    child: Padding(
      padding: const EdgeInsets.all(10),
      child: LinearProgressIndicator(
        minHeight: 60,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.grey.shade50),
      ),
    ),
  ),
  builder: (BuildContext context, listData, index) {
    return ListTile(
      title: Text(
        "${listData[index]}:: INDEX :: $index ::",
      ),
    );
  },
)

参数

以下是关键参数的简要概述：

• minItemWidth: 每个项目的最小宽度。
• minItemsPerRow: 每行的最小项目数。
• controller: 与 AdvancedInfiniteScroll 关联的控制器。
• loadingMoreWidget: 在加载更多项目时显示的小部件。
• builder: 根据提供的数据返回小部件列表的函数。

完整示例

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late AdvancedInfiniteScrollController<String> controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    controller = AdvancedInfiniteScrollController(
      onFuture: onListFutureDummy,
      perPage: 14,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: AdvancedInfiniteScroll<String>(
        minItemWidth: 120,
        minItemsPerRow: 1,
        maxItemsPerRow: 1,
        controller: controller,
        loaderSize: 1,
        headerWidget: Container(
          height: 50,
          color: Colors.green,
          child: const Center(child: Text("Header")),
        ),
        footerWidget: Container(
          height: 50,
          color: Colors.red,
          child: const Center(child: Text("Header")),
        ),
        noDataFoundWidget: (c) {
          return TextButton(
            onPressed: () {
              c.refresh();
            },
            child: const Text("Refresh"),
          );
        },
        loadingWidget: const Center(child: CircularProgressIndicator()),
        loadingMoreWidget: Center(
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: LinearProgressIndicator(
              minHeight: 60,
              valueColor: AlwaysStoppedAnimation<Color>(Colors.grey.shade50),
            ),
          ),
        ),
        builder: (BuildContext context, listData, index) {
          return ListTile(
            title: Text(
              "${listData[index]}:: INDEX :: $index ::",
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.refresh(params: {"Sadf": "afdas"});
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }

  Future<List<String>> onListFutureDummy(int page, int perPage, Map? params) async {
    debugPrint("ON LOAD DATA AIS :: $page");
    await Future.delayed(const Duration(seconds: 1));
    return List.generate(perPage, (index) => "PAGE :: $page ::");
    // return [];
  }
}