Jetpack Compose中为何使用Button而非Card.clickable？

开发者阿泽

2026-8-12

Jetpack Compose中使用Button的意义

虽然Compose里几乎所有组件都能通过.clickable添加点击事件，但Button（以及它的衍生组件如OutlinedButton、IconButton）依然有不可替代的价值——它帮你封装了大量可访问性、视觉反馈、设计规范相关的细节，不用从零造轮子：

开箱即用的可访问性支持：Button默认适配了屏幕阅读器、键盘导航等无障碍场景。比如屏幕阅读器会自动识别它为按钮角色，用户按Enter/空格就能触发点击，焦点状态也会自动处理。如果用Card加.clickable，你得手动添加semantics { role = Role.Button }、配置焦点行为，否则无障碍用户根本没法识别这是可交互元素。
内置的视觉状态反馈：Button自带了Material Design规范下的所有交互状态样式——点击时的波纹效果、按下时的阴影变化、禁用时的灰化处理，这些都不用你手动实现。要是用.clickable，你得自己管理interactionSource、手动添加波纹指示，还要写逻辑处理不同状态的样式，繁琐得多。
严格对齐设计系统：Button完全遵循Material 2/3的设计规范，默认的圆角、内边距、文字样式、颜色搭配都和系统其他按钮保持一致。自己用Card拼按钮的话，得反复调整布局参数才能达到同样的视觉一致性，很容易出现样式偏差。
简化的状态控制：通过enabled参数就能一键控制按钮是否可点击，禁用时自动阻止点击事件、更新视觉样式和可访问性状态。而用.clickable的话，你得手动在点击逻辑里判断状态，还要自己修改背景、文字颜色来体现禁用状态，步骤冗余。
衍生组件快速满足场景：比如需要带图标的按钮，IconButton、IconToggleButton已经封装好了图标+按钮的布局逻辑，间距、对齐都帮你搞定；需要不同样式的按钮，OutlinedButton、TextButton直接就能用，不用自己组合基础组件。

举个直观的对比，实现一个禁用状态的提交按钮：

用Button只需要几行代码：

Button(
    onClick = { /* 处理提交 */ },
    enabled = false
) {
    Text("提交")
}

如果用Card+.clickable达到同样的效果，得写一堆冗余代码：

val interactionSource = remember { MutableInteractionSource() }
val isEnabled = false

Card(
    modifier = Modifier
        .clickable(
            enabled = isEnabled,
            interactionSource = interactionSource,
            indication = if (isEnabled) LocalIndication.current else null
        ) { /* 处理提交 */ }
        .semantics {
            role = Role.Button
            this.isEnabled = isEnabled
        },
    colors = CardDefaults.cardColors(
        containerColor = if (isEnabled) MaterialTheme.colorScheme.primary 
                        else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f)
    )
) {
    Text(
        text = "提交",
        color = if (isEnabled) MaterialTheme.colorScheme.onPrimary 
                else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f),
        modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
    )
}

显然，Button帮你省了大量重复工作，还能保证代码的健壮性和体验的一致性。

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