Android Jetpack Compose与Voyager：跨屏幕传递TopBar和导航栏高度

当前使用Jetpack Compose和Voyager开发应用时，遇到内容区域被顶部栏（TopBar）和底部导航栏遮挡的问题，需要跨屏幕传递这两个组件的高度，为内容设置正确的内边距，尤其是使用BottomSheetScaffold的屏幕。

方案1：使用CompositionLocal传递高度（推荐） #

用全局静态State（如MainActivity的companion object）容易引发状态管理问题，更优雅的方式是通过CompositionLocal提供和读取高度值，符合Compose状态管理最佳实践。

步骤1：定义CompositionLocal #

创建用于存放栏高数据的CompositionLocal对象：

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.unit.Dp

data class BarHeights(
    val topBarHeight: Dp = 0.dp,
    val bottomNavHeight: Dp = 0.dp
)

val LocalBarHeights = compositionLocalOf { BarHeights() }

步骤2：在MainActivity中提供高度值 #

修改MainActivity的Content函数，用CompositionLocalProvider包裹Scaffold，同时在顶部栏和底部导航栏的onGloballyPositioned中更新高度并提供给全局：

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun Content() {
    val topBarHeight = remember { mutableStateOf(0.dp) }
    val bottomNavHeight = remember { mutableStateOf(0.dp) }
    
    TabNavigator(HomeTab) {
        CompositionLocalProvider(
            LocalBarHeights provides BarHeights(
                topBarHeight = topBarHeight.value,
                bottomNavHeight = bottomNavHeight.value
            )
        ) {
            Scaffold(
                content = {
                    CurrentTab()
                },
                topBar = {
                    AppBar(
                        title = stringResource(id = R.string.app_name),
                        canGoBack = false,
                        modifier = Modifier.onGloballyPositioned { layoutCoordinates ->
                            topBarHeight.value = layoutCoordinates.size.height.dp
                        }
                    )
                },
                bottomBar = {
                    NavigationBar(
                        modifier = Modifier.onGloballyPositioned { layoutCoordinates ->
                            bottomNavHeight.value = layoutCoordinates.size.height.dp
                        }
                    ) {
                        TabNavigationItem(tab = HomeTab)
                        TabNavigationItem(tab = PackageManagerTab)
                    }
                }
            )
        }
    }
}

步骤3：在屏幕内容中读取高度并设置内边距 #

以PackageManagerScreen的BottomSheetScaffold为例，读取LocalBarHeights的值，为内容区域和底部弹窗设置正确的内边距：

@Composable
fun PackageManagerScreen.Content() {
    val barHeights = LocalBarHeights.current
    
    BottomSheetScaffold(
        sheetContent = {
            // 底部弹窗内容：避开底部导航栏
            Box(modifier = Modifier.padding(bottom = barHeights.bottomNavHeight)) {
                // 弹窗具体内容
            }
        }
    ) { innerPadding ->
        // 主内容区域：叠加Scaffold默认内边距与自定义栏高
        Box(
            modifier = Modifier
                .padding(
                    top = barHeights.topBarHeight + innerPadding.calculateTopPadding(),
                    bottom = barHeights.bottomNavHeight + innerPadding.calculateBottomPadding()
                )
        ) {
            // 主内容具体布局
        }
    }
}

方案2：兼容原有全局State的优化方案（不推荐） #

如果需要保留原有全局State的写法，可优化为局部remember状态，避免全局可变状态的副作用：

// 移除MainActivity中的companion object，改用局部remember状态
@Composable
fun Content() {
    val topBarHeight = remember { mutableStateOf(0.dp) }
    val bottomNavHeight = remember { mutableStateOf(0.dp) }
    
    TabNavigator(HomeTab) {
        Scaffold(
            content = {
                // 直接将高度传递给Tab内容
                CurrentTab(topBarHeight = topBarHeight.value, bottomNavHeight = bottomNavHeight.value)
            },
            // 顶部栏、底部导航栏代码不变
        )
    }
}

// 修改Tab的Content函数接收高度参数
object PackageManagerTab : Tab {
    @Composable
    override fun Content(topBarHeight: Dp, bottomNavHeight: Dp) {
        Box() {
            packageManagerScreen.Content(topBarHeight, bottomNavHeight)
        }
    }
}

关键注意点 #

• 布局异步性：onGloballyPositioned会在布局完成后回调，首次布局高度可能为0，依赖State会自动触发重组更新内边距。
• BottomSheet适配：底部弹窗需单独设置底部内边距，避免被底部导航栏遮挡。
• 状态管理：优先使用CompositionLocal，减少全局可变状态带来的耦合与潜在bug。

内容的提问来源于stack exchange，提问作者Alexandru Nitan