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
我希望在图像中标记的部分是一个圆圈
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")
}
}
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)
)
}
}
}
更多回答
我是一名优秀的程序员,十分优秀!