import 'package:flutter/material.dart'; import 'dart:async'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('下拉刷新,上拉加载示例'), ), body: DroupDownRefresh(), ), ); } } class DroupDownRefresh extends StatefulWidget { @override _DroupDownRefresh createState() => _DroupDownRefresh(); } class _DroupDownRefresh extends State<DroupDownRefresh> { List list = List(); ScrollController scrollController = ScrollController(); int page = 0; bool isLoading = false; @override void initState() { super.initState(); initData(); scrollController.addListener(() { if (scrollController.position.pixels == scrollController.position.maxScrollExtent) { print('滑动到底部'); getMoreData(); } }); } @override void dispose() { super.dispose(); scrollController.dispose(); } Future initData() async { await Future.delayed(Duration(seconds: 1), () { setState(() { list = List.generate(15, (i) => '初始数据$i'); }); }); } Future onRefreshData() async { await Future.delayed(Duration(seconds: 1), () { setState(() { list = List.generate(15, (i) => '刷新后的数据$i'); }); }); } Future getMoreData() async { if (!isLoading) { setState(() { isLoading = true; }); } await Future.delayed(Duration(seconds: 1), () { setState(() { list.addAll(List.generate(5, (i) => '第$page次上拉的数据')); page++; isLoading = false; }); }); } Widget renderListItem(BuildContext context, int index) { if (index < list.length) { return ListTile( title: Text(list[index]), ); } return showGetMoreWidget(); } Widget showGetMoreWidget() { 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, ) ], ), ), ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( '下拉刷新,上拉加载更多', style: TextStyle(color: Colors.black, fontSize: 18.0), ), centerTitle: true, elevation: 0, backgroundColor: Color(0xffeded), ), body: RefreshIndicator( onRefresh: onRefreshData, child: ListView.builder( itemBuilder: renderListItem, itemCount: list.length + 1, controller: scrollController, ), ), ); } }
dart笔记14:flutter上拉刷新下拉加载示例
dart笔记14:flutter上拉刷新下拉加载示例,通过RefreshIndicator组件,来监听下拉刷新,重新赋值给liseView,通过listView的controller,监听滚动,判断scrollController.position.pixels ==
scrollController.position.maxScrollExtent,即是否滚动到底部,来实现上拉加载,注意,在组件dispose时,scrollController也要跟着销毁: