Flutter下拉刷新及小部件刷新插件small_refresh的使用

Flutter下拉刷新及小部件刷新插件small_refresh的使用

在Flutter中，实现下拉刷新和上拉加载更多功能通常需要借助一些第三方库。small_refresh插件就是一个简单易用的选择。本文将详细介绍如何使用small_refresh插件来实现下拉刷新和上拉加载更多功能。

1. 引入依赖

首先，在你的pubspec.yaml文件中添加small_refresh插件依赖：

dependencies:
  flutter:
    sdk: flutter
  small_refresh: ^x.x.x  # 替换为最新版本号

然后运行flutter pub get以安装依赖。

2. 创建控制器

在使用small_refresh之前，需要创建一个SmallRefreshController实例，该实例用于控制刷新和加载状态。

import 'package:small_refresh/small_refresh.dart';

final SmallRefreshController _refreshController = SmallRefreshController();

3. 初始化数据

定义一个列表来存储数据，并初始化数据数量。

int _dataCount = 0;
List dataList = List.from({"1", "2", "3", "4", "5", "6", "7", "8", "9", "10"});

4. 构建刷新视图

接下来，构建一个包含下拉刷新和上拉加载功能的视图。

class _MyHomePageState extends State<MyHomePage> {
  final SmallRefreshController _refreshController = SmallRefreshController();

  int _dataCount = 0;
  List dataList = List.from({"1", "2", "3", "4", "5", "6", "7", "8", "9", "10"});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildRefresh(),
    );
  }

  /// 构建刷新视图
  Widget _buildRefresh() {
    return SmallRefresh(
      topPadding: 0,
      bottomPadding: 0,
      firstRefresh: true,
      controller: _refreshController,
      header: DefaultSmallRefreshHeader(
        controller: _refreshController,
      ),
      footer: DefaultSmallRefreshFooter(
        controller: _refreshController,
      ),
      slivers: _buildSliver(),
      onRefresh: () async {
        _refreshController.showFooter();
        await Future.delayed(const Duration(milliseconds: 2000));
        dataList.clear();
        _dataCount = 0;
        for (int s = 0; s < 10; s++) {
          _dataCount++;
          dataList.add(_dataCount.toString());
        }
        if (mounted) {
          setState(() {});
        }
      },
      onLoad: () async {
        await Future.delayed(const Duration(milliseconds: 2000));
        if (dataList.length < 30) {
          for (int s = 0; s < 10; s++) {
            _dataCount++;
            dataList.add(_dataCount.toString());
          }
        } else {
          /// 没有更多数据，停止加载
          _refreshController.stopLoad();
          _refreshController.hideFooter();
        }
        if (mounted) {
          setState(() {});
        }
      },
    );
  }

  /// 构建sliver
  List<Widget> _buildSliver() {
    return dataList.map((e) {
      return SliverToBoxAdapter(
        child: Container(
          height: 80,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                color: Colors.grey,
                width: 1 / MediaQuery.devicePixelRatioOf(context),
              ),
            ),
          ),
          child: Text(
            e,
            style: const TextStyle(fontSize: 15, color: Colors.black54),
          ),
        ),
      );
    }).toList();
  }
}

更多关于Flutter下拉刷新及小部件刷新插件small_refresh的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter下拉刷新及小部件刷新插件small_refresh的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用small_refresh插件来实现下拉刷新功能的代码示例。small_refresh是一个流行的刷新插件，它提供了简洁且强大的下拉刷新和上拉加载功能。

首先，确保你的pubspec.yaml文件中已经添加了small_refresh依赖：

dependencies:
  flutter:
    sdk: flutter
  small_refresh: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

接下来是一个完整的示例代码，展示了如何使用small_refresh来实现下拉刷新：

import 'package:flutter/material.dart';
import 'package:small_refresh/small_refresh.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Small Refresh Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final RefreshController _refreshController = RefreshController();
  List<String> _data = List.generate(20, (index) => "Item $index");

  @override
  void initState() {
    super.initState();
    // 监听刷新状态
    _refreshController.addListener(() {
      if (_refreshController.refreshStatus == RefreshStatus.idle) {
        // 刷新完成
      }
    });
  }

  @override
  void dispose() {
    _refreshController.dispose();
    super.dispose();
  }

  Future<void> _onRefresh() async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _data = List.generate(20, (index) => "Refreshed Item $index");
    });
    // 结束刷新
    _refreshController.refreshCompleted();
  }

  Future<void> _onLoadMore() async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      int start = _data.length;
      _data.addAll(List.generate(10, (index) => "Loaded Item ${start + index}"));
    });
    // 结束加载更多
    _refreshController.loadComplete();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Small Refresh Example'),
      ),
      body: SmartRefresher(
        controller: _refreshController,
        enablePullDown: true,
        enablePullUp: true,
        header: WaterDropHeader(), // 下拉刷新头部
        footer: ClassicsFooter(), // 上拉加载更多尾部
        onRefresh: _onRefresh,
        onLoadMore: _onLoadMore,
        child: ListView.builder(
          itemCount: _data.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_data[index]),
            );
          },
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，它包含一个SmartRefresher小部件，该小部件使用WaterDropHeader作为下拉刷新头部，并使用ClassicsFooter作为上拉加载更多尾部。_onRefresh方法用于处理下拉刷新逻辑，而_onLoadMore方法用于处理上拉加载更多逻辑。

注意：

  • RefreshController用于控制刷新状态。
  • WaterDropHeader和ClassicsFooter是small_refresh插件提供的默认头部和尾部组件，你可以根据需要自定义这些组件。
  • ListView.builder用于构建列表项，并根据数据动态更新列表。

希望这个示例能帮助你理解如何在Flutter中使用small_refresh插件来实现下拉刷新功能。

回到顶部