Flutter下拉刷新上拉加载的简单实现方式一

方式一：RefreshIndicator+ListView实现

import 'package:flutter/material.dart';class SimpleRefreshDemoPage extends StatefulWidget {const SimpleRefreshDemoPage({super.key});@overrideState<StatefulWidget> createState() {return _SimpleRefreshDemoPage();}
}class _SimpleRefreshDemoPage extends State<SimpleRefreshDemoPage> {final int pageSize = 50;bool disposed = false;List<String> dataList = [];final ScrollController _scrollController = ScrollController();final GlobalKey<RefreshIndicatorState> refreshKey = GlobalKey();Future<void> onRefresh() async {await Future.delayed(const Duration(seconds: 4));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: 4));for (int i = 0; i < pageSize; i++) {dataList.add("loadmore");}if (disposed) {return;}setState(() {});}@overridevoid initState() {super.initState();_scrollController.addListener(() {if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent) {loadMore();}});Future.delayed(const Duration(seconds: 0), () {refreshKey.currentState?.show();});}@overridevoid dispose() {disposed = true;super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("SimpleRefreshDemoPage"),),body: RefreshIndicator(key: refreshKey,onRefresh: onRefresh,child: ListView.builder(physics: const AlwaysScrollableScrollPhysics(),itemBuilder: (context, 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"),),);},itemCount: (dataList.length >= pageSize)? dataList.length + 1: dataList.length,controller: _scrollController,),),);}
}

如何实现下拉刷新

RefreshIndicator

RefreshIndicator 是 Flutter 中用于实现下拉刷新功能的一个组件。RefreshIndicator 包裹一个可滚动的子组件，如 `ListView` 或 `GridView`，当用户下拉到列表顶部时，会触发刷新操作。上面的例子中RefreshIndicator包裹在了ListView。

`onRefresh` 是一个返回 `Future` 的异步函数，用于执行刷新操作。

关键属性

onRefresh`: 必须实现的回调函数，定义刷新时的操作。
`child`: 需要包裹的可滚动子组件。
`color`: 刷新指示器的进度条颜色。
`backgroundColor`: 刷新指示器的背景色。
`displacement`: 指示器开始显示时与顶部的距离。

如何实现下拉加载

ScrollController

   _scrollController.addListener(() {if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent) {loadMore();}});

如何检测用户是否滚动到了 `ScrollView` 的底部?

_scrollController.position.pixels ==_scrollController.position.maxScrollExtent

_scrollController.position.pixels` ：表示当前滚动的位置。

`_scrollController.position.maxScrollExtent` ：表示可滚动区域的最大值。

上面两个值相等时，说明用户已经滚动到了底部。

`bool disposed` 字段作用

在上面的代码中，`bool disposed` 字段用于指示 `State` 对象是否已经被销毁。当 `dispose` 方法被调用时，`disposed` 被设置为 `true`。这个字段主要用于在异步操作完成后，确保不会调用已经被销毁的 `State` 对象的 `setState` 方法。

作用分析

1.防止在销毁后调用 `setState`：

异步操作（如 `Future.delayed`）在完成后，可能会尝试调用 `setState` 来更新 UI。然而，如果在异步操作执行期间，用户已经导航离开了当前页面，导致 `State` 对象被销毁，那么调用 `setState` 就会抛出异常，因为 `State` 已经不再是活动的。

通过检查 `disposed` 字段，可以在调用 `setState` 前确认 `State` 是否仍然有效，从而避免在组件销毁后对其进行不必要的更新。

2.提高代码的稳健性：

这种模式是一种防御性编程的方法，确保应用程序在面对不确定的异步执行时仍然是稳定的。

 @overridevoid dispose() {disposed = true;super.dispose();}

  Future<void> onRefresh() async {await Future.delayed(const Duration(seconds: 4));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: 4));for (int i = 0; i < pageSize; i++) {dataList.add("loadmore");}if (disposed) {return;}setState(() {});}

在 `onRefresh` 和 `loadMore` 方法中，`disposed` 被用来检查 `State` 是否已经被销毁。如果 `disposed` 为 `true`，则不再调用 `setState`，从而避免可能的异常。