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

【问题标题】：Transparent checkmark in checkBox in Jetpack ComposeJetpack Compose 中复选框中的透明复选标记
【发布时间】：2022-01-01 12:31:07
【问题描述】：

在我的 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
        )
    }
}

但在我的应用程序中，我在卡片上有渐变背景，所以我想让复选标记透明，但在这个实现中，由于 Box 的背景，这是不可能的。有没有办法实现它，如下图所示？

【问题讨论】：

标签： android kotlin checkbox android-jetpack-compose

【解决方案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
        )
    }
}

结果：

【讨论】：

【解决方案2】：

我认为您可以通过像这样导入自定义图标矢量来实现这一点

这里，检查是透明的，所以它会显示渐变背景。

【讨论】：