在Jetpack Compose主题中配置按钮键盘焦点边框

要实现全局所有按钮在获得键盘焦点时显示清晰边框，无需逐个修改按钮，只需通过Compose主题的components配置自定义按钮样式即可，具体步骤如下：

1. 定义全局按钮样式，覆盖聚焦状态修饰符 #

创建自定义的ButtonStyle，重点指定focusedModifier来添加聚焦时的边框：

val CustomButtonStyle = ButtonDefaults.buttonStyle(
    // 保持主题原有按钮的颜色配置，也可按需修改
    containerColor = MaterialTheme.colorScheme.primary,
    contentColor = MaterialTheme.colorScheme.onPrimary,
    // 设置聚焦状态的边框：宽度、颜色、圆角可按需调整
    focusedModifier = Modifier.border(2.dp, MaterialTheme.colorScheme.onPrimary, RoundedCornerShape(4.dp))
)

2. 在主题中全局应用该样式 #

在MaterialTheme的components块中替换默认的按钮样式，这样所有使用默认样式的Button都会自动应用聚焦边框：

MaterialTheme(
    colorScheme = colorScheme,
    typography = Typography,
    components = {
        // 全局替换按钮样式
        buttonStyle(CustomButtonStyle)
    }
) {
    // 你的应用内容布局
}

额外说明 #

• 若使用OutlinedButton，可通过outlinedButtonStyle方法同理配置聚焦边框
• 边框颜色建议选择与主题对比度高的颜色，满足WCAG可访问性对比度要求，确保视觉清晰
• 测试时需使用键盘导航（如Tab键）触发焦点，验证效果是否符合预期
• 如果需要为不同类型按钮设置差异化聚焦样式，可定义多个ButtonStyle，在对应按钮上通过style参数指定

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