Flutter中Expanded内InkWell点击波纹失效问题求解

你遇到的问题确实是因为Container的不透明颜色遮挡了InkWell的波纹——毕竟InkWell的波纹是绘制在Material组件的底层，而Container的颜色会直接覆盖在上面。下面是几个能同时保留背景色和波纹效果的实用方法：

方法1：将背景色转移到Material组件 #

直接把原本给Container的颜色赋值给外层Material的color属性，Container可以去掉颜色或者设为透明：

Expanded(
  child: Material(
    color: Colors.blue, // 这里设置原本Container的背景色
    child: InkWell(
      onTap: () {
        // 你的点击逻辑
      },
      child: Container(
        alignment: Alignment.center,
        // 移除原本Container的color设置
        child: const Text('点击测试'),
      ),
    ),
  ),
)

方法2：用Ink组件替代Container设置背景色 #

Ink是Material体系内的组件，它的背景色不会遮挡InkWell的波纹，直接把Ink作为InkWell的子组件，再把Container放在Ink里面：

Expanded(
  child: Material(
    child: InkWell(
      onTap: () {
        // 你的点击逻辑
      },
      child: Ink(
        color: Colors.blue, // 用Ink设置背景色
        child: Container(
          alignment: Alignment.center,
          child: const Text('点击测试'),
        ),
      ),
    ),
  ),
)

方法3：给Container设置透明色并通过decoration实现背景 #

如果一定要保留Container，可以把Container的color设为透明，然后用BoxDecoration来设置背景色：

Expanded(
  child: Material(
    child: InkWell(
      onTap: () {
        // 你的点击逻辑
      },
      child: Container(
        color: Colors.transparent, // 必须设为透明
        decoration: const BoxDecoration(
          color: Colors.blue,
        ),
        alignment: Alignment.center,
        child: const Text('点击测试'),
      ),
    ),
  ),
)

这些方法的核心都是让背景色和InkWell的波纹处于同一个Material绘制层级，避免遮挡。

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