Jetpack Compose Material3工具栏中如何设置醒目的切换按钮？

针对富文本编辑器工具栏的需求，以下几种方案既能保持Material Design 3（MD3）的设计一致性，又能显著提升IconToggleButton选中状态的辨识度：

1. 利用MD3容器色强化背景区分 #

MD3的设计体系中，容器颜色是核心视觉元素之一。通过给选中状态的按钮添加主题自带的容器色背景，能清晰区分选中/未选中状态，同时完全贴合MD3风格：

@Composable
fun EnhancedIconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true
) {
    val colors = IconToggleButtonDefaults.colors(
        checkedIconColor = MaterialTheme.colorScheme.onPrimaryContainer,
        uncheckedIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
        checkedContainerColor = MaterialTheme.colorScheme.primaryContainer,
        uncheckedContainerColor = Color.Transparent
    )

    IconToggleButton(
        checked = checked,
        onCheckedChange = onCheckedChange,
        modifier = modifier
            .clip(MaterialTheme.shapes.small) // 遵循MD3默认圆角规范
            .padding(if (checked) 4.dp else 0.dp), // 选中时增加内边距，优化容器视觉比例
        enabled = enabled,
        colors = colors
    ) {
        icon()
    }
}

• 选中时使用primaryContainer作为背景色，onPrimaryContainer作为图标色，符合MD3的色彩对比度要求
• 采用主题自带的shapes.small保证圆角样式统一

2. 描边+低透明度填充的组合效果 #

如果不想使用纯色背景，可通过描边配合低透明度填充的方式强化选中状态，视觉上更轻盈但辨识度足够：

@Composable
fun StrokedIconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true
) {
    val borderColor = if (checked) MaterialTheme.colorScheme.primary else Color.Transparent
    val containerColor = if (checked) MaterialTheme.colorScheme.primary.copy(alpha = 0.1f) else Color.Transparent

    IconToggleButton(
        checked = checked,
        onCheckedChange = onCheckedChange,
        modifier = modifier
            .clip(MaterialTheme.shapes.small)
            .border(2.dp, borderColor, MaterialTheme.shapes.small)
            .background(containerColor),
        enabled = enabled,
        colors = IconToggleButtonDefaults.colors(
            checkedIconColor = MaterialTheme.colorScheme.primary,
            uncheckedIconColor = MaterialTheme.colorScheme.onSurfaceVariant
        )
    ) {
        icon()
    }
}

• 选中时用主题primary色做描边，搭配10%透明度的同色填充，既不突兀又能清晰区分状态
• 同样遵循MD3的形状规范，保证整体设计统一

3. 图标变体切换+颜色强化 #

结合MD3推荐的图标变体（Filled/Outlined），在选中时切换图标形态，配合颜色变化实现双重视觉提示：

@Composable
fun BoldToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier
) {
    IconToggleButton(
        checked = checked,
        onCheckedChange = onCheckedChange,
        modifier = modifier.clip(MaterialTheme.shapes.small),
        colors = IconToggleButtonDefaults.colors(
            checkedIconColor = MaterialTheme.colorScheme.primary,
            uncheckedIconColor = MaterialTheme.colorScheme.onSurfaceVariant
        )
    ) {
        Icon(
            imageVector = if (checked) Icons.Filled.FormatBold else Icons.Outlined.FormatBold,
            contentDescription = "粗体"
        )
    }
}

• 选中时展示实心（Filled）图标，未选中时展示轮廓（Outlined）图标，视觉差异明显
• 配合主题primary色的图标颜色，进一步强化选中状态

以上方案均基于MD3的设计规范，使用主题提供的颜色、形状、图标资源，不会破坏整体设计一致性，同时有效解决了默认选中状态辨识度低的问题。

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