搜尋套件、儲存庫與 APP 分類

refresh_loadmore 封面
套件詳情v2.0.7

refresh_loadmore

一個支援下拉刷新和上拉載入更多資料的 Flutter 組件

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
143
喜歡數
27
Pub 分數
160

安裝套件

flutter pub add refresh_loadmore

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個 Flutter 套件,為清單提供下拉刷新與上拉載入更多內容的介面,提升可捲動內容中的使用者互動體驗。支援跨所有主要平台(包含 Android、iOS、Web、macOS、Windows 與 Linux)的平滑動畫及可自訂的重新整理/載入狀態。非常適合實作動態資料流,例如新聞、社群媒體時間軸或產品清單。此元件輕量且能順暢整合至 ListView 及其他可捲動組件。

適用情境

  • 動態列表更新
  • 社交媒體動態加載
  • 電子商務產品分頁
  • 即時資料同步
  • 無限滾動介面

主要特色

  • 下拉刷新手勢
  • 上拉載入更多手勢
  • 可自訂的重新整理指示器
  • 跨平台相容性
  • 平滑的動畫過渡
  • 可設定的載入狀態

適合對象

  • 開發資料密集型應用的開發者
  • 需要無限捲動的應用程式
  • 需要一致的UI模式的團隊
  • 針對多個平台的專案
  • 希望程式碼量最少的使用者

使用建議

  • 需要與可滾動組件整合
  • 複雜的 UI 可能需要自定義樣式
  • 效能取決於資料來源的效率
  • 不適用於靜態內容
  • 有限的內建錯誤處理

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

refresh_loadmore

A Flutter component that supports pull-down refresh and pull-up to load more data (一个组件,支持下拉刷新,上拉加载更多数据).

Getting Started

Add this line to pubspec.yaml ( 添加这一行到pubspec.yaml)

dependencies:
     refresh_loadmore: ^2.0.7

How To Use

Use the class RefreshLoadmore

Properties and functions:

  /// Callback function on pull down to refresh | 下拉刷新时的回调函数
  final Future<void> Function()? onRefresh;

  /// Callback function on pull up to load more data | 上拉以加载更多数据的回调函数
  final Future<void> Function()? onLoadmore;

  /// Whether it is the last page, if it is true, you can not load more | 是否为最后一页,如果为true,则无法加载更多
  final bool isLastPage;

  /// Child widget | 子组件
  final Widget child;

  /// Prompt text widget when there is no more data at the bottom | 底部没有更多数据时的提示文字组件
  final Widget? noMoreWidget;

  /// Prompt widget when loading new data at the bottom | 正在加载数据时的提示组件
  final Widget? loadingWidget;

  /// Prompt padding for body if needed | 你可以自定义padding
  final EdgeInsetsGeometry? padding;

  /// You can use your custom scrollController, or not | 你可以使用自定义的 ScrollController,或者不使用
  final ScrollController? scrollController;

Examples

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// is the last page | 是否为最后一页
  bool isLastPage = false;

  List? list;
  int page = 1;

  @override
  void initState() {
    super.initState();
    loadFirstData();
  }

  Future<void> loadFirstData() async {
    await Future.delayed(Duration(seconds: 1), () {
      setState(() {
        list = [
          'dddd',
          'sdfasfa',
          'sdfgaf',
          'adsgafg',
          'dddd',
          'sdfasfa',
          'sdfgaf',
          'adsgafg',
          'dddd',
          'sdfasfa',
          'sdfgaf',
          'adsgafg'
              'adsgafg',
          'dddd',
          'sdfasfa',
          'sdfgaf',
          'adsgafg'
        ];
        isLastPage = false;
        page = 1;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: list != null
          ? RefreshLoadmore(
              onRefresh: loadFirstData,
              onLoadmore: () async {
                await Future.delayed(Duration(seconds: 1), () {
                  setState(() {
                    list!.addAll(['123', '234', '457']);
                    page++;
                  });
                  print(page);
                  if (page >= 3) {
                    setState(() {
                      isLastPage = true;
                    });
                  }
                });
              },
              noMoreWidget: Text(
                'No more data, you are at the end',
                style: TextStyle(
                  fontSize: 18,
                  color: Theme.of(context).disabledColor,
                ),
              ),
              isLastPage: isLastPage,
              child: list!.isNotEmpty
                  ? Column(
                      children: list!
                          .map(
                            (e) => ListTile(
                              title: Text(e),
                              trailing: Icon(Icons.accessibility_new),
                            ),
                          )
                          .toList(),
                    )
                  : Center(
                      child: Text('empty'),
                    ),
            )
          : Center(child: CircularProgressIndicator()),
    );
  }
}



Renderings

images images images

所屬分類

依賴

依賴清單 1 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。