在Flutter中，如何添加FloatingActionButton的长按监听器？

Question

我的应用程序中，我需要在长按FloatingActionButton时执行第二个操作。

floatingActionButton: FloatingActionButton(
  onPressed: someFunction,
  child: Icon(Icons.add),
  onLongPressed: //Something like this or any other solution
),

- MubarakZade

Answer 1

我建议使用InkWell，这样您还可以拥有涟漪效果。

这是如何使用它。

floatingActionButton: InkWell(
  splashColor: Colors.blue,
  onLongPress: () {
    // handle your long press functionality here
  },
  child: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: someFunction,
  ),
)

- CopsOnRoad

---

谢谢@CopsOnRoad。这看起来很简单，为我找到了下面发布的那个。唯一的区别是你的解决方案展示了正方形形状的涟漪效果，而不是FAB圆形的。谢谢！ - MubarakZade

@MubarakZade 谢谢，你可以将 InkWell 包裹在 ClipOval 中以达到这个效果。 - CopsOnRoad

Answer 2

您可以创建自己的LongPressFloatingActionButton，因为StatefullWidget已经有了这个选项。

请参见: Flutter - 我想通过onLongPress选择卡片？ Api: https://api.flutter.dev/flutter/flutter_test/WidgetController/longPress.html 在包装FloatingActionButton的新CustomStatefullWidget的状态内部，您可以像这样使用它：

class CustomWidget extends StatefulWidget {
  final int index;
  final bool longPressEnabled;
  final VoidCallback callback;

  const CustomWidget({Key key, this.index, this.longPressEnabled, this.callback}) : super(key: key);

  @override
  _CustomWidgetState createState() => new _CustomWidgetState();
}

class _CustomWidgetState extends State<CustomWidget> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onLongPress: () {
        setState(() {
          selected = !selected;
        });
        widget.callback();
      },

- Roger Gusmao

---

谢谢你的回答 :) - MubarakZade

Answer 3

GestureDetector中存在一个可以与onLongPress手势一起使用的方法。但是FloatingActionButton没有类似的直接解决方案。

但是如果你想要使用FloatingActionButton而不仅仅是GestureDetector，那么你可以将FAB嵌套在GestureDetector中，像这样轻松实现相同的结果：

GestureDetector(
  onLongPress: () {
    print("Long press made");
  },
  child: FloatingActionButton(
    child: Text("FAB"),
    onPressed: () {},
  ),
)

你可以在Flutter官方文档这里了解更多关于onLongPress的内容。

- Casey Schneider

---

我喜欢这个解决方案。它比InkWell更直观，因为GestureDetector的存在是为了检测手势 :) 我唯一能看到的区别是，InkWell（不使用splashColor）默认情况下会给您提供触觉反馈。 - Grzegorz D.

Answer 4

基于我得到的解决方案，我创建了自己的解决方案，似乎也具有所需的涟漪效果。谢谢大家。

    floatingActionButton: FloatingActionButton(
       onPressed: normalPressAction,
       child: GestureDetector(
       child: Icon(Icons.add),
          onLongPress: longPressAction,
          ),
    ),

- MubarakZade

---

但这不会限制手势检测仅针对图标而非整个按钮吗？我认为上述解决方案以稍微更好的方式实现了期望的结果。 - DaniyalAhmadSE

这是唯一一个对我有效的。 - Matt H