您好,登錄后才能下訂單哦!
本文介紹了Flutter 實現下拉刷新上拉加載的示例代碼,分享給大家,具體如下:
效果圖
使用方法
添加依賴
dependencies: pull_to_refresh: ^1.5.7
導入包
import 'package:pull_to_refresh/pull_to_refresh.dart';
頁面代碼樣例
class _MyHomePageState extends State<MyHomePage> { List<String> items = ["1", "2", "3", "4", "5", "6", "7", "8"]; RefreshController _refreshController = RefreshController(initialRefresh: false); void _onRefresh() async { // monitor network fetch await Future.delayed(Duration(milliseconds: 1000)); // if failed,use refreshFailed() _refreshController.refreshCompleted(); } void _onLoading() async { // monitor network fetch await Future.delayed(Duration(milliseconds: 1000)); // if failed,use loadFailed(),if no data return,use LoadNodata() items.add((items.length + 1).toString()); if (mounted) setState(() {}); _refreshController.loadComplete(); } @override Widget build(BuildContext context) { return Scaffold( body: SmartRefresher( enablePullDown: true, enablePullUp: true, header: WaterDropHeader(), footer: CustomFooter( builder: (BuildContext context, LoadStatus mode) { Widget body; if (mode == LoadStatus.idle) { body = Text("pull up load"); } else if (mode == LoadStatus.loading) { body = CircularProgressIndicator(); } else if (mode == LoadStatus.failed) { body = Text("Load Failed!Click retry!"); } else if (mode == LoadStatus.canLoading) { body = Text("release to load more"); } else { body = Text("No more Data"); } return Container( height: 55.0, child: Center(child: body), ); }, ), controller: _refreshController, onRefresh: _onRefresh, onLoading: _onLoading, child: ListView.builder( itemBuilder: (c, i) => Card(child: Center(child: Text(items[i]))), itemExtent: 100.0, itemCount: items.length, ), ), ); } }
完整源代碼
https://gitee.com/cxyzy1/flutter_pulldown_refresh
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。