上期回顧
在上一篇博文中我們?cè)诮榻BListView跟GridView的時(shí)候趴腋，限于篇幅問(wèn)題我們只講解了此二者的簡(jiǎn)單的使用方法，關(guān)于一些在實(shí)際開(kāi)發(fā)中更常用的細(xì)節(jié)問(wèn)我們并沒(méi)有來(lái)得及跟大家展開(kāi)講解局服，比如我們?cè)谑褂瞄L(zhǎng)列表的時(shí)的下拉刷新或者上拉加載更多的邏輯處理，今天的這篇文章我們就來(lái)著重分析一下在flutter中我們是如果實(shí)現(xiàn)長(zhǎng)列表的下拉刷新跟上拉加載更多操作的驳遵。
前言
現(xiàn)實(shí)開(kāi)發(fā)中長(zhǎng)列表布局幾乎是所有APP的標(biāo)配淫奔，幾乎你所使用的任何一款app都能找到長(zhǎng)列表的身影，而長(zhǎng)列表中必不可少的操作肯定是下拉刷新堤结、上拉加載更多唆迁。在原生Android中我們一般使用RecyclerView配合support.v4包下面的SwipeRefreshLayout來(lái)完成下拉刷新動(dòng)作，通過(guò)給RecyclerView綁定RecyclerView.OnScrollListener()拖動(dòng)監(jiān)聽(tīng)事件來(lái)判斷列表的滑動(dòng)狀態(tài)來(lái)決定是否進(jìn)行加載更多的操作竞穷，有了原生Android開(kāi)發(fā)的經(jīng)驗(yàn)唐责，我們完全可以把這個(gè)思路同樣應(yīng)用在Flutter中的長(zhǎng)列表操作上。下面我們一起來(lái)看下Flutter中的下拉刷新跟上拉加載更多吧来庭。
1.下拉刷新
Flutter跟Android作為Google的親兒子無(wú)論是在在風(fēng)格命名還是設(shè)計(jì)思路上都有很大的相似跟想通性妒蔚，上一篇博文中我們提到Flutter中使用ListViiew跟GridView來(lái)完成長(zhǎng)列表布局，跟原生Android命名都一樣，在Flutter中給我們提供的RefreshIndicator組件跟原生Android中的SwipeRefreshLayout設(shè)計(jì)思路一樣肴盏，都是為了簡(jiǎn)化我們完成下拉刷新的監(jiān)聽(tīng)動(dòng)作科盛。而且RefreshIndicator跟原生Android的SwipeRefreshLayout在外觀上幾乎也一樣，都遵循了google material design設(shè)計(jì)理念菜皂。
/// Creates a refresh indicator.
///
/// The [onRefresh], [child], and [notificationPredicate] arguments must be
/// non-null. The default
/// [displacement] is 40.0 logical pixels.
///
/// The [semanticsLabel] is used to specify an accessibility label for this widget.
/// If it is null, it will be defaulted to [MaterialLocalizations.refreshIndicatorSemanticLabel].
/// An empty string may be passed to avoid having anything read by screen reading software.
/// The [semanticsValue] may be used to specify progress on the widget. The
const RefreshIndicator({
Key key,
@required this.child,
this.displacement = 40.0, //圓環(huán)進(jìn)度條展示居頂部的位置
@required this.onRefresh, //刷新回調(diào)
this.color, //圓環(huán)進(jìn)度條顏色
this.backgroundColor, //背景顏色
this.notificationPredicate = defaultScrollNotificationPredicate,
this.semanticsLabel,
this.semanticsValue,
})
在上面的構(gòu)造方法中必要參數(shù)我都給了詳細(xì)的注釋說(shuō)明贞绵，所以這里我就不多展開(kāi)講解了，先來(lái)看一張下拉刷新的效果圖恍飘，稍后結(jié)合代碼我再做具體講解榨崩。
效果圖
樣例代碼
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: "ListView",
debugShowCheckedModeBanner: false,
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyState();
}
class MyState extends State {
List<ItemEntity> entityList = [];
@override
void initState() {
super.initState();
for (int i = 0; i < 10; i++) {
entityList.add(ItemEntity("Item $i", Icons.accessibility));
}
}
Future<Null> _handleRefresh() async {
print('-------開(kāi)始刷新------------');
await Future.delayed(Duration(seconds: 2), () {
//模擬延時(shí)
setState(() {
entityList.clear();
entityList = List.generate(
10,
(index) =>
new ItemEntity("下拉刷新后--item $index", Icons.accessibility));
return null;
});
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("ListView"),
),
body: RefreshIndicator(
displacement: 50,
color: Colors.redAccent,
backgroundColor: Colors.blue,
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return ItemView(entityList[index]);
},
itemCount: entityList.length,
),
onRefresh: _handleRefresh));
}
}
/**
* 渲染Item的實(shí)體類(lèi)
*/
class ItemEntity {
String title;
IconData iconData;
ItemEntity(this.title, this.iconData);
}
/**
* ListView builder生成的Item布局，讀者可類(lèi)比成原生Android的Adapter的角色
*/
class ItemView extends StatelessWidget {
ItemEntity itemEntity;
ItemView(this.itemEntity);
@override
Widget build(BuildContext context) {
return Container(
height: 100,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Text(
itemEntity.title,
style: TextStyle(color: Colors.black87),
),
Positioned(
child: Icon(
itemEntity.iconData,
size: 30,
color: Colors.blue,
),
left: 5)
],
));
}
}
上述代碼我還是借助上篇博文中講解ListView的例子章母，只不過(guò)ListView的外層用RefreshIndicator包裹了一下母蛛，并且給RefreshIndicator的onRefresh綁定了處理下拉刷新事件的回調(diào)函數(shù)。
Future<Null> _handleRefresh() async {
print('-------開(kāi)始刷新------------');
await Future.delayed(Duration(seconds: 2), () {
//模擬延時(shí)
setState(() {
entityList.clear();
entityList = List.generate(
10,
(index) =>
new ItemEntity("下拉刷新后--item $index", Icons.accessibility));
return null;
});
});
}
在_handleRefresh（）中乳怎，我們通過(guò)Future.delayed模擬延時(shí)操作彩郊，在延時(shí)函數(shù)執(zhí)行完畢之后，首先清空我們?cè)趇nitState中模擬的列表數(shù)據(jù)蚪缀，然后重新生成刷新后的數(shù)據(jù)秫逝，通過(guò)setState重新渲染ListView上綁定的數(shù)據(jù)來(lái)完成下拉刷下這一操作。
2.上拉加載更多
繼續(xù)完善下拉刷新的代碼询枚，我們借助ScrollController給ListView添加滑動(dòng)監(jiān)聽(tīng)事件
ListView.builder(
itemBuilder: (BuildContext context, int index) {
if (index == entityList.length) {
return LoadMoreView();
} else {
return ItemView(entityList[index]);
}
},
itemCount: entityList.length + 1,
controller: _scrollController,
),
onRefresh: _handleRefresh));
然后通過(guò)_scrollController監(jiān)聽(tīng)手指上下拖動(dòng)時(shí)在屏幕上產(chǎn)生的滾動(dòng)距離來(lái)判斷是否觸發(fā)加載更多的操作
_scrollController.addListener(() {
if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent) {
print("------------加載更多-------------");
_getMoreData();
}
});
我們借助ScrollController來(lái)判斷當(dāng)前ListView可拖動(dòng)的距離是否等于listview的最大可拖動(dòng)距離违帆，如果等于，那么就會(huì)觸發(fā)加載更多的操作金蜀，然后我們?nèi)プ鱿鄳?yīng)的邏輯從而完成加載更多的操作刷后。
其實(shí)現(xiàn)在講完Flutter中下拉刷新跟加載更多的操作，你會(huì)發(fā)現(xiàn)在Flutter中處理這些操作跟開(kāi)篇提到的原生Android的處理方式跟思想幾乎是一致的廉油，我們來(lái)看下完成下拉刷新跟加載更多后的完整效果圖惠险。
效果圖
先來(lái)看下整體代碼，稍后我在結(jié)合代碼講解一下這里需要注意的一個(gè)小細(xì)節(jié)抒线。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: "ListView",
debugShowCheckedModeBanner: false,
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyState();
}
class MyState extends State {
List<ItemEntity> entityList = [];
ScrollController _scrollController = new ScrollController();
bool isLoadData = false;
@override
void initState() {
super.initState();
_scrollController.addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
print("------------加載更多-------------");
_getMoreData();
}
});
for (int i = 0; i < 10; i++) {
entityList.add(ItemEntity("Item $i", Icons.accessibility));
}
}
Future<Null> _getMoreData() async {
await Future.delayed(Duration(seconds: 2), () { //模擬延時(shí)操作
if (!isLoadData) {
isLoadData = true;
setState(() {
isLoadData = false;
List<ItemEntity> newList = List.generate(5, (index) =>
new ItemEntity(
"上拉加載--item ${index + entityList.length}", Icons.accessibility));
entityList.addAll(newList);
});
}
});
}
Future<Null> _handleRefresh() async {
print('-------開(kāi)始刷新------------');
await Future.delayed(Duration(seconds: 2), () { //模擬延時(shí)
setState(() {
entityList.clear();
entityList = List.generate(10,
(index) =>
new ItemEntity("下拉刷新后--item $index", Icons.accessibility));
return null;
});
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("ListView"),
),
body: RefreshIndicator(
displacement: 50,
color: Colors.redAccent,
backgroundColor: Colors.blue,
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
if (index == entityList.length) {
return LoadMoreView();
} else {
return ItemView(entityList[index]);
}
},
itemCount: entityList.length + 1,
controller: _scrollController,
),
onRefresh: _handleRefresh));
}
}
/**
* 渲染Item的實(shí)體類(lèi)
*/
class ItemEntity {
String title;
IconData iconData;
ItemEntity(this.title, this.iconData);
}
/**
* ListView builder生成的Item布局，讀者可類(lèi)比成原生Android的Adapter的角色
*/
class ItemView extends StatelessWidget {
ItemEntity itemEntity;
ItemView(this.itemEntity);
@override
Widget build(BuildContext context) {
return Container(
height: 100,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Text(
itemEntity.title,
style: TextStyle(color: Colors.black87),
),
Positioned(
child: Icon(
itemEntity.iconData,
size: 30,
color: Colors.blue,
),
left: 5)
],
));
}
}
class LoadMoreView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(child: Padding(
padding: const EdgeInsets.all(18.0),
child: Center(
child: Row(children: <Widget>[
new CircularProgressIndicator(),
Padding(padding: EdgeInsets.all(10)),
Text('加載中...')
], mainAxisAlignment: MainAxisAlignment.center,),
),
), color: Colors.white70,);
}
}
上述代碼中關(guān)于listView的itemBuilder的部分代碼我做下簡(jiǎn)單的解釋說(shuō)明：
ListView.builder(
itemBuilder: (BuildContext context, int index) {
if (index == entityList.length) { //是否滑動(dòng)到底部
return LoadMoreView();
} else {
return ItemView(entityList[index]);
}
},
itemCount: entityList.length + 1,
controller: _scrollController,
),
對(duì)比一開(kāi)始下拉刷新的代碼渣慕，細(xì)心的讀者可能注意到嘶炭，加載更多邏輯處理是在itemBuilder的時(shí)候多了一個(gè)邏輯判斷
if (當(dāng)前Item的角標(biāo)==數(shù)據(jù)集合的長(zhǎng)度) { //滑動(dòng)到最底部的時(shí)候
顯示加載更多的布局 LoadMoreView();
}else{
顯示正常的Item布局 ItemView();
}
然后就是itemCount的數(shù)量自然也要加1，itemCount: entityList.length + 1加的這個(gè)1就是最底部的LoadMoreView的布局逊桦。關(guān)于_scrollController所觸發(fā)的回調(diào)函數(shù)我就不多做講解了眨猎，跟處理下拉刷新時(shí)的邏輯代碼一樣，讀者可結(jié)合上述完整代碼自行對(duì)比理解强经。
好了睡陪，至此關(guān)于ListView的上拉加載更多跟下拉刷新操作我就為大家講解完畢了，至于GridView的上下拉操作跟listView原理一樣，我就不在此過(guò)多廢話了兰迫，讀者可自行寫(xiě)代碼測(cè)試GridView的上下拉刷新操作信殊。
