Jetpack Compose Surface 点击波纹不会根据其形状进行裁剪？

问题描述

当我点击涟漪效应传播时，我有 3 个表面，可以在 gif 中看到，而没有考虑表面的形状。

创建于

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

我添加了 Modifier.clipToBounds() 来检查它是否可以使用它，但无论有没有它都不起作用。

解决方法

撰写版本 1.0.0-beta08 的更新：

使用接受 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

文档：https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Surface(kotlin.Function0,kotlin.Function0)

---

尝试在 Modifier.clickable 之前应用 Modifier.clip(shape: Shape)。

在撰写中使用修饰符时，顺序很重要。首先出现的修饰符元素将首先被应用。 (documentation)