FlutterListView怎么實(shí)現(xiàn)上拉加載更多下拉刷新的功能

本篇內(nèi)容主要講解“FlutterListView怎么實(shí)現(xiàn)上拉加載更多下拉刷新的功能”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“FlutterListView怎么實(shí)現(xiàn)上拉加載更多下拉刷新的功能”吧!

下拉刷新

跟原生開(kāi)發(fā)一樣，下拉刷新在flutter里提供的有組件實(shí)現(xiàn) RefreshIndicator

一直不明白為啥組件中都提供下拉刷新，但就是沒(méi)有上拉加載?。?/p>

我這請(qǐng)求接口數(shù)據(jù)用的是 http 庫(kù)，是個(gè)第三方的是需要安裝的 https://pub.dev/packages/http

用法如下

class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override MyHomeWidget2 createState() => MyHomeWidget2();}class MyHomeWidget2 extends State<MyHomePage> { int page = 1; List data = new List(); var baseUrl = "https://cnodejs.org/api/v1"; @override void initState() { super.initState(); this._onRefresh(); } _fetchData() async { var response = await http.get(  '${this.baseUrl}/topics?mdrender=false&limit=10&page=${this.page}'); var json = await convert.jsonDecode(response.body); return json['data']; } Future<dynamic> _onRefresh() { data.clear(); this.page = 1; return _fetchData().then((data) {  setState(() => this.data.addAll(data)); }); } @override Widget build(BuildContext context) { return Scaffold(  body: RefreshIndicator( // 在ListView外包一層 RefreshIndicator 組件  onRefresh: _onRefresh, // 添加onRefresh方法  child: ListView.separated(   itemCount: this.data.length,   itemBuilder: (context, index) {   var _data = this.data[index];   return ListTile(    leading: Image.network(_data["author"]["avatar_url"]),    title: Text(_data["title"]),    subtitle: Text(_data["author"]["loginname"] +     " created at " +     new DateTime.now().toString()), // 為了看每次數(shù)據(jù)變動(dòng)，這里直接取當(dāng)前時(shí)間    trailing: Icon(Icons.chevron_right));   },   separatorBuilder: (context, index) {   return Divider();   },  ) )); }}

上拉加載

上拉加載原理還是一樣的，給ListView加一個(gè) ScrollController 組件，然后通過(guò)事件監(jiān)聽(tīng)滾動(dòng)條的高度來(lái)顯示和隱藏加載更多的組件

先將加載更多的組件寫(xiě)好

Widget _loadMoreWidget() { return new Padding( padding: const EdgeInsets.all(15.0), // 外邊距 child: new Center(  child: new CircularProgressIndicator() ), );}

初始化一個(gè) ScrollController 組件，將其設(shè)置給 ListView 組件的 controller 屬性上

ScrollController _scrollController = new ScrollController();child: ListView.separated( controller: _scrollController, //...)

然后通過(guò)重寫(xiě) dispost() 方法來(lái)處理加載更多組件的釋放

@overridevoid dispose() { _scrollController.dispose(); super.dispose();}

最后通過(guò)數(shù)據(jù)源來(lái)控制界面渲染哪個(gè)組件，當(dāng)數(shù)據(jù)源循環(huán)渲染的 index 跟數(shù)據(jù)源一樣長(zhǎng)時(shí)（其實(shí)少1，下標(biāo)從0開(kāi)始的）就渲染加載更多組件，讓其顯示出來(lái)，同時(shí)調(diào)用加載更多方法，獲取數(shù)據(jù)，再通過(guò)state實(shí)現(xiàn)組件ui的更新

完整代碼如下

class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override MyHomeWidget2 createState() => MyHomeWidget2();}class MyHomeWidget2 extends State<MyHomePage> { int page = 1; bool isLoadmore = false; List data = new List(); var baseUrl = "https://cnodejs.org/api/v1"; ScrollController _scrollController = new ScrollController(); @override void initState() { super.initState(); this._onRefresh(); _scrollController.addListener(() {  if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {  _onLoadmore();  } }); } _fetchData() async { var response = await http.get(  '${this.baseUrl}/topics?mdrender=false&limit=10&page=${this.page}'); var json = await convert.jsonDecode(response.body); return json['data']; } Future<dynamic> _onRefresh() { data.clear(); this.page = 1; return _fetchData().then((data) {  setState(() => this.data.addAll(data)); }); } Future<dynamic> _onLoadmore() { this.page++; return _fetchData().then((data) {  setState((){  this.data.addAll(data);  isLoadmore = false;  }); }); } @override void dispose() { _scrollController.dispose(); super.dispose(); } Widget _loadMoreWidget() { return new Padding(  padding: const EdgeInsets.all(15.0),  child: new Center(  child: new CircularProgressIndicator()  ), ); } @override Widget build(BuildContext context) { return Scaffold(  body: RefreshIndicator(  onRefresh: _onRefresh,  child: ListView.separated(   controller: _scrollController,   itemCount: this.data.length,   itemBuilder: (context, index) {   if (index == data.length - 1) {    return _loadMoreWidget();   } else {    var _data = this.data[index];    return ListTile(     leading: Image.network(_data["author"]["avatar_url"]),     title: Text(_data["title"]),     subtitle: Text(_data["author"]["loginname"] +      " created at " +      new DateTime.now().toString()),     trailing: Icon(Icons.chevron_right));   }   },   separatorBuilder: (context, index) {   return Divider();   },  ) )); }}

到此，相信大家對(duì)“FlutterListView怎么實(shí)現(xiàn)上拉加載更多下拉刷新的功能”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！