[英]Jetpack Compose – BottomBar is under Bottom Navigation
I've implemented BottomBar via Scaffold in Jetpack Compose.我已经通过 Jetpack Compose 中的 Scaffold 实现了 BottomBar。
It works fine with a smartphone with gesture navigation.它适用于带有手势导航的智能手机。 But when legacy bottom buttons are enabled, the overlap my BottomBar.
但是,当启用旧版底部按钮时,我的 BottomBar 会重叠。
My code:我的代码:
Scaffold(
bottomBar = {
BottomMenu()
}
) { innerPadding ->
Surface(
color = AppTheme.colors.background.primary,
modifier = Modifier
.fillMaxSize()
) {
Column(
modifier = Modifier
.verticalScroll(rememberScrollState())
.padding(bottom = innerPadding.calculateBottomPadding())
) {
MyContent()
}
}
}
BottomMenu():底部菜单():
Column(
modifier = Modifier
.fillMaxWidth()
.background(AppTheme.colors.background.secondary)
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(AppTheme.colors.background.primary)
)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = 8.dp),
) {
...
Use Compose's BottomAppBar as parent of Column() as it has inbuilt property to show view accroding to System navigation drawer.使用 Compose 的 BottomAppBar 作为 Column() 的父级,因为它具有内置属性来显示根据系统导航抽屉的视图。 Example:
例子:
BottomAppBar(
cutoutShape = RoundedCorner(10.dp),
elevation = 0.dp,
contentColor = "bottomContentColor",
backgroundColor = "bottomBarColor"
) {
Column(
modifier = Modifier
.fillMaxWidth()
.background(AppTheme.colors.background.secondary)
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(AppTheme.colors.background.primary)
)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = 8.dp),
) {
}
}.....
}
Sample Image:-示例图片:-
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.