如何在 Compose 中使底部导航背景颜色随着海拔高度变浅？

Question

在XML中我们有material3底部导航栏样式。它的颜色是通过使用

surface

颜色和

elevation = 3dp

来实现的。因此，在 XML 中，较高的海拔意味着较浅的背景颜色。

我正在尝试在 Compose 中实现相同的行为。但看起来 Compose 中的

elevation

并没有改变底部导航的颜色，只是添加了阴影。那么我们是否可以在 Compose 中应用相同的行为，或者唯一的方法是在

Color.kt

中添加单独的底部导航颜色？

BottomNavigation(
            modifier = Modifier.heightIn(80.dp),
            backgroundColor = MaterialTheme.colorScheme.surface,
            elevation = 3.dp
        )

Answer 1

您可能没有使用material3库，而是使用旧的库。 Material3 中没有

BottomNavigation

可组合项，它被称为

NavigationBar

并且它有

tonalElevation

参数而不是

elevation

可以满足您的需求。

Answer 2

在您的代码片段之后，有一种变轻的方法jetpack compose UI中的颜色，这适用于整个项目中的任何颜色

MaterialTheme.colorScheme.surface.copy(alpha=0.2f)

BottomNavigation(
            modifier = Modifier.heightIn(80.dp),
            backgroundColor = MaterialTheme.colorScheme.surface.copy(alpha=0.2f),//here the modification
            elevation = 3.dp
        )