嘿，伙计们，我正在做jetpack compose中的背景 Select 器.我问了不同的问题，关于背景点击question.我注意到当我使用
indication = LocalIndication.current
在我的Modifier.clickable里面，当我试着点击它时，它显示出非常不同的深色，这是我不想要的.你可以在这video登记.当我改成
indication = rememberRipple(true)
它给我展示了我想要展示的正确 colored颜色 .我试着看了document个，明白这有什么用.有人能告诉我这个有什么用吗？并给我解释一下我们可以在indication中使用的不同类型.谢谢
indication indication to be shown when modified element is pressed. Be default, indication from [LocalIndication] will be used. Pass
nullto show no indication, or current value from [LocalIndication] to show theme default
默认情况下，单击某个项目时会产生涟漪效应
你可以从你的主题中获得它，使用rememberRipple，或者你可以写自己的指示
下面的例子和更多在这tutorial for Compose中可用.你可以测试它
有rememberRipple()个
@Composable
fun CustomRipple实例() {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
) {
Box(
contentAlignment = Alignment.Center,
modifier = modifierWithClip
.clickable(
interactionSource = MutableInteractionSource(),
indication = rememberRipple(
bounded = true,
radius = 250.dp,
color = Color.Green
),
onClick = {}
)
) {
Text(
text = "rememberRipple() bounded",
color = Color.White
)
}
Spacer(modifier = Modifier.height(8.dp))
Box(
contentAlignment = Alignment.Center,
// ???? Modifier.clip also bounds ripple
modifier = modifierNoClip
.clickable(
interactionSource = MutableInteractionSource(),
indication = rememberRipple(
bounded = false,
radius = 250.dp,
color = Color.Green
),
onClick = {}
)
) {
Text(
text = "rememberRipple() unbounded",
color = Color.White
)
}
}
}
从你的主题
@Composable
fun CustomRippleTheme实例() {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
) {
CompositionLocalProvider(LocalRippleTheme provides CustomRippleTheme(Color.Cyan)) {
Box(
modifier = modifierWithClip.clickable {},
contentAlignment = Alignment.Center
) {
Text(
text = "Custom Ripple Theme",
color = Color.White
)
}
}
Spacer(modifier = Modifier.height(8.dp))
CompositionLocalProvider(LocalRippleTheme provides CustomRippleTheme(Color.Magenta)) {
Box(
modifier = modifierWithClip.clickable {},
contentAlignment = Alignment.Center
) {
Text(
text = "Custom Ripple Theme",
color = Color.White
)
}
}
}
}
Custom Indication
private class CustomIndication(
val pressColor: Color = Color.Red,
val cornerRadius: CornerRadius = CornerRadius(16f, 16f),
val alpha: Float = 0.5f,
val drawRoundedShape: Boolean = true
) : Indication {
private inner class DefaultIndicationInstance(
private val isPressed: State<Boolean>,
) : IndicationInstance {
override fun ContentDrawScope.drawIndication() {
drawContent()
when {
isPressed.value -> {
if (drawRoundedShape) {
drawRoundRect(
cornerRadius = cornerRadius,
color = pressColor.copy(
alpha = alpha
), size = size
)
} else {
drawCircle(
radius = size.width,
color = pressColor.copy(
alpha = alpha
)
)
}
}
}
}
}
@Composable
override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance {
val isPressed = interactionSource.collectIsPressedAsState()
return remember(interactionSource) {
DefaultIndicationInstance(isPressed)
}
}
}
实例
@Composable
fun CustomIndication实例() {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
) {
val indication1: CustomIndication = CustomIndication(
pressColor = Color.Cyan,
cornerRadius = CornerRadius(30f, 30f),
alpha = .7f
)
val indication2: CustomIndication = CustomIndication(
pressColor = Color.Red,
cornerRadius = CornerRadius(16f, 16f),
alpha = .5f
)
val indication3: CustomIndication = CustomIndication(
pressColor = Color(0xffFFEB3B),
alpha = .4f,
drawRoundedShape = false,
)
Box(
modifierWithClip
.clickable(
interactionSource = MutableInteractionSource(),
indication = indication1,
onClick = {}
),
contentAlignment = Alignment.Center) {
Text(
text = "Custom Indication",
color = Color.White
)
}
Spacer(modifier = Modifier.height(8.dp))
Box(
modifierWithClip
.clickable(
interactionSource = MutableInteractionSource(),
indication = indication2,
onClick = {}
),
contentAlignment = Alignment.Center) {
Text(
text = "Custom Indication",
color = Color.White
)
}
Spacer(modifier = Modifier.height(8.dp))
Box(
Modifier.fillMaxWidth()
.height(200.dp)
.clickable(
interactionSource = MutableInteractionSource(),
indication = indication3,
onClick = {}
),
contentAlignment = Alignment.Center) {
Text(
text = "Custom Indication with Circle Shape",
color = Color.White
)
}
}
}