我正在寻找如何做同样的事情，你问，你的问题帮助我在我的旅程，所以这是唯一公平的，我分享。添加一些动画，你设置我的朋友。
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添加到该行，基本上使其成为一个可单击项，用于切换（true和false之间）变量（在本例中为isChecked）。

@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)
    )
}

}

这是在jetpack compose中创建自定义复选框的方法**

**

val isCheck = remember { mutableStateOf(false) }

    Row {
        Card(
            modifier = Modifier.background(Color.White),
            elevation = 0.dp,
            shape = RoundedCornerShape(6.dp),
            border = BorderStroke(1.5.dp, color = titleColor)
        ) {
            Box(
                modifier = Modifier
                    .size(25.dp)
                    .background(if (isCheck.value) titleColor else Color.White)
                    .clickable {
                        isCheck.value = !isCheck.value
                    },
                contentAlignment = Center
            ) {
                 if(isCheck.value)
                    Icon(Icons.Default.Check, contentDescription = "", tint = Color.White)
            }
        }

        Text(
            modifier = Modifier
                .align(CenterVertically)
                .padding(start = 10.dp),
            text = "I agree with the terms & condition",
        )
    }

你可以试着让它使用框与修饰符内容对齐中心。并把一个图标在那里。

@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 = "")
    }
}

我们可以使用动画使它的行为类似于默认的Checkbox。在顶层Row上使用Modifier.toggleable，整个东西都是可点击的，包括标签。这也为屏幕阅读器用户创建了正确的语义。你可以改变卡片的形状以获得一个圆形复选框。

@Composable
fun PrimaryCheckbox(
    label: String,
    modifier: Modifier = Modifier,
    size: Float = 24f,
    checkedColor: Color = DarkGray,
    uncheckedColor: Color = White,
    checkmarkColor: Color = White,
    onValueChange: () -> Unit
) {

var isChecked by remember { mutableStateOf(false) }
val checkboxColor: Color by animateColorAsState(if (isChecked) checkedColor else uncheckedColor)
val density = LocalDensity.current
val duration = 200

Row(
    modifier = modifier
        .toggleable(
            value = isChecked,
            role = Role.Checkbox,
            onValueChange = {
                isChecked = !isChecked
                onValueChange.invoke()
            }
        )
) {
    Card(
        elevation = 0.dp,
        shape = RoundedCornerShape(4.dp),
        border = BorderStroke(1.5.dp, color = checkedColor),
    ) {
        Box(
            modifier = Modifier
                .size(size.dp)
                .background(checkboxColor),
            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 = checkmarkColor
                )
            }
        }
    }
    Text(
        modifier = Modifier
            .align(Alignment.CenterVertically)
            .padding(start = 8.dp),
        text = label,
    )
}

}

`

@Composable
fun RoundedCornerCheckBox(
    isChecked: Boolean,
    tintColor: Color
) {
    val checkedState = remember { mutableStateOf(isChecked) }
    Box(
        modifier = Modifier
            .padding(12.dp)
            .size(24.dp)
            .border(width = 3.dp, color = Color.Yellow, shape = RoundedCornerShape(8.dp))
            .clip(CircleShape)
            .background(tintColor)
            .clickable { checkedState.value = !checkedState.value }
            .background(if (checkedState.value) Color.Yellow else Color.White),
    ) {
        if (checkedState.value) {
            Icon(
                imageVector = Icons.Default.Check,
                contentDescription = null,
                tint = Color.White
            )
        }
    }
}

`
你的代码是了伙计们