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 widget，您会发现 Inkwell 小部件只有在以下三个中的任何一个可用时才被视为启用：onTap、{{1} }, onDoubleTap

onlongPress

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

// 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() 回调的那个。

附注。答案很粗略，但希望你明白这一点。

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

1 个答案: