如何使 Jetpack 撰写复选框呈圆形

Question

如何在 Jetpackcompose 中创建一个圆形复选框，如下所示。我尝试在其上使用形状可组合项，但它不起作用。

Answer 1

我正在研究如何做你问的同样的事情，你的问题对我的旅程有帮助，所以我分享是公平的。添加一些动画，你就设置好了我的朋友。

1. 使用盒子和图标制作圆形图标

    Box(
         modifier = Modifier
             .clip(CircleShape)
             .size(40.dp)
             .background(Color.Black)
             .padding(3.dp)
             .clip(CircleShape)
             .background(Color.White),
         contentAlignment = Alignment.Center
     ) {
   
       Icon(imageVector = Icons.Default.Check, contentDescription = "")
      }
   

2.使用 Row 将新制作的圆形图标和一些文本放在一起

 Row(
    verticalAlignment = Alignment.CenterVertically,
    ){
    Box(
         modifier = Modifier
             .clip(CircleShape)
             .size(40.dp)
             .background(Color.Black)
             .padding(3.dp)
             .clip(CircleShape)
             .background(Color.White),
         contentAlignment = Alignment.Center
     ) {
         
       Icon(imageVector = Icons.Default.Check, contentDescription = "")
      }

    Text(
        text = checkedText.value,
        color = color.value,
        fontSize = 20.sp,
        fontWeight = FontWeight.Medium,
        modifier = Modifier.padding(start = 5.dp)
    )
}

3.用变量替换你想要的任何内容，以便你可以自定义它

@Composable
fun RoundedCheckView(
) {

val isChecked = remember { mutableStateOf(false) }
val checkedText = remember { mutableStateOf("unChecked") }
val circleSize = remember { mutableStateOf(20.dp) }
val circleThickness = remember { mutableStateOf(2.dp) }
val color = remember { mutableStateOf(Color.Gray) }

Row(
    verticalAlignment = Alignment.CenterVertically,
    {
    Box(
        modifier = Modifier
            .clip(CircleShape)
            .size(circleSize.value)
            .background(color.value)
            .padding(circleThickness.value)
            .clip(CircleShape)
            .background(Color.White)  ,
        contentAlignment = Alignment.Center
    ) {
       Icon(imageVector = Icons.Default.Check, contentDescription = "")
     }

    Text(
        text = checkedText.value,
        color = color.value,
        fontSize = 20.sp,
        fontWeight = FontWeight.Medium,
        modifier = Modifier.padding(start = 5.dp)
    )
}

}

4.最后将 Modifier.toggleable 添加到该行，基本上使其成为一个可点击的项目，可以在本例中的 isChecked 中切换（在 true 和 false 之间）变量。然后根据需要自定义变量即可

@Composable

fun RoundedCheckView() 
{
    val isChecked = remember { mutableStateOf(false) }
    val checkedText = remember { mutableStateOf("unChecked") }
    val circleSize = remember { mutableStateOf(20.dp) }
    val circleThickness = remember { mutableStateOf(2.dp) }
    val color = remember { mutableStateOf(Color.Gray) }
Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier
        .toggleable(value = isChecked.value,role = Role.Checkbox) {
            isChecked.value = it

            if (isChecked.value) {
                checkedText.value = "Checked"
                circleSize.value = 40.dp
                circleThickness.value = 3.dp
                color.value = Color.Black
            } else {
                checkedText.value = "unChecked"
                circleSize.value = 20.dp
                circleThickness.value = 2.dp
                color.value = Color.Gray
            }
        }) {
    Box(
        modifier = Modifier
            .clip(CircleShape)
            .size(circleSize.value)
            .background(color.value)
            .padding(circleThickness.value)
            .clip(CircleShape)
            .background(Color.White)  ,
        contentAlignment = Alignment.Center
    ) {
        if(isChecked.value){
            Icon(imageVector = Icons.Default.Check, contentDescription = "")
        }
     }

    Text(
        text = checkedText.value,
        color = color.value,
        fontSize = 20.sp,
        fontWeight = FontWeight.Medium,
        modifier = Modifier.padding(start = 5.dp)
    )
}

}

Answer 2

我们可以使用动画来使其表现得与默认的类似Checkbox。Modifier.toggleable在顶层使用Row使整个可组合项可点击，并为屏幕阅读器用户创建正确的语义。您可以更改框的形状以获得圆形复选框。

该行的最小高度为 48dp，以符合最小触摸目标尺寸。

为了更好地可视化，此 GIF 中的动画速度已放慢。

@Composable
fun RoundedCornerCheckbox(
    label: String,
    isChecked: Boolean,
    modifier: Modifier = Modifier,
    size: Float = 24f,
    checkedColor: Color = Color.Blue,
    uncheckedColor: Color = Color.White,
    onValueChange: (Boolean) -> Unit
) {
    val checkboxColor: Color by animateColorAsState(if (isChecked) checkedColor else uncheckedColor)
    val density = LocalDensity.current
    val duration = 200

    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = modifier
            .heightIn(48.dp) // height of 48dp to comply with minimum touch target size
            .toggleable(
                value = isChecked,
                role = Role.Checkbox,
                onValueChange = onValueChange
            )
    ) {
        Box(
            modifier = Modifier
                .size(size.dp)
                .background(color = checkboxColor, shape = RoundedCornerShape(4.dp))
                .border(width = 1.5.dp, color = checkedColor, shape = RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            androidx.compose.animation.AnimatedVisibility(
                visible = isChecked,
                enter = slideInHorizontally(animationSpec = tween(duration)) {
                    with(density) { (size * -0.5).dp.roundToPx() }
                } + expandHorizontally(
                    expandFrom = Alignment.Start,
                    animationSpec = tween(duration)
                ),
                exit = fadeOut()
            ) {
                Icon(
                    Icons.Default.Check,
                    contentDescription = null,
                    tint = uncheckedColor
                )
            }
        }
        Text(
            modifier = Modifier.padding(start = 8.dp),
            text = label,
        )
    }
}

像这样使用它：

var checked by remember { mutableStateOf(false) }
RoundedCornerCheckbox(
    label = "Checkbox label",
    isChecked = checked,
    onValueChange = { checked = it },
    modifier = Modifier.padding(12.dp)
)

Answer 3

您可以尝试使其使用带有修饰符内容对齐中心的 Box。并在那里放一个图标。

@Preview
@Composable
fun Check() {
    Box(
        modifier = Modifier
            .clip(CircleShape)
            .size(50.dp)
            .background(Color.Red)
            .padding(5.dp)
            .clip(CircleShape)
            .background(Color.Blue),
        contentAlignment = Alignment.Center
    ) {
        Icon(imageVector = Icons.Default.Check, contentDescription = "")
    }
}