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

Posted 2023-04-13

【中文标题】底部导航栏与 Jetpack Compose 中的屏幕内容重叠

【英文标题】：Bottom Nav Bar overlaps screen content in 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)
    

【参考方案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)
  ) ...