android - 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

您可以找到合适的默认图标，而不是自己绘制。 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
        )
    }
}

结果: