两个具有相同标高的相邻可组合项呈现出分隔阴影

Question

我想在粘性顶栏下方展示一个可折叠栏。在可折叠栏完全展开的初始状态下，我希望两个栏看起来位于完全相同的高度。然后，当可折叠栏在滚动时折叠时，粘性栏应向上提升，并且可折叠栏应看起来好像在粘性顶部栏下方滑动。

我看到的问题是在初始状态下，在黑暗模式下两个条之间有一个浅色分隔阴影，即使它们具有完全相同的

elevation

值。

相关代码（为了简洁省略了滚动逻辑）：

Column(modifier = Modifier.fillMaxWidth()) {
    TopAppBar(
        navigationIcon = {
            IconButton()
        },
        title = {
            Text(text = "Sticky top app bar")
        },
        elevation = 4.dp,
    )
    Surface(
        modifier = Modifier.fillMaxWidth(),
        elevation = 4.dp,
    ) {
        Text(text = "Collapsible top app bar")
    }
}

有人熟悉如何避免两个条之间的分隔阴影吗？

Answer 1

您可以使用

Surface

可组合项 (material3) 并更改

shadowElevation

值。

Surface(shadowElevation = 1.dp)

您应该声明

shadowElevation

并在滚动事件上更改其值。