一个简单的Flutter应用程序,展示了如何实现下拉刷新和上拉加载更多的功能。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyRefreshDemoPage extends StatefulWidget {
const MyRefreshDemoPage({super.key});
@override
MyRefreshDemoPageState createState() => MyRefreshDemoPageState();
}
class MyRefreshDemoPageState extends State<MyRefreshDemoPage> {
final int pageSize = 30;
bool disposed = false;
List<String> dataList = [];
final ScrollController _scrollController = ScrollController();
Future<void> onRefresh() async {
await Future.delayed(const Duration(seconds: 2));
dataList.clear();
for (int i = 0; i < pageSize; i++) {
dataList.add("refresh");
}
if (disposed) {
return;
}
setState(() {});
}
Future<void> loadMore() async {
await Future.delayed(const Duration(seconds: 2));
for (int i = 0; i < pageSize; i++) {
dataList.add("loadmore");
}
if (disposed) {
return;
}
setState(() {});
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
Future.delayed(const Duration(milliseconds: 500), () {
_scrollController.animateTo(-150,
duration: const Duration(milliseconds: 600), curve: Curves.linear);
return true;
});
}
@override
void dispose() {
disposed = true;
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("MyRefreshDemoPage"),
),
body: NotificationListener(
onNotification: (ScrollNotification notification) {
//判断是否满足触发加载更多的条件
if (notification is ScrollEndNotification) {
if (_scrollController.position.pixels > 0 &&
_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
loadMore();
}
}
return false;
},
child: CustomScrollView(
controller: _scrollController,
//回弹效果
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
slivers: <Widget>[
//控制显示刷新的CupertinoSliverRefreshControl
CupertinoSliverRefreshControl(
refreshIndicatorExtent: 100,
refreshTriggerPullDistance: 140,
onRefresh: onRefresh,
),
SliverSafeArea(
sliver: SliverList(
//代理显示
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
if (index == dataList.length) {
return Container(
margin: const EdgeInsets.all(10),
child: const Align(
child: CircularProgressIndicator(),
),
);
}
return Card(
child: Container(
height: 60,
alignment: Alignment.centerLeft,
child: Text("Item ${dataList[index]} $index"),
),
);
},
childCount: (dataList.length >= pageSize)
? dataList.length + 1
: dataList.length,