一、Flutter實現下拉刷新和上拉分頁加載更多

在Flutter官方sdk中給我們提供了下拉刷新的組件RefreshIndicator。但是沒有提供上拉分頁加載更多的組件。但是在Flutter ListView中有一個ScrollController屬性，它就是專門來控制ListView滑動事件，在這里我們可以根據ListView的位置來判斷是否滑動到了底部來做加載更多的處理。

Api接口：

二、Flutter 下拉刷新

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("請求數據Dio Demo"),

),

body: this._list.length>0?

RefreshIndicator(

onRefresh: _onRefresh,

child:ListView.builder(

itemCount: this._list.length,

itemBuilder: (context,index){

return ListTile(title:Text(this._list[index]["title"]));

}

)

)

:Text("加載中...")

);

}

Future _onRefresh() async{

print('執行刷新');

}

三、Flutter 上拉分頁加載更多

_scrollController.position.pixels 滾動的距離

_scrollController.position.maxScrollExtent 總距離

完整代碼

import 'dart:convert';

import 'package:flutter/material.dart';

import 'package:dio/dio.dart';

class HttpDemo extends StatefulWidget {

HttpDemo({Key key}) : super(key: key);

_HttpDemoState createState() => _HttpDemoState();

}

class _HttpDemoState extends State {

ScrollController _scrollController = ScrollController(); //listview的控制器

List _list=[];

int _page=1;

bool isLoading = false; //是否正在加載數據

@override

void initState() {

super.initState();

this._getData();

_scrollController.addListener(() {

if (_scrollController.position.pixels >

_scrollController.position.maxScrollExtent-20) {

print('滑動到了最底部');

_getData();

}

});

}

_getData() async{

var apiUrl="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=${this._page}";

Response result=await Dio().get(apiUrl);

// print(json.decode(result.data)["result"]);

setState(() {

this._list.addAll(json.decode(result.data)["result"]);

this._page++;

});

}

/**

* 加載更多時顯示的組件,給用戶提示

*/

Widget _getMoreWidget() {

return Center(

child: Padding(

padding: EdgeInsets.all(10.0),

child: Row(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.center,

children: [

Text(

'加載中...',

style: TextStyle(fontSize: 16.0),

),

CircularProgressIndicator(

strokeWidth: 1.0,

)

],

),

),

);

}

Future _onRefresh() async{

print('執行刷新');

// this._getData();

await Future.delayed(Duration(seconds: 3), () {

print('refresh');

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("請求數據Dio Demo"),

),

body: this._list.length>0?

RefreshIndicator(

onRefresh: _onRefresh,

child:ListView.builder(

itemCount: this._list.length,

controller: _scrollController,

itemBuilder: (context,index){

if (index == this._list.length-1){

return Column(

children: [

ListTile(

title: Text(this._list[index]["title"],maxLines: 1),

onTap: (){

Navigator.pushNamed(context, '/newsContent');

},

),

Divider(),

_getMoreWidget()

],

);

}else{

return Column(

children: [

ListTile(

title: Text(this._list[index]["title"],maxLines: 1),

onTap: (){

Navigator.pushNamed(context, '/newsContent');

},

),

Divider()

],

);

}

}

)

)

:_getMoreWidget()

);

}

}

總結

以上是生活随笔為你收集整理的php下拉上滑分页,Flutter实现下拉刷新 上拉分页加载更多的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。