loadmore_listview

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包，可简化实现具有无限滚动和下拉刷新功能的 ListView。它提供了一个简洁、易于使用的界面，用于在用户滚动时加载更多项目，减少样板代码。该包支持 Android、iOS、macOS、Windows 和 Linux 等多个平台，非常适合跨平台应用。使用 Dart 编写，可无缝集成到现有的 Flutter 项目中。

适合场景

无限滚动信息流
下拉刷新数据列表
电子商务产品列表
社交媒体时间线
新闻源应用

主要特点

内置的下拉刷新
自动加载更多内容
可自定义的加载指示器
支持空安全
跨平台兼容性

适合对象

寻求简单分页的开发者
动态内容的应用程序
需要流畅滚动的项目
初学者学习 Flutter
大型数据集的应用程序

使用建议

需要对网络请求进行适当的错误处理
可能需要自定义逻辑来处理复杂的加载条件
不适用于静态列表
针对高级UI需求的定制化有限
依赖外部状态管理来管理数据源

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Load More Listview

An Widget with the Load more item and refresh

Base on ListView and CustomScrollListview

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  loadmore_listview: ^1.0.7

Import it:

import 'package:loadmore_listview/loadmore_listview.dart';

Usage Examples

LoadMoreListView.builder

LoadMoreListView.builder(
    //is there more data to load
    haveMoreItem: true,
    //Trigger the bottom loadMore callback
    onLoadMore: () async{
      //wait for your api to fetch more items
      await Future.delayed(const Duration(seconds: 1));
    },
    //pull down refresh callback
    onRefresh: () async{
      //wait for your api to update the list
      await Future.delayed(const Duration(seconds: 1));
    },
    //you can set your loadMore Animation
    loadMoreWidget: Container(
        margin: const EdgeInsets.all(20.0),
        alignment: Alignment.center,
        child: const CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(Colors.blueAccent),
        ),
    ),
    //ListView
    itemCount: 20,
    itemBuilder: (context, index) {
        return Container(
            margin: const EdgeInsets.all(30),
            width: double.infinity,
            alignment: Alignment.center,
            child: Text('$index'),
        );
    },
);

LoadMoreListView.separated

LoadMoreListView.separated(
    //...
    separatorBuilder: (context, index) {
      return const Divider();
    },
);

LoadMoreListView.customScrollView

LoadMoreListView.customScrollView(
    //...
    slivers: [
        SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return Container(
                  margin: const EdgeInsets.all(30),
                  width: double.infinity,
                  alignment: Alignment.center,
                  child: Text(list[index]),
                );
              },
              childCount: list.length,
            ),
        ),
    ],
);

搜索插件、代码仓与 APP 分类

安装插件