如何修改Flutter中IconButton的点击、长按动画以适配容器

默认情况下，IconButton被点击时会显示固定半径的圆形轮廓，要让这个交互动画适配所在容器的样式，可以用以下几种实用方法：

方法一：用InkWell替代IconButton（最灵活适配任意形状） #

InkWell支持自定义水波纹的圆角，能完美匹配容器的形状，不管是直角、圆角都能适配：

Container(
  color: Colors.lightBlueAccent,
  // 如果容器设置了圆角，比如BorderRadius.circular(12)，这里的borderRadius对应设置即可
  child: InkWell(
    onTap: () {},
    borderRadius: BorderRadius.zero, // 与容器直角匹配，有圆角则同步调整参数
    child: Icon(Icons.settings, size: 100),
  ),
)

方法二：调整IconButton属性（仅限圆形适配场景） #

如果一定要保留IconButton组件，可以通过修改splashRadius参数，让水波纹半径贴合容器尺寸：

Container(
  width: 150,
  height: 150,
  color: Colors.lightBlueAccent,
  child: IconButton(
    icon: Icon(Icons.settings),
    iconSize: 100,
    splashRadius: 150, // 设置为容器的尺寸，让水波纹填满容器范围
    onPressed: () {},
  ),
)

方法三：用InkResponse实现矩形交互效果 #

如果容器是矩形，想要点击时显示矩形的高亮和水波纹，可以用InkResponse配合Material组件：

Material(
  color: Colors.lightBlueAccent,
  child: InkResponse(
    onTap: () {},
    containedInkWell: true,
    highlightShape: BoxShape.rectangle, // 强制高亮形状为矩形
    child: Icon(Icons.settings, size: 100),
  ),
)

默认效果参考：

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