IconButton和長按檢測

Question

請幫助我對圖標按鈕進行長按檢測。

我正在嘗試獲取一個圖標按鈕，該按鈕將在點擊時將數量值更改為 1，而在長按時將更改為 10。 問題是不幸的IconButton ，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用於IconButton並將IconButton用於 onPressed ？ 我可以在使用此類解決方案的某些特定 Android 版本上遇到一些麻煩嗎？

Answer 1

嘗試使用InkWell ，它會像IconButton一樣IconButton並為您提供漣漪效果

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

Answer 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();
      },
    ),
   )