如何消除同elevation粘性顶栏与可折叠栏的分割阴影？

出现这个问题的核心原因是：TopAppBar内部已经自带了一个Surface组件，当你在它下方再手动添加一个Surface时，两个独立Surface的阴影在交界处会发生叠加——尤其是暗黑模式下，阴影颜色与背景的对比度更高，叠加后就会呈现出一道浅色的分割线，哪怕你设置了相同的elevation值。

下面提供两种优雅的解决方案：

方案一：用单个Surface包裹两个栏（推荐） #

把TopAppBar和可折叠栏放在同一个Surface里，让整体共享一个阴影，从根源避免阴影叠加的问题。初始状态下设置整体elevation为4.dp，滚动时再单独给TopAppBar套一个高elevation的Surface即可。

Column(modifier = Modifier.fillMaxWidth()) {
    // 初始状态：整体共享一个阴影
    Surface(elevation = 4.dp) {
        Column {
            TopAppBar(
                navigationIcon = { IconButton({}) {} },
                title = { Text(text = "Sticky top app bar") },
                elevation = 0.dp, // 关闭TopAppBar自身的阴影
            )
            // 可折叠栏内容
            Surface(
                modifier = Modifier.fillMaxWidth(),
                elevation = 0.dp, // 关闭自身阴影，继承外层Surface的阴影
            ) {
                Text(text = "Collapsible top app bar")
            }
        }
    }
}

方案二：统一阴影处理，取消组件自身阴影 #

如果需要保持两个栏的独立结构，可以给整个父布局添加阴影，同时关闭两个组件自身的elevation设置：

Column(
    modifier = Modifier.fillMaxWidth()
        .shadow(4.dp) // 给整个栏组添加统一阴影
) {
    TopAppBar(
        navigationIcon = { IconButton({}) {} },
        title = { Text(text = "Sticky top app bar") },
        elevation = 0.dp, // 取消自身阴影
    )
    Surface(
        modifier = Modifier.fillMaxWidth(),
        elevation = 0.dp, // 取消自身阴影
    ) {
        Text(text = "Collapsible top app bar")
    }
}

滚动交互时的调整 #

当触发滚动需要让TopAppBar提升elevation时，只需要把TopAppBar单独包裹在一个高elevation的Surface里，同时隐藏或降低可折叠栏的阴影即可：

// 滚动后的状态示例
Column(modifier = Modifier.fillMaxWidth()) {
    // TopAppBar单独提升elevation
    Surface(elevation = 8.dp) {
        TopAppBar(
            navigationIcon = { IconButton({}) {} },
            title = { Text(text = "Sticky top app bar") },
            elevation = 0.dp,
        )
    }
    // 可折叠栏滑至下方，取消或降低阴影
    Surface(
        modifier = Modifier.fillMaxWidth(),
        elevation = 0.dp,
    ) {
        Text(text = "Collapsible top app bar")
    }
}

内容的提问来源于stack exchange，提问作者Ryan