[英]Jetpack Compose Surface click ripple is not clipped based on shape?
I have 3 Surfaces as can be seen in gif when i click ripple effect propagates without taking the shapes of Surfaces into consideration.我有 3 个表面,如 gif 中所示,当我单击涟漪效应传播时没有考虑表面的形状。
Which are created with是用什么创建的
@Composable
fun SurfaceClickPropagationExample() {
// Provides a Context that can be used by Android applications
val context = AmbientContext.current
// 🔥 Offset moves a component in x and y axes which can be either positive or negative
// 🔥🔥 When a component inside surface is offset from original position it gets clipped.
Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.clipToBounds()
.clickable(onClick = {})
) {
Surface(
modifier = Modifier
.preferredSize(150.dp)
.padding(12.dp)
.clickable(onClick = {
})
.clipToBounds(),
elevation = 10.dp,
shape = RoundedCornerShape(10.dp),
color = (Color(0xFFFDD835))
) {
Surface(
modifier = Modifier
.preferredSize(80.dp)
.clipToBounds()
.offset(x = 50.dp, y = (-20).dp)
.clickable(onClick = {
}),
elevation = 12.dp,
shape = CircleShape,
color = (Color(0xFF26C6DA))
) {
}
}
Surface(
modifier = Modifier
.preferredSize(110.dp)
.padding(12.dp)
.offset(x = 110.dp, y = 20.dp)
.clickable(onClick = {}),
shape = CutCornerShape(10.dp),
color = (Color(0xFFF4511E)),
elevation = 8.dp
) {}
}
}
I added Modifier.clipToBounds()
to check if it works with it, but it does not work with or without it.我添加了
Modifier.clipToBounds()
来检查它是否适用于它,但无论有没有它都不起作用。
Update for compose version 1.0.0-beta08:撰写版本 1.0.0-beta08 的更新:
Use the new experimental overload of Surface that accepts onClick.使用接受 onClick 的 Surface 的新实验重载。
@ExperimentalMaterialApi
@Composable
fun Surface(
onClick: () -> Unit,
modifier: Modifier = Modifier,
shape: Shape = RectangleShape,
color: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(color),
border: BorderStroke? = null,
elevation: Dp = 0.dp,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
indication: Indication? = LocalIndication.current,
enabled: Boolean = true,
onClickLabel: String? = null,
role: Role? = null,
content: () -> Unit
): @ExperimentalMaterialApi @Composable Unit
Documentation: https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Surface(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)文档: https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Surface(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape, androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,androidx。 compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)
Try applying Modifier.clip(shape: Shape)
before Modifier.clickable
.尝试在 Modifier.clickable 之前应用
Modifier.clickable
Modifier.clip(shape: Shape)
。
When using Modifiers in compose, the order matters.在撰写中使用修饰符时,顺序很重要。 Modifier elements that appear first will be applied first.
首先出现的修饰符元素将首先应用。 ( documentation )
( 文档)
I was writing this answer when both Surface
and Card
layouts with the onClick
parameter are experimental.当带有
onClick
参数的Surface
和Card
布局都是实验性的时,我正在写这个答案。
If you don't want to use experimental components, you can try wrapping your view inside a Button
component like this:如果您不想使用实验性组件,可以尝试将视图包装在
Button
组件中,如下所示:
Button(
onClick = { /* TODO to handle */ },
shape = /* your shape */,
colors = ButtonDefaults.buttonColors(backgroundColor = /* your color */),
elevation = elevation(defaultElevation = 0.dp, pressedElevation = 0.dp)
) {
/* Here you can paste your parent layout like Box, Column, or Row,
but set max size and horizontal alignment to override the default button's center horizontal alignment */
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.Start
) {
// other stuff there
}
}
Here is the result:结果如下:
I'm not too fond of the ripple effect of Surface.我不太喜欢 Surface 的涟漪效应。
You can also clip ripple effect while using clickable
modifier:您还可以在使用
clickable
修改器时剪辑波纹效果:
Row(modifier = Modifier.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(bounded = true),
) {
onClick(filter)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.