Jetpack Compose 入门:RadioButton、Checkbox、Switch

RadioButton、Checkbox、Switch 是 Material3 组件,RadioButton:selected, onClick; Checkbox:checked、onCheckedChange;Switch:checked、onCheckedChange;

hefengbao 发布于 2023.08.26 ,最后更新于 2023.09.18

RadioButtonCheckboxSwitch 是 Material3 组件:androidx.compose.material3.Checkboxandroidx.compose.material3.RadioButtonandroidx.compose.material3.Switch

示例代码:

@Composable
fun RadioButtonCheckBoxSwitchScreen(
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        val radioList = listOf<String>("苹果","芒果","结果")
        var radioSelected: Int? by remember { mutableStateOf(null) }
        val radioSelectedText = if (radioSelected != null){
            "(${radioList[radioSelected!!]})"
        }else{
            "()"
        }

        Text(text = "那个不是水果?${radioSelectedText}")

        radioList.forEachIndexed { index,item ->
            Row(
                modifier = modifier
                    .fillMaxWidth()
                    .clickable { radioSelected = index },
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(selected = index == radioSelected, onClick = { radioSelected = index })
                Text(text = item)
            }
        }

        var checkboxChecked by remember { mutableStateOf(false) }

        Row(
            modifier = modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ){
            Checkbox(checked = checkboxChecked, onCheckedChange = { checkboxChecked = it})
            Text(text = "请阅读并同意《服务协议》")
        }

        var switchChecked by remember { mutableStateOf(false) }
        Row(
            modifier = modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Text(text = "开启消息通知")
            Switch(checked = switchChecked, onCheckedChange = { switchChecked = it })
        }
    }
}

要点就是状态处理:

RadioButton:selected, onClick;

Checkbox:checked、onCheckedChange;

Switch:checked、onCheckedChange;

Android    Android   Jetpack Compose Tutorial  

hefengbao

暂无个人简介

有0条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注

来源:

https://www.8ug.icu/articles/jetpack-compose-tutorial-RadioButton-Checkbox-Switch-Z7WbwVE0gA