选择与开关 (Selection)

1. 复选框 (Checkbox)

用于多选或单一状态切换。

var checked by remember { mutableStateOf(true) }

Row(verticalAlignment = Alignment.CenterVertically) {
    Checkbox(
        checked = checked,
        onCheckedChange = { checked = it }
    )
    Text("同意用户协议")
}

TriStateCheckbox (三态复选框)

如果你需要实现“全选/部分选中/全不选”的逻辑，可以使用 TriStateCheckbox。

2. 开关 (Switch)

通常用于设置项的开启/关闭。

var isEnabled by remember { mutableStateOf(false) }

Switch(
    checked = isEnabled,
    onCheckedChange = { isEnabled = it },
    thumbContent = { // M3 新特性：滑块内的图标
        if (isEnabled) {
            Icon(Icons.Filled.Check, null, Modifier.size(12.dp))
        }
    }
)

3. 单选按钮 (RadioButton)

用于互斥选择。通常需要配合 Column 或 Row 使用。

val options = listOf("选项 A", "选项 B", "选项 C")
var selectedOption by remember { mutableStateOf(options[0]) }

Column {
    options.forEach { text ->
        Row(
            Modifier
                .fillMaxWidth()
                .clickable { selectedOption = text } // 点击整行选中
                .padding(8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            RadioButton(
                selected = (text == selectedOption),
                onClick = null // null 表示由父容器响应点击
            )
            Text(text = text, style = MaterialTheme.typography.bodyLarge)
        }
    }
}

4. 滑块 (Slider)

var sliderPosition by remember { mutableFloatStateOf(0f) }

Column {
    Text("当前值: ${(sliderPosition * 100).toInt()}%")
    
    Slider(
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..1f,
        steps = 4 // 离散点：0, 0.2, 0.4, 0.6, 0.8, 1.0
    )
}