Flutter单次点击检测插件single

Flutter单次点击检测插件single_tap的使用

标题

Flutter单次点击检测插件single_tap的使用

内容

<h1 class="hash-header" id="single_tap">single_tap <a href="#single_tap" class="hash-link">#</a></h1>
<p>自定义按钮，支持单次点击控制</p>

<h2 class="hash-header" id="changelog">变更记录 <a href="#changelog" class="hash-link">#</a></h2>
<p>请参阅PubDev上的<a href="https://pub.dev/packages/single_tap">SingleTap</a>查看变更记录。</p>

<h2 class="hash-header" id="features">功能 <a href="#features" class="hash-link">#</a></h2>
<p>SingleTap 提供多种按钮类型以进行自定义：</p>
<ul>
<li>ElevatedButton</li>
<li>TextButton</li>
<li>IconButton</li>
<li>OutlinedButton</li>
</ul>

<h2 class="hash-header" id="changelog-2">变更记录 <a href="#changelog" class="hash-link">#</a></h2>
<p>请参阅<a href="https://gitlab.com/ekoremdev/singletap/-/blob/main/CHANGELOG.md" rel="ugc">变更记录</a>获取新功能和重大更改列表。</p>
<p>此按钮包允许我们对按钮的可点击性有更多控制。</p>

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Single Tappable Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Example Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({required this.title});

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: SingleTap(
              buttonType: ButtonType.elevatedButton,
              width: 400,
              customLoader:
                  const Text('One moment, navigating to second screen...'),
              child: const Text('Tap me now...for custom loader'),
              onPressed: (StreamSink<bool> canBePressed) async {
                // Do whatever has to be done

                Future.delayed(const Duration(milliseconds: 1750), () {
                  try {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) =&gt; const SecondScreen(),
                      ),
                    );
                  } finally {
                    canBePressed.add(true);
                  }
                });

                if (kDebugMode) {
                  print('Tapped me now...for custom loader');
                }
              },
            ),
          ),
          SizedBox(height: 20),
          Center(
            child: SingleTap(
              buttonType: ButtonType.textButton,
              width: 400,
              child: const Text('Tap me now...'),
              onPressed: (StreamSink&lt;bool&gt; canBePressed) async {
                // Do whatever has to be done

                // if you want to make tappable again
                // use this
                // canBePressed.add(true);
              },
            ),
          ),
          SizedBox(height: 20),
          Center(
            child: SingleTap(
              buttonType: ButtonType.iconButton,
              width: 40,
              icon: const Icon(Icons.ac_unit),
              onPressed: (StreamSink&lt;bool&gt; canBePressed) async {
                // Do whatever has to be done

                // if you want to make tappable again
                // use this
                // canBePressed.add(true);
              },
            ),
          ),
          SizedBox(height: 20),
          Center(
            child: SingleTap(
              buttonType: ButtonType.listItem,
              width: 40,
              child: const Icon(Icons.ac_unit),
              onPressed: (StreamSink&lt;bool&gt; canBePressed) async {
                // Do whatever has to be done

                // if you want to make tappable again
                // use this
                // canBePressed.add(true);
              },
            ),
          ),
          SizedBox(height: 20),
          Center(
            child: SingleTap(
              buttonType: ButtonType.outlinedButton,
              width: 400,
              backgroundColor: Colors.white,
              borderColor: Colors.black,
              child: const Text('ButtonType.outlinedButton'),
              onPressed: (StreamSink&lt;bool&gt; canBePressed) async {
                // Do whatever has to be done

                // if you want to make tappable again
                // use this
                // canBePressed.add(true);
              },
            ),
          ),
          SizedBox(height: 1),
          const Text('Loader disabled Examples'),
          Center(
            child: SingleTap(
              buttonType: ButtonType.elevatedButton,
              width: 400,
              isLoaderEnabled: false,
              child: const Text('Tap me now...'),
              onPressed: ( StreamSink&lt;bool&gt; canBePressed) async {
                // Do whatever has to be done

                // if you want to make tappable again
                // use this
                // canBePressed.add(true);
              },
            ),
          ),
          SizedBox(height: 20),
          Center(
            child: SingleTap(
              buttonType: ButtonType.textButton,
              width: 400,
              isLoaderEnabled: false,
              child: const Text('Tap me now...'),
              onPressed: (StreamSink&lt;bool&gt; canBePressed) async {
                // Do whatever has to be done

                // if you want to make tappable again
                // use this
                // canBePressed.add(true);
              },
            ),
          ),
          SizedBox(height:  20),
          Center(
            child: SingleTap(
              buttonType: ButtonType.iconButton,
              width: 40,
              isLoaderEnabled: false,
              icon: const Icon(Icons.ac_unit),
              onPressed: (StreamSink&lt;bool&gt; canBePressed) async {
                // Do whatever has to be done

                // if you want to make tappable again
                // use this
                // canBePressed.add(true);
              },
            ),
          ),
          SizedBox(height:  20),
          Center(
            child: SingleTap(
              buttonType: ButtonType.listItem,
              width: 40,
              isLoaderEnabled: false,
              child: const Icon(Icons.ac_unit),
              onPressed: (StreamSink&lt;bool&gt; canBePressed) async {
                // Do whatever has to be done

                // if you want to make tappable again
                // use this
                // canBePressed.add(true);
              },
            ),
          ),
          SizedBox(height:  20),
          Center(
            child: SingleTap(
              buttonType: ButtonType.outlinedButton,
              width: 400,
              backgroundColor: Colors.white,
              borderColor: Colors.black,
              isLoaderEnabled: false,
              child: const Text('ButtonType.outlinedButton'),
              onPressed: (StreamSink&lt;bool&gt; canBePressed) async {
                // Do whatever has to be done

                // if you want to make tappable again
                // use this
                // canBePressed.add(true);
              },
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter单次点击检测插件single_tap的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

bupafengyu 1楼•4 天前

更多关于Flutter单次点击检测插件single_tap的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用single_tap插件来实现单次点击检测的示例代码。single_tap插件可以帮助你防止用户在短时间内多次点击同一个按钮，从而避免触发多次操作。

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

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

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

接下来，你可以在你的Flutter项目中按照以下步骤使用single_tap：

导入single_tap包：

import 'package:single_tap/single_tap.dart';

创建一个按钮并使用SingleTapGestureRecognizer：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Single Tap Example'),
        ),
        body: Center(
          child: MySingleTapButton(),
        ),
      ),
    );
  }
}

class MySingleTapButton extends StatefulWidget {
  @override
  _MySingleTapButtonState createState() => _MySingleTapButtonState();
}

class _MySingleTapButtonState extends State<MySingleTapButton> {
  final SingleTapController _tapController = SingleTapController();

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

  void _onTap() {
    if (_tapController.isSingleTap) {
      // 在这里处理单次点击事件
      print('Button tapped once!');
    } else {
      // 处理多次点击的情况（如果需要）
      print('Button tapped too quickly!');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        _tapController.reset(); // 重置点击计数器
        _tapController.addTap(() {
          _onTap();
        });
      },
      child: Text('Tap Me'),
    );
  }
}

在这个示例中：

我们创建了一个SingleTapController实例，用于管理点击检测。
在按钮的onPressed回调中，我们首先调用_tapController.reset()来重置点击计数器，然后调用_tapController.addTap()方法将实际的点击处理逻辑包装起来。
在_onTap方法中，我们通过检查_tapController.isSingleTap来判断是否是单次点击，如果是，则执行相应的逻辑。

这样，你就可以在Flutter应用中实现单次点击检测功能了。这个示例代码展示了基本的用法，你可以根据实际需求进行调整和扩展。