Flutter - 墨水池 : Why does onHover() require 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
            )     
   );
  }

---

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

现在的问题是，为什么这是必要的？还是我执行错了什么？

注意:我在 Chrome 上用 Flutter for web 测试了这个。 (不知道有没有不同的情况。)

Answer 1

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

如果您需要覆盖行为(这没关系)，空回调似乎可以正常工作。

---

深入

如果您检查 Inkwell widget ，您会发现仅当以下三个中的任何一个可用时，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);

而且，悬停事件只有在启用时才会被处理。

// 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 回调的函数。

---

附言。答案很粗略，但希望您明白了。