Jetpack Compose中如何使用Checkbox控制登录按钮可用状态

现有代码问题说明 #

当前代码存在两个核心问题导致状态无法联动：

1. isChecked 勾选状态定义在Row组件的内部作用域，外层的登录Button无法访问该状态
2. 登录按钮没有做启用/禁用的状态绑定，点击逻辑也没有增加勾选状态校验

具体修改步骤 #

• 状态提升：将isChecked的声明移动到和email、password、passwordVisibility同级的Compose顶层作用域，让所有子组件都能访问到该状态
• 按钮状态绑定：给Button增加enabled参数，值绑定为isChecked.value，未勾选时按钮自动变为不可点击的置灰状态
• 点击逻辑校验：在按钮的onClick回调中增加二次判断，只有isChecked.value为true时才执行登录逻辑，避免极端场景下的状态绕过
• 体验优化：原有代码中Checkbox设置的size(3.dp)过小，用户很难点中，建议调整为合适大小比如size(20.dp)；未勾选时如果用户触发点击，可以弹出Toast提示用户先同意协议

修改后完整可运行代码 #

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun LoginScreen(
    navController: NavController,
) {
    val email = remember { mutableStateOf(TextFieldValue()) }
    val password = remember { mutableStateOf(TextFieldValue()) }
    val passwordVisibility = remember { mutableStateOf(false) }
    // 将勾选状态提升到顶层作用域，供全局子组件访问
    val isChecked = remember { mutableStateOf(false) }
    val focus = LocalFocusManager.current
    val context = LocalContext.current

    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        OutlinedTextField(
            value = email.value,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = white,
                focusedIndicatorColor = Grey,
                unfocusedIndicatorColor = Grey,
                focusedLabelColor = Grey,
                unfocusedLabelColor = Grey,
                cursorColor = custom,
                textColor = custom,
            ),
            onValueChange = { email.value = it },
            label = { Text(text = "邮箱地址") },
            placeholder = { Text(text = "请输入邮箱") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.8f)
        )
        Spacer(modifier = Modifier.padding(2.dp))

        OutlinedTextField(
            value = password.value,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = white,
                focusedIndicatorColor = Grey,
                unfocusedIndicatorColor = Grey,
                focusedLabelColor = Grey,
                unfocusedLabelColor = Grey,
                cursorColor = custom,
                textColor = custom,
            ),
            onValueChange = { password.value = it },
            label = { Text(text = "密码") },
            placeholder = { Text(text = "请输入密码") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.8f),
            trailingIcon = {
                IconButton(onClick = {
                    passwordVisibility.value = !passwordVisibility.value
                }) {
                    Icon(
                        painter = painterResource(id = R.drawable.password_eye),
                        contentDescription = "密码可见切换",
                        tint = if (passwordVisibility.value) custom else Grey
                    )
                }
            },
            visualTransformation = if (passwordVisibility.value) VisualTransformation.None
            else PasswordVisualTransformation()
        )

        Spacer(modifier = Modifier.padding(10.dp))

        Row(
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Checkbox(
                checked = isChecked.value,
                onCheckedChange = { isChecked.value = it },
                enabled = true,
                colors = CheckboxDefaults.colors(custom),
                // 调整Checkbox到可点击的合理尺寸
                modifier = Modifier
                    .padding(5.dp)
                    .size(20.dp),
            )

            Spacer(modifier = Modifier.padding(2.dp))

            Text(
                "我同意应用服务条款和隐私政策",
                modifier = Modifier.width(320.dp),
                textAlign = TextAlign.Center,
                fontSize = 12.sp,
                color = custom
            )
        }

        Spacer(modifier = Modifier.padding(20.dp))

        Button(
            modifier = Modifier
                .width(285.dp)
                .height(55.dp),
            // 绑定按钮启用状态，未勾选时按钮不可用
            enabled = isChecked.value,
            onClick = {
                // 点击时二次校验状态，避免异常绕过
                if (!isChecked.value) {
                    Toast.makeText(context, "请先同意服务条款和隐私政策", Toast.LENGTH_SHORT).show()
                    return@Button
                }
                focus.clearFocus(force = true)
                model.onSignUpOne(
                    email.value.text,
                    password.value.text,
                )
            },
            colors = ButtonDefaults.buttonColors(
                backgroundColor = custom,
                // 自定义禁用状态下的按钮颜色
                disabledBackgroundColor = Grey
            ),
            shape = RoundedCornerShape(30)
        ) {
            Text(
                text = "登录",
                style = TextStyle(
                    fontSize = 18.sp,
                    color = white,
                )
            )
        }
    }
}

效果说明 #

• 未勾选协议时，登录按钮自动置灰，点击无响应
• 勾选协议后，按钮恢复可用状态，点击可正常执行登录逻辑
• 如果需要点击协议文本跳转对应页面，可以给Text组件增加clickable修饰符，结合navController实现跳转即可

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