简介
下拉刷新
RefreshIndicator下拉刷新的widget
上拉加载更多
①借助ScrollViewController监听列表滚动的位置，来实现加载更多的功能
②通过NotificationListener的onNotification回调监听列表滚动的位置，来实现加载更多的功能
刷新功能
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<String> _cityNames = [
'北京',
'郑州',
'上海',
'杭州',
'北京',
'上海',
'泰康',
'成都',
'武汉'
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('下拉刷新和上拉加载更多功能'),
),
body: RefreshIndicator(
child: ListView(
children: _buildList(),
),
onRefresh: _handleRefresh,
),
);
}
Future<Null> _handleRefresh() async {
await Future.delayed(Duration(seconds: 2));
setState(() {
_cityNames = _cityNames.reversed.toList();
});
return null;
}
List<Widget> _buildList() {
return _cityNames.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.teal),
child: Text(
city,
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
}
}
刷新+加载更多功能
方案一：通过
NotificationListener的onNotification回调监听
import 'dart:math';
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<String> _cityNames = [
'北京',
'郑州',
'上海',
'杭州',
'北京',
'上海',
'成都',
];
getRandomColor() {
return Color.fromARGB(
255,
Random.secure().nextInt(255),
Random.secure().nextInt(255),
Random.secure().nextInt(255));
}
_loadData() async {
await Future.delayed(Duration(milliseconds: 200));
setState(() {
List<String> list = List<String>.from(_cityNames);
list.addAll(_cityNames);
_cityNames = list;
});
}
bool onNotification(Notification notification) {
if (notification is! ScrollNotification) {
// 如果不是滚动事件，直接返回
return false;
}
ScrollNotification scroll = notification as ScrollNotification;
// 当前滑动距离
double currentExtent = scroll.metrics.pixels;
double maxExtent = scroll.metrics.maxScrollExtent;
if (currentExtent == maxExtent) {
//加载更多操作
_loadData();
}
// 返回false，继续向上传递,返回true则不再向上传递
return false;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('下拉刷新和上拉加载更多功能'),
),
body: new NotificationListener(
onNotification: onNotification,
child: RefreshIndicator(
child: ListView(
physics: const AlwaysScrollableScrollPhysics(),
children: _buildList(),
),
onRefresh: _handleRefresh,
),
),
);
}
Future<Null> _handleRefresh() async {
await Future.delayed(Duration(seconds: 2));
setState(() {
_cityNames = _cityNames.reversed.toList();
});
return null;
}
List<Widget> _buildList() {
return _cityNames.map((city) => _item(city)).toList();
}
Widget _item(String city) {
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color: getRandomColor()),
child: Text(
city,
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
}
}
方案二、借助
ScrollViewController监听列表滚动的位置
import 'dart:math';
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<String> _cityNames = [
'北京',
'郑州',
'上海',
'杭州',
'北京',
'上海',
'成都',
];
ScrollController _scrollController = new ScrollController();
getRandomColor() {
return Color.fromARGB(255, Random.secure().nextInt(255),
Random.secure().nextInt(255), Random.secure().nextInt(255));
}
@override
void dispose() {
// TODO: implement dispose
//为了避免内存泄露，需要调用_controller.dispose
_scrollController.dispose();
super.dispose();
}
@override
void initState() {
super.initState();
// TODO: implement initState
//监听滚动事件，打印滚动位置
_scrollController.addListener(() {
//maxScrollExtent 最大可滚动位置，到底部
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
_loadData();
}
});
}
_loadData() async {
await Future.delayed(Duration(milliseconds: 200));
setState(() {
List<String> list = List<String>.from(_cityNames);
list.addAll(_cityNames);
_cityNames = list;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('下拉刷新和上拉加载更多功能'),
),
body: RefreshIndicator(
child: ListView(
controller: _scrollController,
physics: const AlwaysScrollableScrollPhysics(),
children: _buildList(),
),
onRefresh: _handleRefresh,
),
);
}
Future<Null> _handleRefresh() async {
await Future.delayed(Duration(seconds: 2));
setState(() {
_cityNames = _cityNames.reversed.toList();
});
return null;
}
List<Widget> _buildList() {
return _cityNames.map((city) => _item(city)).toList();
}
Widget _item(String city) {
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color: getRandomColor()),
child: Text(
city,
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
}
}
效果图
下拉刷新和上拉加载更多.gif
补充
1.通过setState方式加载更多
int page = 1; //当前页数
List<Map> hotGoodsList = []; //火爆专区的商品列表数据
@override
void initState() {
// TODO: implement initState
super.initState();
_getHotGoods();
}
//火爆商品接口
void _getHotGoods() {
var formPage = {'page': page};
request('homePageBelowConten', formData: formPage).then((val) {
var data = json.decode(val.toString());
List<Map> newGoodsList = (data['data'] as List).cast();
setState(() {
hotGoodsList.addAll(newGoodsList);
page++;
});
});
}
网友评论