flutter下拉刷新整個頁面，Flutter進階第3篇：下拉刷新 上拉分頁加載更多

效果圖：

flutter下拉刷新整個頁面。學習之前需要導入Dio庫，具體用法與導入連接請查看我的博客
Flutter進階第2篇：Dio庫實現網絡請求以及動態渲染數據

News.dart

import 'package:flutter/material.dart';import 'dart:convert';
import 'package:dio/dio.dart';class NewsPage extends StatefulWidget {NewsPage({Key key}) : super(key: key);_NewsPageState createState() => _NewsPageState();
}class _NewsPageState extends State<NewsPage> {List _list = [];int _page = 1;bool hasMore = true; //判斷有沒有數據ScrollController _scrollController = new ScrollController();@overridevoid initState() {// TODO: implement initStatesuper.initState();this._getData();//監聽滾動條事件_scrollController.addListener(() {print(_scrollController.position.pixels); //獲取滾動條下拉的距離print(_scrollController.position.maxScrollExtent); //獲取整個頁面的高度if (_scrollController.position.pixels >_scrollController.position.maxScrollExtent - 40) {this._getData();}});}void _getData() async {if (this.hasMore) {var apiUrl ="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=${_page}";var response = await Dio().get(apiUrl);var res = json.decode(response.data)["result"];   setState(() {this._list.addAll(res);  //拼接this._page++;});//判斷是否是最后一頁if (res.length < 20) {setState(() {this.hasMore = false;});}}}//下拉刷新Future<void> _onRefresh() async {await Future.delayed(Duration(milliseconds: 2000), () {print('請求數據完成');_getData();});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("新聞列表"),),body: this._list.length > 0? RefreshIndicator(onRefresh: _onRefresh,child: ListView.builder(controller: _scrollController,itemCount: this._list.length, //20itemBuilder: (context, index) {//19                  if (index == this._list.length-1) {   //列表渲染到最后一條的時候加一個圈圈//拉到底return Column(children: <Widget>[ListTile(title: Text("${this._list[index]["title"]}",maxLines: 1),),Divider(),_getMoreWidget()],);} else {return Column(children: <Widget>[ListTile(title: Text("${this._list[index]["title"]}",maxLines: 1),),Divider()],);}},)): _getMoreWidget(),);}//加載中的圈圈Widget _getMoreWidget() {if(hasMore){return Center(child: Padding(padding: EdgeInsets.all(10.0),child: Row(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[Text('加載中...',style: TextStyle(fontSize: 16.0),),CircularProgressIndicator(strokeWidth: 1.0,)],),),);}else{return Center(child: Text("--我是有底線的--"),);}}
}