引言
- 有列表使用的地方就會(huì)并存會(huì)用到刷新加載功能巴碗，今天帶大家一起來(lái)學(xué)習(xí)一下。
1即寒、下拉加載
- 我們通過(guò)使用RefreshIndicator組件來(lái)實(shí)現(xiàn)下拉刷新功能橡淆，首先我們來(lái)看下RefreshIndicator組件有哪些屬性
const RefreshIndicator({
Key key,
@required this.child,
this.displacement = 40.0,
@required this.onRefresh,
this.color,
this.backgroundColor,
this.notificationPredicate = defaultScrollNotificationPredicate,
this.semanticsLabel,
this.semanticsValue,
})
- 如何使用
使用RefreshIndicator外層包裹List即可，onRefresh是下拉刷新觸發(fā)的時(shí)間監(jiān)聽母赵，至此下拉刷新就簡(jiǎn)單的實(shí)現(xiàn)了
body: Center(
child: Container(
child: RefreshIndicator(
onRefresh: _loadNewData,
child: ListView(
controller: _scrollController,
children: _buildList(),
),
),
),
),
Future<void> _loadNewData() async{
await Future.delayed(Duration(seconds: 2));
setState(() {
cityList = CITY_NAMES;
});
return Null;
}
2逸爵、上拉加載
- 上拉加載需要用到對(duì)列表的滾動(dòng)監(jiān)聽，這時(shí)需要給List綁定一個(gè)ScrollController凹嘲，在這之前需要重寫initState和dispose方法师倔，initState不言而喻是構(gòu)造方法，dispose相當(dāng)于iOS的dealloc周蹭、Android中的onDestroy方法
@override
void initState() {
// TODO: implement initState
_scrollController.addListener(() { //添加監(jiān)聽
if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent){ //判斷是否滾動(dòng)到列表底部
_loadMoreData();
print('開始執(zhí)行');
}
});
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
_scrollController.dispose();
super.dispose();
}
2趋艘、完整源碼
- 下面源碼還添加了列表嵌套結(jié)合下拉刷新和上拉加載綜合使用
import 'package:flutter/material.dart';
const CITY_NAMES = ['北京','上海','廣州','深圳','杭州','武漢','廈門','東莞','九江','南昌','萍鄉(xiāng)','新余'];
const SON_CITY_NAMES = ['北京son','上海son','廣州son','深圳son','杭州son','武漢son','廈門son','東莞son','九江son','南昌son','萍鄉(xiāng)son','新余son'];
class TravelPage extends StatefulWidget {
@override
_TravelPageState createState() {
// TODO: implement createState
return _TravelPageState();
}
}
class _TravelPageState extends State <TravelPage> {
ScrollController _scrollController = ScrollController();
List<String> cityList = List.from(CITY_NAMES);
@override
void initState() {
// TODO: implement initState
_scrollController.addListener(() {
if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
_loadMoreData();
print('開始執(zhí)行');
}
});
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('List的嵌套使用'),
),
body: Center(
child: Container(
child: RefreshIndicator(
onRefresh: _loadNewData,
child: ListView(
controller: _scrollController,
children: _buildList(),
),
)
),
)
);
}
List<Widget> _buildList() {
return cityList.map((city) => _item(city)).toList();
}
Widget _item(String city) {
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.orange),
child: ListView(
scrollDirection: Axis.horizontal,
children: _sonBuildList(),
),
);
}
List<Widget> _sonBuildList() {
return SON_CITY_NAMES.map((city) => _sonItem(city)).toList();
}
Widget _sonItem(String city) {
return Container(
width: 150,
margin: EdgeInsets.only(right: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.green),
child: Text(
city,
style: TextStyle(color: Colors.white,fontSize: 20),
),
);
}
Future<void> _loadNewData() async{
await Future.delayed(Duration(seconds: 2));
setState(() {
cityList = CITY_NAMES;
});
return Null;
}
_loadMoreData() async {
await Future.delayed(Duration(seconds: 1));
setState(() {
List tempList = List<String>.from(cityList);
tempList.addAll(cityList);
cityList = tempList;
print('加載更多');
});
}
}
