Flutter 实现下拉刷新与上拉加载，轻松打造流畅交互体验

2023-11-18 07:24:12

概述

Flutter 是一个开源的移动应用程序开发框架，用于创建具有原生外观和感觉的应用程序。Flutter 应用程序使用 Dart 语言编写，并且可以使用相同的代码库同时在 iOS 和 Android 平台上运行。

Flutter 中的下拉刷新和上拉加载功能允许用户在应用程序中向下或向上滚动时刷新数据。这对于允许用户查看新数据或加载更多数据非常有用。

实现下拉刷新

要在 Flutter 中实现下拉刷新，可以使用 RefreshIndicator 组件。RefreshIndicator 组件是一个可滚动组件，它包含一个子组件。当用户向下滚动子组件时，RefreshIndicator 组件会显示一个刷新指示器。当刷新指示器完全显示时，RefreshIndicator 组件会调用一个回调函数。

以下是如何在 Flutter 中实现下拉刷新的示例代码：

import 'package:flutter/material.dart';

class PullToRefreshPage extends StatefulWidget {
  @override
  _PullToRefreshPageState createState() => _PullToRefreshPageState();
}

class _PullToRefreshPageState extends State<PullToRefreshPage> {
  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
      GlobalKey<RefreshIndicatorState>();

  Future<void> _refresh() async {
    await Future.delayed(Duration(seconds: 2));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pull to Refresh'),
      ),
      body: RefreshIndicator(
        key: _refreshIndicatorKey,
        onRefresh: _refresh,
        child: ListView.builder(
          itemCount: 20,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }
}

在上面的代码中，RefreshIndicator 组件包含一个 ListView 组件。当用户向下滚动 ListView 时，RefreshIndicator 组件会显示一个刷新指示器。当刷新指示器完全显示时，RefreshIndicator 组件会调用 _refresh() 方法。_refresh() 方法是一个异步方法，它会在两秒后完成。当 _refresh() 方法完成时，RefreshIndicator 组件会隐藏刷新指示器，并且 ListView 会重新加载。

实现上拉加载

要在 Flutter 中实现上拉加载，可以使用 CustomScrollView 组件。CustomScrollView 组件是一个可滚动组件，它可以包含多个子组件。当用户向上滚动 CustomScrollView 时，CustomScrollView 组件会显示一个加载更多指示器。当加载更多指示器完全显示时，CustomScrollView 组件会调用一个回调函数。

以下是如何在 Flutter 中实现上拉加载的示例代码：

import 'package:flutter/material.dart';

class PullToRefreshPage extends StatefulWidget {
  @override
  _PullToRefreshPageState createState() => _PullToRefreshPageState();
}

class _PullToRefreshPageState extends State<PullToRefreshPage> {
  final ScrollController _scrollController = ScrollController();

  bool _isLoading = false;

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

  Future<void> _loadMore() async {
    setState(() {
      _isLoading = true;
    });
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pull to Refresh'),
      ),
      body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
              childCount: 20,
            ),
          ),
          SliverToBoxAdapter(
            child: _isLoading
                ? Center(
                    child: CircularProgressIndicator(),
                  )
                : SizedBox(),
          ),
        ],
      ),
    );
  }
}

在上面的代码中，CustomScrollView 组件包含一个 SliverList 组件和一个 SliverToBoxAdapter 组件。SliverList 组件包含一个 ListView 组件，其中包含 20 个项目。SliverToBoxAdapter 组件包含一个 CircularProgressIndicator 组件，它会在加载更多数据时显示。

当用户向上滚动 CustomScrollView 时，_scrollController 会监听滚动事件。当用户滚动到列表的底部时，_loadMore() 方法会被调用。_loadMore() 方法是一个异步方法，它会在两秒后完成。当 _loadMore() 方法完成时，_isLoading 会被设置为 false，并且 CircularProgressIndicator 会被隐藏。