Flutter Widget 之GestureDetector

你有没有想过Flutter如何知道，用户何时点击你UI中的某个地方？

也许是因为您需要某个区域可以点击，但它不完全是一个按钮

GestureDetector可让您跟踪各种用户交互。

首先，将UI的一部分包装在GestureDetector中，并开始考虑您期望的交互

GestureDetector(
    child: YourWidget()
)

GestureDetector需要大量回调来涵盖您的用户可能执行的所有操作，但您不必全部定义它们,甚至不必全部了解它们

GestureDetector(
    onTapUp: (details) {},
    child: YourWidget(),
)

• onTapUp: (details) {}
• onTapCancel: (){}
• onSecondaryTap: (){}
• onSecondaryTapDown: (details) {}
• onSecondaryTapUp: (details) {}
• onSecondaryTapCancel: () {}
• onTertiaryTapDown: (details) {}
• onTertiaryTapUp: (details) {}
• onTertiaryTapCancel: () {}
• onDoubleTapDown: (details) {}
• onDoubleTap: () {}
• onDoubleTapCancel: () {}
• onLongPressDown: (details) {}
• onLongPressCancel: () {}
• onLongPress: () {}
• onLongPresStart: (details) {}
• onLongPressMoveUpdate: (details) {}
• onLongPreUp: (details) {}
• onLongPressEnd: (details) {}
• onSecondaryLongPressDown: (details) {}
• onSecondaryLongPressCancel: () {}
• onSecondaryLongPress: () {}
• onSecondaryLongPressStart: (details) {}
• onSecondaryLongPressMoveUpdate: (details) {}
• onSecondaryLongPressUp: (details) {}
• onSecondaryLongPressEnd: (details) {}
• onTertiaryLongPressDown: (details) {}
• onTertiaryLongPressCancel: () {}
• onTertiaryLongPress: () {}
• onTertiaryLongPressStart: (details) {}
• onTertiaryLongPresssMoveUpdate: (details) {}
• onTertiaryLongPressUp: (details) {}
• onTertiaryLongPressEnd: (details) {}
• onVerticalDragDown: (details) {}
• onVerticalDragStart: (details) {}
• onVerticalDragUpdate: (details) {}
• onVerticalDragEnd: (details) {}
• onHorizontalDragStart: (details) {}
• onHorizontalDragUpdate: (details) {}
• onHorizontalDragEnd: (details) {}
• onHorizontalDragCancel: () {}
• onForcePressStart: (details) {}
• onForcePressPeak: (details) {}
• onForcePressUpdate: (details) {}
• onForcePressEnd: (details) {}
• onPanDown: (details) {}
• onPanStart: (details) {}
• onPanEnd: (details) {}
• onPanCancel: () {}
• onScaleStart: (details) {}
• onScaleUpdate: (details) {}
• onScaleEnd: (details) {}
• onTap: () {}

要重建新创建饿类似按钮的行为，请为onTap添加回调

GestureDetector(
    onTapUp: () => print(I. was tapped!'),
    child: YourWidget(),
)

如果你想知道，嘿，这师傅哦有助于我的Web和桌面用户用世俗和表单击？然后放轻松，GestureDetector知道您的意思，onTap已准备好捕获单击或点击

但是您可以使用GestureDetector做很多事情，例如，将GestureDetector包装的小部件放置在Stack的定位小部件中，然后，使用onPanUpdate使您自己的可拖动

Stack(
    children: <Widget>[
        Positioned(
            top: _top,
            lefe: _left,
            child: GestureDetector(
                onPanUpdate: (details) {
                    _top = max(0, _top + details.delta.dy);
                    _left = max(0, _left + details.delta.dx);
                    setState(() {});
                },
                child: YourWidget(),
            ),
        ),
    ]
)

GestureDetector非常灵活，它可以观看点击、双击、长按、滑动、拖动，甚至捏合或缩放。 所以下次当你需要一些可交互的东西，而按钮不起作用时，请使用GestureDetector

如果想了解有关GestureDetector 的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址