如何在Jetpack Compose中自定义实现圆形样式的复选框

官方 Material Design 规范的 Checkbox 默认采用方形轮廓，Compose 提供的 Checkbox 可组合项的外观逻辑内置在组件内部实现中，外部传入的 Modifier.clip() 只能裁剪组件的整体画布范围，无法修改组件内部的勾选框轮廓，所以你当前的写法无法生效。

你可以使用 IconToggleButton 自定义实现圆形勾选效果，完全替代原生 Checkbox 即可，代码示例如下：

@Composable
fun StandardCheckbox(
    text: String = "",
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
) {
    Row(
        Modifier.padding(horizontal = SpaceMedium),
        verticalAlignment = Alignment.CenterVertically
    ) {
        IconToggleButton(
            checked = checked,
            onCheckedChange = onCheckedChange ?: {}
        ) {
            Box(
                modifier = Modifier
                    .size(20.dp) // 可根据需求调整尺寸，和原生Checkbox大小对齐
                    .clip(CircleShape)
                    .border(
                        width = 2.dp,
                        color = if (checked) MaterialTheme.colors.primary
                        else MaterialTheme.colors.onBackground.copy(alpha = 0.3f),
                        shape = CircleShape
                    )
                    .background(
                        color = if (checked) MaterialTheme.colors.primary else Color.Transparent
                    ),
                contentAlignment = Alignment.Center
            ) {
                if (checked) {
                    Icon(
                        imageVector = Icons.Default.Check,
                        contentDescription = null,
                        tint = MaterialTheme.colors.onPrimary,
                        modifier = Modifier.size(12.dp)
                    )
                }
            }
        }
        Spacer(modifier = Modifier.width(SpaceSmall))
        Text(
            text = text,
            color = MaterialTheme.colors.primary,
            modifier = Modifier.clickable {
                onCheckedChange?.invoke(!checked)
            }
        )
    }
}

上述实现的交互逻辑、配色规则和你原有代码完全对齐，直接替换原有实现即可使用。

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