Compose Material 3 工具栏中是否有正确的切换按钮？

Question

我正在使用 Jetpack Compose 和 Material Design 3 创建一个带有切换按钮（例如粗体、斜体、列表等）的富文本编辑器工具栏。默认的

IconToggleButton

具有微妙的选定状态（仅对图标进行着色），这不是很明显。如何让所选状态更加突出，同时保持设计与 Material 3 一致？

Answer 1

您可以使用

IconToggleButton

可组合项并自定义

checkedContainerColor

来提高所选状态的对比度。具体方法如下：

val icon = Icons.Outlined.FormatAlignCenter
IconToggleButton(
    checked = isSelected,
    onCheckedChange = { onClick() },
    modifier = modifier,
    colors = IconButtonDefaults.iconToggleButtonColors(
        checkedContainerColor = MaterialTheme.colorScheme.primaryContainer,
    ),
) {
    Icon(
        icon,
        contentDescription = icon.name,
    )
}

通过将

checkedContainerColor

设置为

MaterialTheme.colorScheme.primaryContainer

，按钮的背景在选择时会发生变化，使状态更加突出，视觉上更清晰。