Jetpack Compose 复选框中的透明复选标记

Question

在我的 Compose 应用中，我需要创建一个圆形复选框。我已经通过以下代码实现了这一点：

@Composable
fun CircleCheckBox(
    isChecked: Boolean,
    modifier: Modifier = Modifier,
    onChecked: () -> Unit = {},
    checkedBackgroundColor: Color,
    unCheckedBackgroundColor: Color,
    checkedIconColor: Color,
    unCheckedIconColor: Color
) {
    Box(
        modifier = modifier
            .clip(CircleShape)
            .clickable { onChecked() }
            .border(
                width = if (!isChecked) 1.dp else 0.dp,
                color = if (!isChecked) checkedBackgroundColor else Color.Transparent,
                shape = CircleShape
            )
            .background(
                color = if (isChecked) checkedBackgroundColor else unCheckedBackgroundColor,
                shape = CircleShape
            ),
        contentAlignment = Alignment.Center
    ) {
        Icon(
            imageVector = Icons.Default.Check,
            contentDescription = stringResource(R.string.icon_check),
            modifier = Modifier.padding(3.dp),
            tint = if (isChecked) checkedIconColor else unCheckedIconColor
        )
    }
}

但是在我的应用程序中，卡片上有渐变背景，所以我想使复选标记透明，但在这种实现中这是不可能的，因为盒子的背景。有什么办法可以实现吗，如下图所示？

Answer 1

我认为您可以像这样导入自定义图标矢量来实现此目的

这里的check是透明的所以会显示渐变背景

Answer 2

您可以找到合适的默认图标，而不是自己画。 Icons.Default.CheckCircle 是您要查找的内容 - 它在实心圆圈内有透明的复选标记。您可以使用 Icons.Outlined.Circle 而不是边框修饰符：

@Composable
fun CircleCheckBox(
    isChecked: Boolean,
    modifier: Modifier = Modifier,
    onChecked: () -> Unit = {},
    color: Color,
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier
            .clip(CircleShape)
            .clickable { onChecked() }
    ) {
        Icon(
            imageVector = if (isChecked) Icons.Default.CheckCircle else Icons.Outlined.Circle,
            contentDescription = stringResource(R.string.icon_check),
            tint = color
        )
    }
}

结果：

Jetpack Compose 复选框中的透明复选标记

Transparent checkmark in checkBox in Jetpack Compose

checkbox

android

kotlin

android-jetpack-compose