Jetpack compose - 更改底栏镂空颜色

Jetpack compose - change bottom bar cutout color

如何更改底栏的裁剪颜色?

我知道它采用 MaterialTheme.colors.background 的颜色,但我不想更改所有组件的背景颜色,只更改底部栏的背景颜色。 (图中剪出的白色。)

我尝试了不同的方法,例如只为底部栏设置一个新主题,但这不起作用。

val bottomBarColors = MaterialTheme.colors.copy(background = Color.LightGray)
...

bottomBar = {
    MaterialTheme(
        colors = bottomBarColors,
        typography = MaterialTheme.typography,
        shapes = MaterialTheme.shapes
    ) {
        BottomAppBar(
            cutoutShape = fabShape,
            content = {
                MyBottomNavigation(navController, bottomNavigationItems)
            })
    }
}

解决方案比我想象的要简单。只需在底部栏下方添加一些内容:

bottomBar = {
        Box {
            Spacer(modifier = Modifier.matchParentSize().background(color = Color.Blue))
            BottomAppBar(
                cutoutShape = fabShape,
                content = {
                    MyBottomNavigation(navController, bottomNavigationItems)
                })
    }
}

在您的情况下,您可以将 Modifier.background 应用于 BottomAppBar:

    bottomBar = {
        BottomAppBar(
            modifier = Modifier.background(Color.Red),
            cutoutShape = fabShape) {

            BottomNavigation {
                /* .... */
            }
        }
    }