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 分類

安裝套件