底部导航条与Jetpack Compose中的屏幕内容重叠

Question

我有一个底部导航栏，它在脚手架的bottomBar中调用
每个屏幕都包含一个懒散列，显示一组图像
由于某些原因，当我完成滚动时，底部导航栏与项目列表的下部重叠<我怎样才能解决这个问题？

这里是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)
    }
}

Answer 1

你不再需要做任何计算。在脚手架内容中，做：

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

Answer 2

遵循ianhannibalake的答案及其评论，只是为了节省您几分钟。代码如下：

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

Answer 3

根据Scaffold的API定义，您的内部内容（您的BottomNavScreensController所在的尾随lambda）被赋予一个PaddingValures对象，该对象为您的顶部应用程序栏、底部栏等提供正确的填充量。

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

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

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