Flutter 如何让一个名为ONTAP的回调函数、另一个名为onTapDown的回调函数和另一个名为onTapUp的回调函数不重叠

发布于02月21日

I have this UI: When user taps on right side we go to the next story, left we go to previous and holding down anywhere should stop the automatic loading on top. I am currently using GestureDetectors and using the three callbacks

onTap转到下一篇或上一篇文章
如果为onTapDown，则暂停加载程序
onTapUp以恢复加载器

问题是，onTap次呼叫onTapUp次，所以当我试图暂停时，例如通过按住右侧，它会在我举起手指后立即转到下一个故事.

推荐答案

Let's try the below solution, I tested it and it works quite well in your case.

下面是一个自定义的GestureDetector小部件，它允许我们设置onLongPressStart和onLongPressEnd的持续时间

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

class CustomGestureLongPress extends StatelessWidget {
  final Widget? child;
  final Duration duration;
  final GestureLongPressStartCallback onLongPressStart;
  final GestureLongPressEndCallback onLongPressEnd;
  final VoidCallback? onLongPress;

  const CustomGestureLongPress({
    super.key,
    this.child,
    required this.duration,
    required this.onLongPressStart,
    required this.onLongPressEnd,
    this.onLongPress,
  });

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      behavior: HitTestBehavior.translucent,
      gestures: <Type, GestureRecognizerFactory>{
        LongPressGestureRecognizer: GestureRecognizerFactoryWithHandlers<LongPressGestureRecognizer>(
              () => LongPressGestureRecognizer(duration: duration), (instance) {
                instance.onLongPress = () {
                  print("Parent onLongPress");
                  onLongPress?.call();
                };
                instance.onLongPressStart = (details) {
                  print("Parent onLongPressStart");
                  onLongPressStart.call(details);
                };
                instance.onLongPressEnd = (details) {
                  print("Parent onLongPressEnd");
                  onLongPressEnd.call(details);
                };
              },
        ),
      },
      child: child,
    );
  }
}`

以及自定义小部件的使用

CustomGestureLongPress(
            duration: const Duration(milliseconds: 200),
            onLongPressStart: (_) {
              //TODO Pause the loader
            },
            onLongPressEnd: (_) {
              //TODO Resume the loader
            },
            child: Stack(
                children: [
                  GestureDetector(
                    onTap: () {
                      //TODO Go to previous story
                    },
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        width: 50.w,
                        color: Colors.transparent,
                      ),
                    )
                  ),
                  GestureDetector(
                    onTap: () {
                      //TODO Go to next story
                    },
                    child: Align(
                      alignment: Alignment.centerRight,
                      child: Container(
                        width: 50.w,
                        color: Colors.transparent,
                      ),
                    )
                  )
                ]
            ),
          )