Flutter - Inkwell：为什么 onHover() 需要 onTap()？

Question

我使用以下代码：

  Widget getSelectSortBy() {
    return InkWell(
        onHover: (value) {
          setState(() {
            _isHoveringSortBy = value;
          });
        },
        // onTap needs to be implemented
        // otherwise onHover does NOT work! */don't know why/*
        onTap: () => {},
        child: AnimatedContainer(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(16)),
                color: blueSortBy,
                border: Border.all(
                    color: _isHoveringSortBy
                        ? Colors.white
                        : Colors.transparent,
                    width: 1.0)),
            duration: timeHoveringBottomAnimatedContainer,
            padding: EdgeInsets.only(top: 8, bottom: 9, left: 20, right: 28),
            child: Row(
               // rest of the code of Row
            )     
   );
  }

---

我发现我需要实现小部件onTap()的方法InkWell。否则，该onHover()方法将不起作用。

现在的问题是，为什么这是必要的？或者我实施了什么错误？

注意：我在 Chrome 上使用 Flutter for web 进行了测试。（不知道是否有不同的情况。）

Answer 1

从交互设计的角度来看，当小部件本身不以任何方式交互（点击、双击或长按）时，提供视觉反馈是没有意义的。可能就是这个原因。

如果您需要覆盖该行为（这是可以的），空回调似乎可以正常工作。

深入

如果您检查Inkwell 小部件，您会发现仅当以下三个小部件可用时才认为 Inkwell 小部件已启用： onTap、onDoubleTap、onlongPress

// Line 1034

bool _isWidgetEnabled(_InkResponseStateWidget widget) {
        return widget.onTap != null || widget.onDoubleTap != null || widget.onLongPress != null;
    }

bool get enabled => _isWidgetEnabled(widget);

并且，仅在启用Hover 事件时才会处理该事件。

// Line 1040
// MouseEnter /Hover event
// Calls _handleHoverChange() if enabled

void _handleMouseEnter(PointerEnterEvent event) {
    _hovering = true;
    if (enabled) {
      _handleHoverChange();
    }
  }


// Line 1054
// Calls updateHighLight()

void _handleHoverChange() {
    updateHighlight(_HighlightType.hover, value: _hovering);
  }

如果你仔细研究，你会发现updateHighlight()是处理回调的那个onHover。

附言。答案很粗糙，但希望你能明白要点。