Flutter InkWell：让水波纹区域超出按钮范围

要实现「仅右侧区域可点击，但水波纹覆盖整个Tile」的需求，有两种实用方法：

方法一：用AbsorbPointer隔离点击区域 #

这是最简洁的方式——把整个Tile用InkWell包裹，然后给左侧的文本区域套一层AbsorbPointer，让左侧吸收点击事件不触发响应，只有右侧图标区域能触发InkWell的点击，同时水波纹会自动覆盖整个Tile范围。

示例代码：

// 外层用InkWell包裹整个Tile
InkWell(
  onTap: () {
    // 这里写你的点击逻辑
  },
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    child: Row(
      children: [
        Flexible(
          // 阻止左侧文本区域接收点击
          child: AbsorbPointer(
            child: Text('自定义文本内容'),
          ),
        ),
        Flexible(
          child: Icon(Icons.arrow_forward_ios),
        ),
      ],
    ),
  ),
)

方法二：手动触发全局水波纹 #

如果不想改动原有组件嵌套结构，可以保留右侧的InkWell，通过Flutter的Material控制器手动生成覆盖整个Tile的水波纹效果。

示例代码：

final GlobalKey _tileKey = GlobalKey();

// 自定义Tile结构
Container(
  key: _tileKey,
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
  child: Row(
    children: [
      Flexible(child: Text('自定义文本内容')),
      Flexible(
        child: InkWell(
          onTap: () {
            // 获取Tile的渲染信息
            final renderBox = _tileKey.currentContext!.findRenderObject() as RenderBox;
            final tileOffset = renderBox.localToGlobal(Offset.zero);
            final tileSize = renderBox.size;

            // 触发覆盖整个Tile的水波纹
            Material.of(context).inkController.addInk(
              InkSplash.splashFactory.create(
                controller: Material.of(context).inkController,
                referenceBox: renderBox,
                position: tileOffset + tileSize.center(Offset.zero),
                color: Theme.of(context).splashColor,
                textDirection: TextDirection.ltr,
              ),
            );

            // 你的点击逻辑
          },
          child: Icon(Icons.arrow_forward_ios),
        ),
      ],
    ),
  ),
)

优先推荐方法一，代码更简洁易维护，不需要额外的全局Key和位置计算。

内容的提问来源于stack exchange，提问作者Kulpas