gpt4 book ai didi

android-jetpack-compose - 我们如何在 jetpack compose 中创建一个圆形复选框?

转载 作者:行者123 更新时间:2023-12-05 00:52:47 95 4
gpt4 key购买 nike

通常可以使用修饰符将不同的形状分配给可组合项,但在此可组合项中没有这样做。

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

enter image description here

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

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

最佳答案

为了实现具有原生体验的圆形复选框,并保留主体颜色和单击波纹效果,并保持简单,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

关于android-jetpack-compose - 我们如何在 jetpack compose 中创建一个圆形复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69187112/

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