如何防止 Flutter Inkwell 上的多次触摸答案

【问题标题】：How to prevent multiple touch on Flutter Inkwell如何防止 Flutter Inkwell 上的多次触摸
【发布时间】：2019-08-09 15:30:16
【问题描述】：

我是 Flutter 的新手，我有一个计数器按钮，我想防止它被多次触摸。

Tap 函数在Inkwell 组件（onTap: () => counterBloc.doCount(context)）下定义。

如果我运行这个应用程序并进行多点触控，计数器会快速上升，但我不希望它发生。有什么想法吗？

下面是我的代码：

  Expanded(
  child: Container(
    padding: EdgeInsets.only(right: 16),
    alignment: Alignment.centerRight,
    child: InkWell(
      onTap: () => counterBloc.doCount(context),
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Image.asset("assets/images/home/tap.png", scale: 11,),
          StreamBuilder(
            initialData: 0,
            stream: counterBloc.counterStream,
            builder: (BuildContext ctx, AsyncSnapshot<int> snapshot){
              return Text("${snapshot.data}",style: TextStyle(color: Colors.white, fontSize: 120),);
            },
          ),
        ],
      )
    )
  )
)

【问题讨论】：

标签： dart flutter touch hybrid-mobile-app

【解决方案1】：

您可以使用AbsorbPointer

AbsorbPointer(
  absorbing: !enabled,
  child: InkWell(
    onTap: (){
      print('buttonClicked');
      setState(() {
        enabled = false;
      });
    },
    child: Container(
      width: 50.0,
      height: 50.0,
      color: Colors.red,
    ),
  ),
),

当你想再次启用按钮时，将enabled设置为true，不要忘记用setState包装它

【讨论】：

【解决方案2】：

试试这个？它应该可以解决您的问题。

class SafeOnTap extends StatefulWidget {
  SafeOnTap({
    Key? key,
    required this.child,
    required this.onSafeTap,
    this.intervalMs = 500,
  }) : super(key: key);
  final Widget child;
  final GestureTapCallback onSafeTap;
  final int intervalMs;

  @override
  _SafeOnTapState createState() => _SafeOnTapState();
}

class _SafeOnTapState extends State<SafeOnTap> {
  int lastTimeClicked = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        final now = DateTime.now().millisecondsSinceEpoch;
        if (now - lastTimeClicked < widget.intervalMs) {
          return;
        }
        lastTimeClicked = now;
        widget.onSafeTap();
      },
      child: widget.child,
    );
  }
}

您可以根据需要包装任何类型的小部件。

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

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              // every click need to wait for 500ms
              SafeOnTap(
                onSafeTap: () => log('500ms'),
                child: Container(
                  width: double.infinity,
                  height: 200,
                  child: Center(child: Text('500ms click me')),
                ),
              ),
              // every click need to wait for 2000ms
              SafeOnTap(
                intervalMs: 2000,
                onSafeTap: () => log('2000ms'),
                child: Container(
                  width: double.infinity,
                  height: 200,
                  child: Center(child: Text('2000ms click me')),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：

【解决方案3】：

另一种选择是使用去抖动来防止这种行为，即使用easy_debounce或implementing your own debounce。

【讨论】：

【解决方案4】：

你也可以使用IgnorePointer

IgnorePointer(
ignoring: !isEnabled
child: yourChildWidget
)

当你禁用组件时，它开始忽略小部件边界内的触摸。

【讨论】：