import 'package:flutter/material.dart'; void main() => runApp(MyApp()); List<String> cityNames = [ '北京', '上海', '广东', '深圳', '南京', '合肥', '武汉', '拉萨', '天津', '沈阳' ]; class MyApp extends StatefulWidget { MyApp({Key key}) : super(key: key); @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { ScrollController _scrollController = ScrollController(); final title = "高级功能列表下拉刷新与上拉加载"; @override void initState() { //监听滚动,当滚动距离等于最大滚动距离,即触发上拉加载方法 _scrollController.addListener(() { if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) { _loadData(); } }); super.initState(); } @override void dispose() { _scrollController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: Text(title), ), body: RefreshIndicator( child: ListView( controller: _scrollController, children: _buildList(), ), onRefresh: _handleRefresh), ), ); } //加载数据方法,用延迟来模拟请求数据 _loadData() async { await Future.delayed(Duration(milliseconds: 200)); setState(() { //复制数组 List<String> list = List<String>.from(cityNames); list.addAll(cityNames); cityNames = list; }); } 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(city) { return Container( height: 80, margin: EdgeInsets.only(bottom: 5), alignment: Alignment.center, decoration: BoxDecoration(color: Colors.amber), child: Text( city, style: TextStyle(color: Colors.white, fontSize: 20), ), ); } }
Flutter实现上拉加载下拉刷新
Flutter通过ListView的controller属性配合ScrollController实现上拉加载,通过RefreshIndicator的onRefresh方法,实现下拉刷新。下面的代码通过: