为什么Jetpack Compose的TopAppBar会裁剪底部默认阴影？

问题描述 #

期望AppBar底部显示默认阴影，但初始观察认为阴影被裁剪，对应效果如下图：

LayoutInspector捕获的视图层级如下：

实现代码如下：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color.Cyan,
                ) {
                    Box {
                        TopAppBar(
                            title = { Text("AppBar title") }
                        )
                    }
                }
            }
        }
    }
}

后续补充更新：阴影实际正常工作，只是默认阴影视觉效果极不明显，验证效果如下图：
#

原因说明 #

Jetpack Compose 中 Material 3 版本的TopAppBar默认阴影高度仅为4dp，当AppBar背景色和下层内容背景色对比度较低时，阴影会非常不明显，容易被误认为被裁剪或未生效。
代码使用逻辑没有错误，无需调整布局结构。

强化阴影效果的解决方案 #

如果需要更明显的阴影效果，可显式调整TopAppBar的elevation参数：

Material 3 写法 #

TopAppBar(
    title = { Text("AppBar title") },
    elevation = TopAppBarDefaults.topAppBarElevation(
        defaultElevation = 8.dp // 数值越大阴影越明显，可按需调整
    )
)

Material 2 写法 #

TopAppBar(
    title = { Text("AppBar title") },
    elevation = 8.dp
)

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