本教程共 100 篇 · 第 48 篇 · 更新于 2026-07-28 · 约 7 分钟阅读

48. Compose 按钮与交互

本节目标：掌握 Button、IconButton、CheckBox、Switch、Slider 等交互组件的用法，学会用 clickable 处理点击事件和交互状态。

Button 按钮

Button 是最常用的按钮，内容是可组合函数（不传字符串）：

@Composable
fun ButtonExample(onClick: () -> Unit) {
    Button(
        onClick = onClick,
        enabled = true,
        shape = RoundedCornerShape(8.dp)
    ) {
        Icon(Icons.Default.Add, contentDescription = null)
        Spacer(Modifier.width(4.dp))
        Text("添加")
    }
}

Note

Compose 的 Button 内容是一个 @Composable lambda，不是 text 字符串。这意味着你可以在按钮里放图标、文字、甚至任意组合，比传统 Button 灵活得多。

按钮变体

// 填充按钮（默认）
Button(onClick = { }) { Text("主要操作") }

// 描边按钮
OutlinedButton(onClick = { }) { Text("次要操作") }

// 文字按钮
TextButton(onClick = { }) { Text("辅助操作") }

这三种是 Material Design 定义的按钮层级：填充按钮最醒目用于主要操作，描边按钮次之，文字按钮最轻量用于辅助操作。

IconButton 图标按钮

IconButton(onClick = { /* 删除 */ }) {
    Icon(Icons.Default.Delete, contentDescription = "删除")
}

IconButton 默认 48x48dp 的点击区域，适合放图标做工具栏按钮。contentDescription 给无障碍服务读屏用，纯装饰图标传 null。

FloatingActionButton 浮动按钮

FloatingActionButton(
    onClick = { /* 新建 */ },
    containerColor = MaterialTheme.colorScheme.primary
) {
    Icon(Icons.Default.Add, contentDescription = "新建")
}

clickable 点击修饰符

任何组件都能加 clickable 变成可点击：

Text(
    text = "点我",
    modifier = Modifier
        .clickable { /* 处理点击 */ }
        .padding(16.dp)
)

带涟漪和反馈的点击

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Blue)
        .clickable { /* 点击 */ }
)

clickable 自带 Material 涟漪效果。还能自定义交互状态：

val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()

Box(
    modifier = Modifier
        .background(if (isPressed) Color.DarkGray else Color.Gray)
        .clickable(
            interactionSource = interactionSource,
            indication = ripple()
        ) { /* 点击 */ }
)

Tip

通过 interactionSource 可以监听按压、聚焦、悬停等交互状态，实现自定义视觉反馈。

CheckBox 复选框

@Composable
fun CheckboxExample() {
    var checked by remember { mutableStateOf(false) }

    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.clickable { checked = !checked }
    ) {
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it }
        )
        Text("同意条款")
    }
}

Note

给整行加 clickable，让点文字也能勾选，体验更好。Checkbox 的 onCheckedChange 是勾选状态变化的回调。

Switch 开关

@Composable
fun SwitchExample() {
    var enabled by remember { mutableStateOf(true) }

    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text("推送通知")
        Switch(
            checked = enabled,
            onCheckedChange = { enabled = it }
        )
    }
}

Switch 和 Checkbox 用法几乎一样，只是视觉不同。Switch 适合「开关」类设置项。

RadioButton 单选按钮

单选需要一组按钮共享一个状态：

@Composable
fun RadioGroupExample() {
    val options = listOf("男", "女", "保密")
    var selected by remember { mutableStateOf("男") }

    Column {
        options.forEach { option ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { selected = option }
                    .padding(8.dp)
            ) {
                RadioButton(
                    selected = selected == option,
                    onClick = { selected = option }
                )
                Text(option)
            }
        }
    }
}

Slider 滑块

@Composable
fun SliderExample() {
    var value by remember { mutableStateOf(0.5f) }

    Column(modifier = Modifier.padding(16.dp)) {
        Text("音量：${(value * 100).toInt()}%")
        Slider(
            value = value,
            onValueChange = { value = it },
            valueRange = 0f..1f,
            steps = 9  // 0, 0.1, 0.2, ... 1.0，共 10 档
        )
    }
}

参数	作用
`value`	当前值
`onValueChange`	拖动时回调
`valueRange`	取值范围
`steps`	离散档位数（0 = 连续）

综合示例：设置页

@Composable
fun SettingsScreen() {
    var notifications by remember { mutableStateOf(true) }
    var darkMode by remember { mutableStateOf(false) }
    var volume by remember { mutableStateOf(0.7f) }

    Column(modifier = Modifier.fillMaxWidth()) {
        // 开关项
        SettingItem(title = "推送通知") {
            Switch(checked = notifications, onCheckedChange = { notifications = it })
        }
        SettingItem(title = "深色模式") {
            Switch(checked = darkMode, onCheckedChange = { darkMode = it })
        }
        // 滑块项
        SettingItem(title = "音量") {
            Slider(
                value = volume,
                onValueChange = { volume = it },
                modifier = Modifier.width(120.dp)
            )
        }
    }
}

@Composable
fun SettingItem(title: String, content: @Composable () -> Unit) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(title)
        content()
    }
}

小结

Button 有三种层级（填充、描边、文字），IconButton 做图标按钮，FAB 做浮动按钮。CheckBox、Switch、RadioButton 都是状态组件，遵循「状态向下传、事件向上传」。任何组件都能用 clickable 变可点击，用 interactionSource 自定义交互反馈。下一节学习卡片和容器组件。