Question

我有一个 BottomNavBar，它在 bottomBar 的 Scaffold 内被调用，每个屏幕都包含一个 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)
            }
}

Answer 1

根据 API definition for Scaffold，您的内部内容（包含 BottomNavScreensController 的尾随 lambda）被赋予一个 PaddingValues 对象，该对象为您的顶部提供适量的填充应用栏、底栏等

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

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

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

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

1 个答案: