android-jetpack-compose - 我们如何在 jetpack compose 中创建一个圆形复选框？

Question

通常可以使用修饰符将不同的形状分配给可组合项，但在此可组合项中没有这样做。

我希望图像中标记的部分是一个圆圈

你可以在下面看到我写的代码

@Composable
fun StandardCheckbox(
    text: String = "",
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
) {
    Row(
        Modifier.padding(horizontal = SpaceMedium)
    ) {
        Checkbox(
            modifier = Modifier
                .clip(CircleShape),
            checked = checked,
            onCheckedChange = onCheckedChange,
            enabled = true,
            colors = CheckboxDefaults.colors(
                checkedColor = MaterialTheme.colors.primary,
                checkmarkColor = MaterialTheme.colors.onPrimary,
                uncheckedColor = MaterialTheme.colors.onBackground.copy(alpha = 0.3f)
            )
        )
        Spacer(modifier = Modifier.width(SpaceSmall))
        Text(
            text = text,
            color = MaterialTheme.colors.primary,
            modifier = Modifier.clickable {
                if (onCheckedChange != null) {
                    onCheckedChange(!checked)
                }
            }
        )
    }
}

标签： android-jetpack-composeandroid-jetpackandroid-checkbox

Answer 1

下面的代码来自CheckboxImpl可组合

Canvas(modifier.wrapContentSize(Alignment.Center).requiredSize(CheckboxSize)) {
    val strokeWidthPx = floor(StrokeWidth.toPx())
    drawBox(
        boxColor = boxColor,
        borderColor = borderColor,
        radius = RadiusSize.toPx(),
        strokeWidth = strokeWidthPx
    )
    drawCheck(
        checkColor = checkColor,
        checkFraction = checkDrawFraction,
        crossCenterGravitation = checkCenterGravitationShiftFraction,
        strokeWidthPx = strokeWidthPx,
        drawingCache = checkCache
    )
}

drawBox将始终绘制一个圆角矩形。它不能被定制。

要实现圆形复选框，您需要编写自定义Composable并绘制圆形而不是矩形。您可以使用RadioButton和CheckboxImpl可组合作为参考。