Flutter 庫：強大的下拉刷新上拉加載框架——EasyRefresh
一、概述
1、簡介
EasyRefresh 是一個用于 Flutter 應(yīng)用程序的簡單易用的下拉刷新和上拉加載框架。它支持幾乎所有的 Flutter 可滾動小部件。它的功能與Android 的 SmartRefreshLayout 非常相似，并吸收了許多第三方庫的優(yōu)點。EasyRefresh 集成了各種樣式的頁眉和頁腳，但沒有任何限制，您可以輕松自定義它們。利用Flutter強大的動畫功能，即使只是一個簡單的控件也可以實現(xiàn)復(fù)雜的效果。EasyRefresh的目標是為Flutter創(chuàng)建一個功能強大、穩(wěn)定和成熟的下拉刷新框架。
2、特征
EasyRefresh具有以下特性：
- 支持所有可滾動小部件
- 滾動物理范圍，完全匹配可滾動小部件
- 集成多個酷頁眉和頁腳樣式
- 支持自定義樣式，實現(xiàn)各種動畫效果
- 支持下拉刷新和上拉加載（可通過控制器觸發(fā)和完成）
- 支持指示器位置設(shè)置，結(jié)合監(jiān)聽器可以放置在任意位置
- 支持頁面啟動時刷新，并可自定義視圖
- 支持安全區(qū)域，不會遮擋內(nèi)容
- 可自定義滾動參數(shù)，允許列表具有不同的滾動反饋和慣性
3、在線演示
https://xuelongqy.github.io/flutter_easy_refresh/#/
4、APK下載
https://github.com/xuelongqy/flutter_easy_refresh/releases文章來源：http://www.zghlxwxcb.cn/news/detail-804993.html
5、接口參考
https://pub.flutter-io.cn/documentation/easy_refresh/latest/文章來源地址http://www.zghlxwxcb.cn/news/detail-804993.html
二、官方示例
1、默認構(gòu)造函數(shù)
dartCopy codeEasyRefresh(
onRefresh: () async {
// 下拉刷新邏輯
// ...
},
onLoad: () async {
// 上拉加載邏輯
// ...
},
child: ListView(),
);
2、生成器構(gòu)造函數(shù)
dartCopy codeEasyRefresh.builder(
onRefresh: () async {
// 下拉刷新邏輯
// ...
return IndicatorResult.success;
},
onLoad: () async {
// 上拉加載邏輯
// ...
},
childBuilder: (context, physics) {
return ListView(
physics: physics,
);
},
);
3、指示器定位
EasyRefresh(
header: Header(
position: IndicatorPosition.locator,
),
footer: Footer(
position: IndicatorPosition.locator,
),
onRefresh: () async {
// 下拉刷新邏輯
// ...
},
onLoad: () async {
// 上拉加載邏輯
// ...
return IndicatorResult.noMore;
},
child: CustomScrollView(
slivers: [
SliverAppBar(),
const HeaderLocator.sliver(),
// ...
const FooterLocator.sliver(),
],
),
);
4、使用指示器
EasyRefreshController _controller = EasyRefreshController(
controlFinishRefresh: true,
controlFinishLoad: true,
);
....
EasyRefresh(
controller: _controller,
onRefresh: () async {
....
_controller.finishRefresh();
_controller.resetFooter();
},
onLoad: () async {
....
_controller.finishLoad(IndicatorResult.noMore);
},
....
);
....
_controller.callRefresh();
_controller.callLoad();
5、指定頁眉和頁腳
EasyRefresh(
header: MaterialHeader(),
footer: MaterialFooter(),
child: ListView(),
....
);
// Global
EasyRefresh.defaultHeaderBuilder = () => ClassicHeader();
EasyRefresh.defaultFooterBuilder = () => ClassicFooter();
6、嵌套滾動視圖
EasyRefresh.builder(
header: MaterialHeader(
clamping: true,
),
onRefresh: () async {
....
},
onLoad: () async {
....
},
childBuilder: (context, physics) {
return NestedScrollView(
physics: physics,
body: ListView(
physics: physics,
);
);
},
);
// or
EasyRefresh.builder(
header: MaterialHeader(
clamping: true,
position: IndicatorPosition.locator,
),
onRefresh: () async {
....
},
onLoad: () async {
....
},
childBuilder: (context, physics) {
return NestedScrollView(
physics: physics,
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
const HeaderLocator.sliver(clearExtent: false),
....
];
},
body: ListView(
physics: physics,
);
);
},
);
三、基本使用
1、安裝
flutter pub add easy_refresh
2、基本使用
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('EasyRefresh 示例'),
),
body: EasyRefresh(
onRefresh: () async {
// 下拉刷新邏輯
// ...
await Future.delayed(Duration(seconds: 2));
},
onLoad: () async {
// 上拉加載邏輯
// ...
await Future.delayed(Duration(seconds: 2));
},
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
),
),
);
}
}
void main() {
runApp(MaterialApp(
home: MyHomePage(),
));
}
3、運行結(jié)果
四、封裝 SimpleEasyRefresher
1、封裝
import 'dart:async';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
class SimpleEasyRefresher extends StatefulWidget {
const SimpleEasyRefresher({
super.key,
required this.easyRefreshController,
this.onLoad,
this.onRefresh,
required this.childBuilder,
this.indicatorPosition = IndicatorPosition.above,
});
// EasyRefreshController實例，用于控制刷新和加載的狀態(tài)
final EasyRefreshController? easyRefreshController;
// 加載回調(diào)函數(shù)
final FutureOr<dynamic> Function()? onLoad;
// 刷新回調(diào)函數(shù)
final FutureOr<dynamic> Function()? onRefresh;
// 構(gòu)建子組件的回調(diào)函數(shù)
final Widget Function(BuildContext context, ScrollPhysics physics)?
childBuilder;
// 指示器的位置，默認為上方
final IndicatorPosition indicatorPosition;
State<SimpleEasyRefresher> createState() => _SimpleEasyRefresherState();
}
class _SimpleEasyRefresherState extends State<SimpleEasyRefresher> {
Widget build(BuildContext context) {
return EasyRefresh.builder(
// 在開始刷新時立即觸發(fā)刷新
refreshOnStart: true,
// 刷新完成后重置刷新狀態(tài)
resetAfterRefresh: true,
// 同時觸發(fā)刷新和加載的回調(diào)函數(shù)
simultaneously: true,
// 加載回調(diào)函數(shù)
onLoad: () async {
await widget.onLoad?.call();
setState(() {});
},
// 刷新回調(diào)函數(shù)
onRefresh: () async {
await widget.onRefresh?.call();
setState(() {});
},
// 指定刷新時的頭部組件
header: ClassicHeader(
hitOver: true,
safeArea: false,
processedDuration: Duration.zero,
showMessage: false,
showText: false,
position: widget.indicatorPosition,
// 下面是一些文本配置
// processingText: "正在刷新...",
// readyText: "正在刷新...",
// armedText: "釋放以刷新",
// dragText: "下拉刷新",
// processedText: "刷新成功",
// failedText: "刷新失敗",
),
// 指定加載時的底部組件
footer: ClassicFooter(
processedDuration: Duration.zero,
showMessage: false,
showText: false,
position: widget.indicatorPosition,
// 下面是一些文本配置
// processingText: "加載中...",
// processedText: "加載成功",
// readyText: "加載中...",
// armedText: "釋放以加載更多",
// dragText: "上拉加載",
// failedText: "加載失敗",
// noMoreText: "沒有更多內(nèi)容",
),
controller: widget.easyRefreshController,
childBuilder: widget.childBuilder,
);
}
}
2、使用示例
import 'package:flutter/material.dart';
import 'package:easy_refresh/easy_refresh.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Pull to Refresh',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
EasyRefreshController _controller = EasyRefreshController();
List<String> _dataList = List.generate(10, (index) => 'Item ${index + 1}');
Future<void> _refresh() async {
// 模擬刷新操作
await Future.delayed(Duration(seconds: 2));
setState(() {
_dataList = List.generate(10, (index) => 'Item ${index + 1}');
});
_controller.finishRefresh();
}
Future<void> _loadMore() async {
// 模擬加載更多操作
await Future.delayed(Duration(seconds: 2));
setState(() {
_dataList.addAll(List.generate(10, (index) => 'Item ${_dataList.length + index + 1}'));
});
_controller.finishLoad();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Pull to Refresh'),
),
body: SimpleEasyRefresher(
easyRefreshController: _controller,
onRefresh: _refresh,
onLoad: _loadMore,
childBuilder: (context, physics) {
return ListView.builder(
physics: physics,
itemCount: _dataList.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_dataList[index]),
);
},
);
},
),
);
}
}
3、運行結(jié)果
到了這里，關(guān)于Flutter 庫：強大的下拉刷新上拉加載框架——EasyRefresh的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
