如何使Jetpack Compose复选框四舍五入-移动开发问题

how to make Jetpack compose checkbox rounded(如何使Jetpack Compose复选框四舍五入)

本文介绍了如何使Jetpack Compose复选框四舍五入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在JetPackCompose中创建四舍五入的复选框，如this。我尝试在其上使用可组合的形状，但不起作用。

推荐答案

我正在寻找如何做您问的相同的事情，您的问题帮助了我的旅程，所以我分享这是公平的。加上一些动画，你就是我的朋友了。

使用方框和图标制作圆形图标

 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(
    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.用变量替换您想要的任何内容，以便您可以自定义 IT

@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添加到行中，基本上使其成为切换(在真和假之间)变量的可点击项，在本例中，变量是Checked。然后只需根据需要自定义变量

@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复选框四舍五入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！