如何修改Icon button的触摸动画半径且不改变按钮本身尺寸

完全可以在不修改IconButton本身尺寸的前提下调整触摸动画半径，不同技术栈的实现方案如下：

Material UI（React） #

通过TouchRippleProps属性自定义涟漪动画尺寸即可，不会影响按钮本身的大小和点击热区：

<IconButton
  TouchRippleProps={{
    style: {
      width: '32px',
      height: '32px'
    }
  }}
>
  <YourIcon />
</IconButton>

Flutter #

直接修改组件内置的splashRadius参数：

IconButton(
  icon: Icon(Icons.your_icon),
  splashRadius: 24, // 自定义水波纹动画半径
  onPressed: () {},
)

Android Jetpack Compose #

自定义rememberRipple的半径参数即可：

IconButton(
  onClick = { /* 点击逻辑 */ },
  indication = rememberRipple(radius = 24.dp),
  interactionSource = remember { MutableInteractionSource() }
) {
  Icon(Icons.Default.YourIcon, contentDescription = null)
}

原生Android View体系 #

给按钮设置自定义半径的RippleDrawable：

val customRipple = RippleDrawable(
  ColorStateList.valueOf(Color.parseColor("#1A000000")),
  null,
  null
).apply {
  setRadius((24 * resources.displayMetrics.density).toInt())
}
yourIconButton.foreground = customRipple

其他UI库的处理逻辑一致，直接查找组件文档中和ripple、splash、触摸动画相关的配置项即可，无需调整按钮本身的布局参数。

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