当前位置：首页 > article >正文

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

article 2024/11/6 7:59:51

方式一：RefreshIndicator+ListView实现

import 'package:flutter/material.dart';

class SimpleRefreshDemoPage extends StatefulWidget {
  const SimpleRefreshDemoPage({super.key});

  @override
  State<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(() {});
  }

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        loadMore();
      }
    });

    Future.delayed(const Duration(seconds: 0), () {
      refreshKey.currentState?.show();
    });
  }

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

  @override
  Widget 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.提高代码的稳健性：

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

 @override
  void 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`，从而避免可能的异常。