Jetpack Compose Material3中如何为Scaffold的TopAppBar设置elevation？

Material3版本的TopAppBar移除了原有的elevation参数，要实现阴影效果，你可以试试这几种方案：

方案1：给TopAppBar添加Modifier.shadow #

直接通过Modifier.shadow()给TopAppBar加上阴影，自定义阴影高度和形状即可：

TopAppBar(
    title = { Text("我的顶部栏") },
    modifier = Modifier.shadow(3.dp, shape = RectangleShape),
    navigationIcon = { /* 导航图标 */ },
    actions = { /* 右侧操作按钮 */ }
)

注意shape要和TopAppBar的默认形状匹配，默认是RectangleShape，如果你的TopAppBar有圆角，记得同步修改这里的shape参数。

方案2：用Surface包裹TopAppBar #

借助Material3的Surface组件的elevation属性生成阴影，把TopAppBar放在Surface内部，这样阴影效果会更贴合Material3的设计规范：

Scaffold(
    topBar = {
        Surface(
            elevation = 3.dp,
            color = TopAppBarDefaults.topAppBarColors().containerColor
        ) {
            TopAppBar(
                title = { Text("我的顶部栏") },
                navigationIcon = { /* 导航图标 */ },
                actions = { /* 右侧操作按钮 */ }
            )
        }
    }
) { innerPadding ->
    // 页面内容，使用innerPadding避免被TopAppBar遮挡
}

这里Surface的color要和TopAppBar的容器色保持一致，避免视觉上出现割裂感。

额外说明 #

Material3重构了TopAppBar的实现逻辑，移除了直接的elevation参数，转而推荐通过组件容器（比如Surface）或Modifier的阴影修饰来控制阴影，这样能更灵活地适配不同的设计需求。

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