如何在Jetpack Compose中为TopAppBar设置渐变背景

你遇到的多余阴影本质是TopAppBar默认自带的elevation（高度）投射的阴影，将背景设为透明后阴影会直接透出，不属于文本自身的阴影效果，无需完全自定义TopAppBar组件，只需补充参数关闭默认elevation即可：

Material 2 版本实现代码 #

TopAppBar(
    modifier = Modifier.background(
        Brush.horizontalGradient(
            colors = listOf(
                Color.Red,
                Color.Green
            )
        )
    ),
    title = { Text("UI Components") },
    backgroundColor = Color.Transparent,
    // 关闭默认高度，移除阴影
    elevation = 0.dp
)

Material 3 版本实现代码 #

M3版本的TopAppBar拆分了阴影高度和色调高度，需要同时将两个参数设为0：

SmallTopAppBar(
    modifier = Modifier.background(
        Brush.horizontalGradient(
            colors = listOf(Color.Red, Color.Green)
        )
    ),
    title = { Text("UI Components") },
    colors = TopAppBarDefaults.smallTopAppBarColors(
        containerColor = Color.Transparent
    ),
    elevation = TopAppBarDefaults.smallTopAppBarElevation(
        shadowElevation = 0.dp,
        tonalElevation = 0.dp
    )
)

修改后即可正常实现无多余阴影的渐变背景TopAppBar效果。

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