Jetpack Compose BottomBar在底部导航

Question

我在Jetpack撰写中通过Scaffold实现了BottomBar。

它可以很好的工作在智能手机与手势导航。但是当启用旧版底部按钮时，重叠的是我的BottomBar。

屏幕截图

我的代码：

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),
        ) {
    ...

Answer 1

使用Compose的BottomAppBar作为Column()的父级，因为它具有内置的属性来显示添加到系统导航抽屉的视图。示例：

    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),
            ) {

            }
        }.....
    }

样本图像：-

​

​

Answer 2

您可以将Modifier.navigationBarsPadding()用于Scaffold或所需的任何匹配父组件。