M3E 设计系统
ANDROIDX / COMPOSE / MATERIAL 3
IconButton：按下与选中形状
为普通与 Toggle 图标按钮启用按压、选中状态的形状变化。
普通图标按钮
普通 IconButton 的 IconButtonShapes 包含 shape 与 pressedShape：
IconButton(
onClick = { /* action */ },
shapes = IconButtonDefaults.shapes(),
) {
Icon(Icons.Default.Lock, contentDescription = "锁定")
}源码说明：当两个值都是 CornerBasedShape 时，按钮会在 active 与 pressed 状态之间 morph。
Toggle 多一个 checked 状态
IconToggleButtonShapes 额外包含 checkedShape，所以选中状态也可以有独立轮廓：
var checked by remember { mutableStateOf(false) }
IconToggleButton(
checked = checked,
onCheckedChange = { checked = it },
shapes = IconButtonDefaults.toggleableShapes(),
) {
Icon(Icons.Default.Favorite, contentDescription = "收藏")
}可用范围
同一套 shapes 思路不仅用于透明背景版本。当前 samples 对 FilledIconButton、FilledTonalIconButton、OutlinedIconButton 以及各自 Toggle 版本都展示了 animated shape 调用。
别漏掉 Tooltip
官方 IconButtonWithAnimatedShapeSample 在按钮外包了 TooltipBox，并明确注释 icon button 应关联 tooltip 以满足可访问性。形状是视觉反馈，不能替代按钮含义。
复制即用
普通图标按钮与 Toggle 图标按钮：
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.IconToggleButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
@Composable
fun SimpleIconButton() {
IconButton(
onClick = { /* action */ },
shapes = IconButtonDefaults.shapes(),
) {
Icon(Icons.Default.Lock, contentDescription = "锁定")
}
}
@Composable
fun FavoriteToggleButton() {
var checked by remember { mutableStateOf(false) }
IconToggleButton(
checked = checked,
onCheckedChange = { checked = it },
shapes = IconButtonDefaults.toggleableShapes(),
) {
Icon(Icons.Default.Favorite, contentDescription = "收藏")
}
}FilledIconButton、FilledTonalIconButton、OutlinedIconButton 及其 Toggle 版本使用相同的 shapes 参数。