Flutter InkResponse设置containedInkWell=true时水波纹仍移至中心问题

原因分析 #

你遇到的问题核心在于**InkResponse的radius属性固定值限制了水波纹的扩展范围**。官方文档中关于containedInkWell的行为描述，是基于水波纹会自然扩展至整个InkResponse组件范围的场景。当手动设置radius: 40后，水波纹只能扩展到这个固定半径大小，当它无法覆盖整个组件时，动画逻辑会出现向中心偏移的表现，导致containedInkWell的开关设置失去预期效果。

解决办法 #

有两种可行的修复方式：

• 直接移除radius属性：让水波纹自然扩展至整个InkResponse的范围，此时containedInkWell: true会让水波纹始终以点击位置为中心向外扩散，不会迁移到组件中心；设置为false时，水波纹会在扩散过程中逐渐迁移到组件中心。
• 若需要保留radius，将其设置为足够大的值（比如大于等于组件对角线长度的一半，对于600x400的组件，对角线约721，所以设置radius: 360），确保水波纹能覆盖整个组件，这样containedInkWell的设置也能正常生效。

修改后的代码示例 #

移除radius的版本

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: SizedBox(
        width: 600,
        height: 400,
        child: Material(
          color: Colors.amber,
          child: InkResponse(
            containedInkWell: true,
            splashColor: Colors.blue.shade500,
            onTap: () {},
          ),
        ),
      ),
    ),
  );
}

设置足够大radius的版本

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: SizedBox(
        width: 600,
        height: 400,
        child: Material(
          color: Colors.amber,
          child: InkResponse(
            containedInkWell: true,
            splashColor: Colors.blue.shade500,
            radius: 360, // 大于等于组件对角线的一半
            onTap: () {},
          ),
        ),
      ),
    ),
  );
}

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