官方示例,簡單改了下,實現功能爲主。api
代碼以下:app
import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter_easyrefresh/easy_refresh.dart'; class BasicPage extends StatefulWidget { @override _BasicPageState createState() => _BasicPageState(); } class _BasicPageState extends State<BasicPage> { List<String> addStr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]; List<String> str = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]; GlobalKey<EasyRefreshState> _easyRefreshKey = GlobalKey<EasyRefreshState>(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("EasyRefresh"), ), body: Center( child: new EasyRefresh( key: _easyRefreshKey, child: new ListView.builder( //ListView的Item itemCount: str.length, itemBuilder: (BuildContext context, int index) { return new Container( height: 70.0, child: Card( child: new Center( child: new Text( str[index], style: new TextStyle(fontSize: 18.0), ), ), )); }), onRefresh: () async { await new Future.delayed(const Duration(seconds: 1), () { setState(() { str.clear(); str.addAll(addStr); }); }); }, loadMore: () async { await new Future.delayed(const Duration(seconds: 1), () { if (str.length < 20) { setState(() { str.addAll(addStr); }); } }); }, )), ); } }
特殊效果+底部按鈕,代碼以下:async
import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter_easyrefresh/easy_refresh.dart'; import 'package:flutter_easyrefresh/bezier_circle_header.dart';//若是要使用炫酷的樣式須要引入,不一樣的樣式引入不一樣的文件,詳見官方api import 'package:flutter_easyrefresh/bezier_bounce_footer.dart';//若是要使用炫酷的樣式須要引入,不一樣的樣式引入不一樣的文件,詳見官方api class BasicPage extends StatefulWidget { @override _BasicPageState createState() => _BasicPageState(); } class _BasicPageState extends State<BasicPage> { List<String> addStr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]; List<String> str = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]; GlobalKey<EasyRefreshState> _easyRefreshKey = new GlobalKey<EasyRefreshState>(); GlobalKey<RefreshHeaderState> _headerKey = new GlobalKey<RefreshHeaderState>(); GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("EasyRefresh"), ), body: Center( child: new EasyRefresh( key: _easyRefreshKey, refreshHeader: BezierCircleHeader( key: _headerKey, color: Theme.of(context).scaffoldBackgroundColor, ), refreshFooter: BezierBounceFooter( key: _footerKey, color: Theme.of(context).scaffoldBackgroundColor, ), child: new ListView.builder( //ListView的Item itemCount: str.length, itemBuilder: (BuildContext context, int index) { return new Container( height: 70.0, child: Card( child: new Center( child: new Text( str[index], style: new TextStyle(fontSize: 18.0), ), ), )); }), onRefresh: () async { await new Future.delayed(const Duration(seconds: 1), () { setState(() { str.clear(); str.addAll(addStr); }); }); }, loadMore: () async { await new Future.delayed(const Duration(seconds: 1), () { if (str.length < 20) { setState(() { str.addAll(addStr); }); } }); }, )), persistentFooterButtons: <Widget>[ FlatButton( onPressed: () { _easyRefreshKey.currentState.callRefresh(); }, child: Text("refresh", style: TextStyle(color: Colors.black))), FlatButton( onPressed: () { _easyRefreshKey.currentState.callLoadMore(); }, child: Text("loadMore", style: TextStyle(color: Colors.black))) ], ); } }
效果圖:ide