gpt4 book ai didi

how can we create a circular checkbox in jetpack compose?(如何在Jetpack Compose中创建圆形复选框?)

转载 作者:bug小助手 更新时间:2023-10-25 13:35:52 26 4
gpt4 key购买 nike



It is usually possible to assign different shapes to a composable using a modifier, but this is not done in this composable.

通常可以使用修改器为可组合对象指定不同的形状,但在此可组合对象中不能做到这一点。


I want the part marked in the image to be a circle

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


enter image description here


You can see the code I wrote below

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


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

更多回答
优秀答案推荐

In order to achieve a circular checkbox with a native experience, and retain the body color and click ripple effect, and keep it simple, IconButton is the best choice.

为了实现具有原生体验的圆形复选框,并保留主体颜色和点击涟漪效果,并保持简单,IconButton是最佳选择。



@Composable
fun CircleCheckbox(selected: Boolean, enabled: Boolean = true, onChecked: () -> Unit) {

val color = MaterialTheme.colorScheme
val imageVector = if (selected) Icons.Filled.CheckCircle else Icons.Outlined.Circle
val tint = if (selected) color.primary.copy(alpha = 0.8f) else color.white.copy(alpha = 0.8f)
val background = if (selected) color.white else Color.Transparent

IconButton(onClick = { onChecked() },
modifier = Modifier.offset(x = 4.dp, y = 4.dp),
enabled = enabled) {

Icon(imageVector = imageVector, tint = tint,
modifier = Modifier.background(background, shape = CircleShape),
contentDescription = "checkbox")
}
}



enter image description here



The code below is from CheckboxImpl composable

以下代码来自CheckboxImpl Composable


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 will always draw a rounded rectangle. It can't be be customised.

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


To implement the circular checkbox you need to write a custom Composable and draw Circle instead of Rectangle. You can use RadioButton and CheckboxImpl composable as reference.

要实现圆形复选框,您需要编写一个定制的Composable,并绘制圆形而不是矩形。您可以使用RadioButton和CheckboxImpl Composable作为参考。



@Composable
fun CircularCheckbox(
modifier: Modifier = Modifier,
checked: Boolean,
onCheckedChange: (Boolean) -> Unit
) {
Box(
modifier = modifier
.size(24.dp)
.background(
color = if (checked) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f),
shape = CircleShape
)
.clickable { onCheckedChange(!checked) },
contentAlignment = Alignment.Center
) {
if (checked) {
Icon(
imageVector = Icons.Default.Check,
contentDescription = null,
tint = Color.White,
modifier = Modifier.size(16.dp)
)
}
}
}

更多回答

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com