我们如何修复透明/半透明可组合项上的材质阴影故障？

如果您还不知道，Android 的材质阴影存在一个缺陷，即材质设计及其表面、照明和高度概念带来的阴影。另外，如果您不知道，Compose 使用许多与View框架，包括那些负责所述阴影的框架，因此它具有与View是的，至少现在是这样。

^{Card(), FloatingActionButton(), ExtendedFloatingActionButton(), and Surface() shown with and without translucent backgrounds.}

For reasons I won't get into here,^* I don't believe that there is any proper fix for this – i.e., I don't think that the platform offers any method or configuration by which to clip out or otherwise remove that artifact – so we're left with workarounds. Additionally, a main requirement is that the shadows appear exactly as the platform ones normally would, so any method that draws shadows with other techiques, like a uniform gradient or blur or whatnot, are not acceptable.

鉴于此，我们能否在 Compose 中创建一个强大的、普遍适用的解决方案？

我个人采取了一种总体方法，即禁用原始阴影并在其位置绘制剪切的复制品。 （我意识到，简单地在它上面打一个洞并不是阴影实际工作的方式，但这似乎是主要预期的效果。）我在下面的答案中分享了一个 Compose 版本的示例，但主要动机这个问题是为了在将其放入图书馆之前检查是否有更好的想法。

我确信我的示例中存在可以改进的技术细节，但我主要对根本不同的方法或建议感到好奇。例如，我对以某种方式使用不感兴趣drawBehind() or Canvas()相反，做本质上相同的事情，或者重构参数只是为了将内容放入其中，等等。我更多地思考的是：

• 您能否设计一些其他（性能更高）的方法来修剪该伪像，而无需创建和剪切单独的阴影对象？和Views，我发现的唯一方法就是画View两次，在一次绘制中剪切内容，在另一次绘制中禁用阴影。不过，考虑到开销，我最终决定不这样做。

• 这可以提取到Modifier和扩展，类似于*GraphicsLayerModifiers and shadow()/graphicsLayer()？我还没有完全理解 Compose 的所有概念和功能，但我不这么认为。

• 有没有其他方法可以使其普遍适用，而不需要额外的接线？我的示例中的阴影对象取决于三个可选参数以及目标可组合项的默认值，除了用另一个可组合项包装目标之外，我想不出任何方法来获取这些参数。

^{* Those reasons are outlined in my question here https://stackoverflow.com/q/70227950.}

我们将使用FloatingActionButton()对于这个本地示例，因为它支持我们需要考虑的几乎所有选项，但这应该适用于任何可组合项。为了方便起见，我用这个解决方案包装了几个更常见的解决方案，并将它们组装在这个 GitHub 要点 https://gist.github.com/zed-alpha/3dc931720292c1f3ff31fa6a130f52cd，如果你想尝试一些除了FloatingActionButton().

我们希望我们的包装器 Composable 充当直接替代品，因此它的参数列表和默认值是从FloatingActionButton():

@Composable
fun ClippedShadowFloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable () -> Unit
) {
    Layout(
        {
            ClippedShadow(
                elevation = elevation.elevation(interactionSource).value,
                shape = shape,
                modifier = modifier
            )
            FloatingActionButton(
                onClick = onClick,
                modifier = modifier,
                interactionSource = interactionSource,
                shape = shape,
                backgroundColor = backgroundColor,
                contentColor = contentColor,
                elevation = FloatingActionButtonDefaults.elevation(0.dp, 0.dp, 0.dp, 0.dp),
                content = content
            )
        },
        modifier
    ) { measurables, constraints ->
        require(measurables.size == 2)

        val shadow = measurables[0]
        val target = measurables[1]

        val targetPlaceable = target.measure(constraints)
        val width = targetPlaceable.width
        val height = targetPlaceable.height

        val shadowPlaceable = shadow.measure(Constraints.fixed(width, height))

        layout(width, height) {
            shadowPlaceable.place(0, 0)
            targetPlaceable.place(0, 0)
        }
    }
}

我们基本上是在包装一个FloatingActionButton()以及我们的副本影子可组合项Layout()针对设置进行了优化。大多数参数原封不动地传递给包装的FloatingActionButton()除了elevation，我们将其归零以禁用固有阴影。相反，我们直接指向我们的ClippedShadow()适当的原始高程值​​，此处使用以下公式计算FloatingActionButtonElevation and InteractionSource参数。更简单的可组合项，例如Card()将具有无状态海拔值Dp可以直接通过。

ClippedShadow()本身就是另一种习俗Layout()，但没有内容：

@Composable
fun ClippedShadow(elevation: Dp, shape: Shape, modifier: Modifier = Modifier) {
    Layout(
        modifier
            .drawWithCache {
                // Naive cache setup similar to foundation's Background.
                val path = Path()
                var lastSize: Size? = null

                fun updatePathIfNeeded() {
                    if (size != lastSize) {
                        path.reset()
                        path.addOutline(
                            shape.createOutline(size, layoutDirection, this)
                        )
                        lastSize = size
                    }
                }

                onDrawWithContent {
                    updatePathIfNeeded()
                    clipPath(path, ClipOp.Difference) {
                        [email protected] /cdn-cgi/l/email-protection()
                    }
                }
            }
            .shadow(elevation, shape)
    ) { _, constraints ->
        layout(constraints.minWidth, constraints.minHeight) {}
    }
}

我们只需要它的影子和Canvas访问，我们通过两个简单的方法获得Modifier扩展。drawWithCache()让我们保持简单Path我们使用缓存来剪辑和恢复整个内容绘制，以及shadow()这是不言自明的。将此可组合项分层放置在目标后面，并禁用其自身的阴影，我们就可以获得所需的效果：

正如问题中，前三个是Card(), FloatingActionButton(), and ExtendedFloatingActionButton()，但包含在我们的修复中。为了证明InteractionSource/elevation 重定向按预期工作，这个简短的动图 https://i.stack.imgur.com/48QVo.gif显示两个FloatingActionButton()并排具有完全透明的背景；右边的已经应用了我们的修复。

对于上面修复图像中的第四个示例，我们使用了独奏ClippedShadow()，只是为了说明它也可以单独工作：

ClippedShadow(
    elevation = 10.dp,
    shape = RoundedCornerShape(10.dp),
    modifier = Modifier.size(FabSize)
)

就像常规的可组合项一样，它应该适用于任何Shape这对于当前 API 级别有效。任意凸Paths 适用于所有相关版本，从 API 级别 29 (Q) 开始，凹面版本也适用。