IconButton和长按检测答案

【问题标题】：IconButton and long press detectionIconButton和长按检测
【发布时间】：2021-10-18 20:42:59
【问题描述】：

请帮助我对图标按钮进行长按检测。

我正在尝试获取一个图标按钮，如果点击它会将数量值更改为 1，而在长按时更改为 10。问题是 Flutter 2.12 中没有可用于 IconButton 的长按事件处理程序。

所以我只在Container 中使用了Icon，如下所示

        GestureDetector(
          child: Container(
            child: const Icon(
              Icons.add,
            ),
            padding: EdgeInsets.symmetric(vertical: 6.0, horizontal: 18.0),
          ),
          onTap: () {
            increment(1);
          },
          onLongPressStart: (_) async {
            startPressing(() => increment(10));
          },
          onLongPressCancel: () {
            cancelPress();
          },
          onLongPressEnd: (_) {
            cancelPress();
          },
        ),

它可以工作，但问题是按压区域非常小，在移动设备上查找按压点很不舒服。

我尝试将图标大小增加到 48，但结果很糟糕，图标大得不自然

const Icon(
              Icons.add,
              size: 48,
            ),

对我来说看起来不错的设计是使用GestureDetector（用于长按）和IconButton（以及 onPressed 用于单击检测）：

        GestureDetector(
          child: IconButton(
            onPressed: () => decrement(1),
            icon: const Icon(
              Icons.remove,
            ),
            padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 18.0),
            color: Theme.of(context).primaryColor,
          ),
          onLongPressStart: (_) async {
            startPressing(() => decrement(10));
          },
          onLongPressCancel: () {
            cancelPress();
          },
          onLongPressEnd: (_) {
            cancelPress();
          },
        ),

Flutter 可以将 GestureDetector 用于 longPress 并将 IconButton 用于 onPressed 吗？我可以在某些特定的 Android 版本上遇到这样的解决方案吗？

【问题讨论】：

当您触发onPressed 时，它也会触发onLongPressEnd ，尝试添加print() 看看会发生什么
@cahyo 一切正常。我的问题是“将 IconButton 放在 GuestureDetecor 上是否安全”？
我觉得没问题。不是最优雅的，但它对我有用并且可读。

标签： android flutter

【解决方案1】：

尝试使用InkWell，它会像IconButton 一样运行并给您带来连锁反应

Material(
  child: InkWell(
    onTap: () {},
    onLongPress: () {},
    child: Ink(
      child: Icon(Icons.add),
    ),
  ),
),

【讨论】：

谢谢，但它有同样的问题 - 只有图标在点击（或长按）时做出反应。它可以用Ink (padding) 修复，但另一个问题仍然存在。 GestureDetector 允许在长敲击开始时将值增加 10，直到 onLongPressCancel 或 onLongPressEnd 。然而InkWell( onLongPress 只触发一次。

【解决方案2】：

将width 和height 设置为Container 并放入GestureDetector 并通过Icon 的填充来固定大小

     Container(
      alignment: Alignment.center,
      width: 40, 
      height: 40,
      child: GestureDetector(
        child: Padding(
         padding: EdgeInsets.symmetric(vertical: 6.0, horizontal: 18.0),
         child: Icon(
          Icons.add,
      ),),
      onTap: () {
        increment(1);
      },
      onLongPressStart: (_) async {
        startPressing(() => increment(10));
      },
      onLongPressCancel: () {
        cancelPress();
      },
      onLongPressEnd: (_) {
        cancelPress();
      },
    ),
   )

【讨论】：

如果 child: Padding( 从小部件控件层次结构中删除，这将起作用。使用 Padding() 时，onTap 和 onLongPressStart 根本不起作用
padding 是 GestureDetector 的子级，它不能禁用父级的操作
可能，但在写第一条评论之前，我已经在工作 IconButton 旁边尝试了您的示例。 GuestureDetector 不适用于 Padding 子级（并且在删除 Padding 时有效）