底栏内部填充将外部填充添加到可组合项

Question

当尝试防止 Jetpack Compose 中的底部栏导致屏幕内容重叠时，我在添加内部填充后发现了这种奇怪的行为：

代码：

 Scaffold(
        topBar = {
            
        },
        bottomBar = {
          
        },
    ) { innerPadding->
        Box(
            modifier =
                Modifier.padding(innerPadding),
        ) {
            RootNavigationGraph(
                navController,
            )

有什么想法吗？我不知道为什么要在可组合项上方添加额外的填充

Answer 1

如果有人适合你，请尝试以下两个代码。

Scaffold(
topBar = { /* optional */ },
bottomBar = { /* Your bottom bar content */ },

) { 内部填充 -> 盒子（ modifier = Modifier.padding(bottom = innerPadding.calculateBottomPadding()), // 仅应用底部填充 ）{ 根导航图（navController） } }

或者下面的代码，

Scaffold(
topBar = { /* optional */ },
bottomBar = { /* Your bottom bar content */ },

) { 内部填充 -> 盒子（ 修饰符 = 修饰符 .padding(innerPadding) .consumeWindowInsets(innerPadding), // 如果需要，调整系统插图 ）{ 根导航图（navController） } }