Flutter多下拉刷新插件multi_pull的使用

multi_pull #

“multi pull” 是 RefreshIndicator 的扩展！

如果您喜欢这个插件，请给它点个星！🌟

无需多言，先看看效果吧！#

一个自定义 multi_pull 示例#

什么是 MultiPull？#

RefreshIndicator 主要用于滚动和重新加载，而 MultiPull 是其扩展，允许用户在滚动时根据出现的 widget 选择操作。虽然我在 appBar 中放置了操作项，但希望用户能更方便地访问它们。如果您的 appBar 中已有操作项，但希望使其更易用，可以将其放入 MultiPull 中，用户只需滚动即可访问！

所以简单来说，让我们直接看效果！

如何安装#

dependencies:
  multi_pull: 1.1.0

开始使用#

MultiPull 的使用方式与 RefreshIndicator 类似。它通过将 Scrollable Widget（如 ListView）作为子组件来工作。然后将操作项放置在 actionWidgets 中，并包装在 ActionWidget 中以在拖动时显示为选项。别忘了设置 action 或 onRefresh 来定义当用户选择操作时会发生什么。

import 'package:multi_pull/multi_pull.dart';

// 示例代码省略其他部分...

Scaffold(
  appBar: AppBar(
    title: Text("Second Page"),
  ),
  body: MultiPull(
    circleMoveDuration: Duration(milliseconds: 400), // 设置圆形动画的持续时间
    circleMoveCurve: Curves.easeInOut, // 设置圆形动画的曲线
    circleIndicator: DefaultCircle( // 设置圆形指示器的样式
      circleColor: Colors.grey,
      circleOpacity: 0.2,
    ),
    pullIndicators: [ // 定义多个下拉选项
      DefaultPullIndicator(
        icon: Icon(Icons.arrow_back_ios_outlined), // 左箭头图标
        label: Text("back"), // 文本标签
        onPull: () => Navigator.pop(context), // 点击后返回上一页
      ),
      DefaultPullIndicator(
        icon: Icon(Icons.refresh_rounded), // 刷新图标
        onPull: () async => await Future.delayed(Duration(seconds: 2)), // 模拟异步操作
      ),
      DefaultPullIndicator(
        icon: Icon(Icons.backspace_outlined), // 清除图标
        label: Text("clear", style: TextStyle(color: Colors.redAccent)), // 文本标签
        onPull: () { // 清空文本框内容
          _firstTextController.clear();
          _secondTextController.clear();
          _thirdTextController.clear();
        },
      ),
    ],
    child: ListView( // 下拉刷新的内容
      physics: AlwaysScrollableScrollPhysics(),
      children: [
        TextField(
          controller: _firstTextController,
        ),
        TextField(
          controller: _secondTextController,
        ),
        TextField(
          controller: _thirdTextController,
        ),
      ],
    ),
  ),
);

action 和 onRefresh 的区别很简单：如果需要执行异步处理，只需使用 onRefresh。实际上，action 也可以进行异步处理，但 onRefresh 会显示一个 RefreshIndicator 来表明正在执行异步操作。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 multi_pull 插件：

import 'dart:async';

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('简单下拉刷新页面'),
              onPressed: () =>
                  Navigator.push(context, MaterialPageRoute(builder: (context) => SimplePage())),
            ),
            ElevatedButton(
              child: Text('带标签的下拉刷新页面'),
              onPressed: () =>
                  Navigator.push(context, MaterialPageRoute(builder: (context) => LabelPage())),
            ),
          ],
        ),
      ),
    );
  }
}

class SimplePage extends StatefulWidget {
  SimplePage({Key? key}) : super(key: key);

  [@override](/user/override)
  SimplePageState createState() => SimplePageState();
}

class SimplePageState extends State<SimplePage> {
  final _firstTextController = TextEditingController();
  final _secondTextController = TextEditingController();
  final _thirdTextController = TextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
    _firstTextController.text = "Hello";
    _secondTextController.text = "multi pull actions";
    _thirdTextController.text = "airy-swift";
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: MultiPull(
        circleMoveDuration: Duration(milliseconds: 400),
        circleMoveCurve: Curves.easeInOut,
        circleIndicator: DefaultCircle(
          circleColor: Colors.grey,
          circleOpacity: 0.2,
        ),
        pullIndicators: [
          DefaultPullIndicator(
            icon: Icon(Icons.arrow_back_ios_outlined),
            label: Text("back"),
            onPull: () => Navigator.pop(context),
          ),
          DefaultPullIndicator(
            icon: Icon(Icons.refresh_rounded),
            onPull: () async => await Future.delayed(Duration(seconds: 2)),
          ),
          DefaultPullIndicator(
            icon: Icon(Icons.backspace_outlined),
            label: Text("clear", style: TextStyle(color: Colors.redAccent)),
            onPull: () {
              _firstTextController.clear();
              _secondTextController.clear();
              _thirdTextController.clear();
            },
          ),
        ],
        child: ListView(
          physics: AlwaysScrollableScrollPhysics(),
          children: [
            TextField(
              controller: _firstTextController,
            ),
            TextField(
              controller: _secondTextController,
            ),
            TextField(
              controller: _thirdTextController,
            ),
          ],
        ),
      ),
    );
  }
}

class LabelPage extends StatelessWidget {
  const LabelPage();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: MultiPull(
        circleMoveDuration: Duration(milliseconds: 400),
        circleMoveCurve: Curves.easeInOut,
        circleIndicator: ArrowIndicator(),
        pullIndicators: [
          LabelPullIndicator(
            label: "Back",
            onPull: () => Navigator.pop(context),
          ),
          LabelPullIndicator(
            label: "Refresh",
            onPull: () async => await Future.delayed(Duration(seconds: 2)),
          ),
        ],
        child: ListView(
          physics: AlwaysScrollableScrollPhysics(),
          children: [
            Center(child: Text("")),
          ],
        ),
      ),
    );
  }
}