Flutter长按手势识别插件holding_gesture的使用

holding_gesture简介

holding_gesture 是一个自定义的手势检测器，它可以在用户长按指定的小部件时触发特定的行为。该插件提供了两个主要的小部件：HoldDetector 和 HoldTimeoutDetector，用于实现不同的长按交互逻辑。

引入依赖

在使用 holding_gesture 插件之前，你需要先将其添加到你的项目中。打开项目的 pubspec.yaml 文件，在 dependencies 部分添加以下内容：

dependencies:
  holding_gesture: ^最新版本号

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

接下来，在 Dart 文件中导入包：

import 'package:holding_gesture/holding_gesture.dart';

HoldDetector 使用示例

HoldDetector 是一个类似于 Flutter 自带的 GestureDetector 的小部件，但它专门用于处理长按事件。你可以像使用 GestureDetector 一样使用它。需要注意的是，如果子组件中有 onPressed 或类似的回调函数，则 HoldDetector 的 onTap 回调将不会生效，因此你应该将单击行为传递给子组件。

HoldDetector(
  onHold: _incrementCounter, // 长按时触发的方法
  holdTimeout: Duration(milliseconds: 200), // 触发长按事件的时间间隔
  enableHapticFeedback: true, // 是否启用触觉反馈
  child: ElevatedButton(
    onPressed: _incrementCounter, // 单击时触发的方法
    child: Text("onHold"),
  ),
),

HoldTimeoutDetector 使用示例

HoldTimeoutDetector 提供了更复杂的功能。它可以用于在用户长按一段时间后执行某些操作，或者在长按过程中显示一些提示信息。下面是一个例子，展示了如何使用 HoldTimeoutDetector 来显示加载状态，并在超时后增加计数器。

HoldTimeoutDetector(
  onTimeout: () {
    _incrementCounter();
    _updateLoading(false);
  }, // 当长按超过设定时间后触发的方法
  onTimerInitiated: () => _updateLoading(true), // 当开始计时时触发的方法
  onCancel: () => _updateLoading(false), // 当长按被取消时触发的方法
  holdTimeout: Duration(milliseconds: 3000), // 设置超时时间为3秒
  enableHapticFeedback: true,
  child: ElevatedButton.icon(
    onPressed: () {},
    label: Text("onTimeout"),
    icon: _isLoading
        ? SizedBox(
            width: 16,
            height: 16,
            child: CircularProgressIndicator(
              strokeWidth: 2,
              valueColor: AlwaysStoppedAnimation(Colors.white),
            ),
          )
        : Icon(Icons.timer_3),
  ),
),

完整的示例代码

为了更好地理解 holding_gesture 插件的用法，这里给出一个完整的示例代码。这个例子创建了一个简单的应用程序，其中包含两个按钮，一个用于测试 HoldDetector，另一个用于测试 HoldTimeoutDetector。

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _counter = 0;
  bool _isLoading = false;

  void _incrementCounter() {
    if (mounted) {
      setState(() {
        _counter += 1;
      });
    }
  }

  void _updateLoading(bool value) {
    if (mounted) {
      setState(() {
        _isLoading = value;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('holding_gesture'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed (or held) the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
        bottomNavigationBar: _isLoading ? LinearProgressIndicator() : null,
        persistentFooterButtons: [
          HoldDetector(
            onHold: _incrementCounter,
            holdTimeout: Duration(milliseconds: 200),
            enableHapticFeedback: true,
            child: ElevatedButton(
              onPressed: _incrementCounter,
              child: Text("onHold"),
            ),
          ),
          HoldTimeoutDetector(
            onTimeout: () {
              _incrementCounter();
              _updateLoading(false);
            },
            onTimerInitiated: () => _updateLoading(true),
            onCancel: () => _updateLoading(false),
            holdTimeout: Duration(milliseconds: 3000),
            enableHapticFeedback: true,
            child: ElevatedButton.icon(
              onPressed: () {},
              label: Text("onTimeout"),
              icon: _isLoading
                  ? SizedBox(
                      width: 16,
                      height: 16,
                      child: CircularProgressIndicator(
                        strokeWidth: 2,
                        valueColor: AlwaysStoppedAnimation(Colors.white),
                      ),
                    )
                  : Icon(Icons.timer_3),
            ),
          ),
        ],
      ),
    );
  }
}

通过上述代码，您可以体验 holding_gesture 插件提供的两种不同类型的长按手势检测功能。希望这对您有所帮助！