IconButton和长按检测

Question

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

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

所以我只使用了Icon里面的Container如下

        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 拥有GestureDetectorfor longPress 和IconButtonfor onPressed 可以吗？我在某些特定的 Android 版本上使用这样的解决方案可能会遇到一些问题吗？

Answer 1

尝试用它InkWell代替，它会表现得像IconButton并给你带来涟漪效应

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