底部导航栏与 Jetpack Compose 中的屏幕内容重叠答案

【问题标题】：Bottom Nav Bar overlaps screen content in Jetpack Compose底部导航栏与 Jetpack Compose 中的屏幕内容重叠
【发布时间】：2021-06-08 22:02:53
【问题描述】：

我有一个BottomNavBar，它在Scaffold 的bottomBar 中被调用。
每个屏幕都包含一个LazyColumn，它显示一堆图像。
出于某种原因，当我完成滚动时，BottomNavBar 与项目列表的下部重叠。
我该如何解决这个问题？

这里是MainActivity的设置内容

SetContent{
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "tartufozon") },
                actions = {
                    IconButton(onClick = { Timber.d("Mail clicked") }) {
                        Icon(Icons.Default.Email, contentDescription = null)
                    }
                }
            )
        },
        bottomBar = {
            BottomNavBar(navController = navController)
        }
    ) {
    BottomNavScreensController(navController = navController)
    }
}

【问题讨论】：

标签： android android-jetpack android-jetpack-compose

【解决方案1】：

根据API definition for Scaffold，您的内部内容（您的BottomNavScreensController 中的尾随lambda）被赋予一个PaddingValues 对象，该对象为您的顶部应用栏、底部栏、等等

现在，您根本没有引用该填充，因此，您的内容没有被填充。这就是导致重叠的原因。

您可以在BottomNavScreensController 周围添加Box 以应用填充，或者将填充直接传递到您的BottomNavScreensController 以便每个单独的屏幕都可以正确应用填充；任一解决方案都有效。

Scaffold(
    topBar = {
      //
    },
    bottomBar = {
        //
    }
    ) { innerPadding ->
        // Apply the padding globally to the whole BottomNavScreensController
        Box(modifier = Modifier.padding(innerPadding)) {
            BottomNavScreensController(navController = navController)
        }
    }
}

【讨论】：

Box( 代码 sn-p 中缺少关闭。
在最新版本中，这对我有用：innerPadding.calculateBottomPadding()
@ianhanniballake 我忘了你的回答对我有多少帮助
之前，我们将硬编码的值放入其中，例如：76.dp，但这样就不再需要手动计算使用Scaffold 的所有其他元素。谢谢！

【解决方案2】：

按照ianhanniballake 的回答及其cmets，只是为了节省您几分钟。代码类似于：

Scaffold(
    topBar = {
      //
    },
    bottomBar = {
        //
    }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(
          PaddingValues(0.dp, 0.dp, 0.dp, innerPadding.calculateBottomPadding()) {
            BottomNavScreensController(navController = navController)
        }
    }
}

【讨论】：

【解决方案3】：

Scaffold(
    bottomBar = {
       BottomNavigationBar(navController = navController)
   }
) { innerPadding ->
      Box(modifier = Modifier.padding(innerPadding)) {
               DestinationsNavHost(
                  navGraph = NavGraphs.root,
                  navController = navController,
                  engine = navHostEngine
                )
         }
}

【讨论】：

【解决方案4】：

您不再需要进行任何计算。在脚手架内容中，执行：

content = { padding ->
  Column(
    modifier = Modifier.padding(padding)
  ) {...

【讨论】：