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 {
/* .... */
}
}
}
如何更改底栏的裁剪颜色?
我知道它采用 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 {
/* .... */
}
}
}