Jetpack Compose：非TopLevelDestinations页面显示TopAppBar方案

我参考Now In Android应用示例，在NiaApp文件中以内置方式加载TopAppBar。但当创建一个不属于TopLevelDestination的页面路由时，导航到该路由后TopAppBar消失。

截图展示无TopAppBar的页面：

向上滚动时内容会与设备状态栏（显示时间、WiFi信号等）重叠：

为什么这些页面的TopAppBar会消失，如何让它显示出来？

以下是生成该页面的代码：

代码： #

@ExperimentalFoundationApi
@Composable
fun FileScreen(
    onFileClick: (String) -> Unit,
    modifier: Modifier = Modifier,
    fileName: String?,
    viewModel: FileViewModel = hiltViewModel(),

    ) {

    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    FileScreen(modifier = modifier, uiState = uiState)
}

@ExperimentalFoundationApi
@Composable
internal fun FileScreen(
    modifier: Modifier,
    uiState: FileViewModel.FileUiState
) {

    val state = rememberLazyListState()
    Box(
        modifier = modifier,
    ) {
        LazyColumn(
            state = state,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            item {
                Spacer(Modifier.windowInsetsTopHeight(WindowInsets.safeDrawing))
            }
            when (uiState) {
                FileViewModel.FileUiState.Empty -> item { EmptyState() }
                is FileViewModel.FileUiState.Error -> item { ErrorState() }
                is FileViewModel.FileUiState.Loaded -> item {
                    FileToolbar(uiState = uiState)
                    FileResourceCardExpanded()
                }
                FileViewModel.FileUiState.Loading -> item { LoadingState() }
            }
            item {
                Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing))
            }
        }
        val itemsAvailable = 1
        val scrollbarState = state.scrollbarState(
            itemsAvailable = itemsAvailable,
        )
        state.DraggableScrollbar(
            modifier = Modifier
                .fillMaxHeight()
                .windowInsetsPadding(WindowInsets.systemBars)
                .padding(horizontal = 2.dp)
                .align(Alignment.CenterEnd),
            state = scrollbarState,
            orientation = Orientation.Vertical,
            onThumbMoved = state.rememberDraggableScroller(
                itemsAvailable = itemsAvailable,
            ),
        )
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FileToolbar(
    uiState: FileViewModel.FileUiState,
    modifier: Modifier = Modifier,
    showBackButton: Boolean = true,
    onBackClick: () -> Unit = {},
) {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically,
        modifier = modifier
            .fillMaxWidth()
            .padding(bottom = 32.dp),
    ) {
        if (showBackButton) {
            IconButton(onClick = { onBackClick() }) {
                Icon(
                    imageVector = LPlusIcons.ArrowBack,
                    contentDescription = stringResource(
                        id = R.string.core_ui_back,
                    ),
                )
            }
        } else {
            Spacer(modifier = Modifier.width(1.dp))
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FileResourceCardExpanded() {
    Card(
        shape = RoundedCornerShape(16.dp),
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface),
    ) {
        Column {
            Box(
                modifier = Modifier.padding(16.dp),
            ) {
                Column {
                    Spacer(modifier = Modifier.height(12.dp))
                    Row {
                        var title: String = "Title"
                        UniversalisResourceTitle(
                            title,
                            modifier = Modifier.fillMaxWidth((.8f)),
                        )
                        Spacer(modifier = Modifier.weight(1f))
                    }
                    Spacer(modifier = Modifier.height(14.dp))
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Spacer(modifier = Modifier.height(14.dp))
                        var lipsum = LoremIpsum()
                        Text(lipsum.values.last())
                    }
                }
            }
        }
    }
}

原因分析 #

Now In Android的NiaApp里，TopAppBar是和TopLevelDestination绑定的——只有属于顶级目的地的路由，才会触发内置TopAppBar的渲染逻辑。非顶级页面（比如你的FileScreen）不在这个范围内，所以导航过去后TopAppBar不会自动显示。

另外，你当前用Spacer(Modifier.windowInsetsTopHeight(WindowInsets.safeDrawing))处理状态栏间距，这种方式只是添加空白，没有和TopAppBar配合处理系统栏的沉浸效果，导致滚动时内容和状态栏重叠。

解决步骤 #

1. 把自定义Toolbar替换为标准TopAppBar #

你写的FileToolbar只是普通Row组件，需要改成Material3标准的TopAppBar，确保和系统栏交互逻辑一致：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FileToolbar(
    uiState: FileViewModel.FileUiState,
    modifier: Modifier = Modifier,
    showBackButton: Boolean = true,
    onBackClick: () -> Unit = {},
) {
    TopAppBar(
        title = { 
            // 这里添加页面标题，比如从uiState中读取文件名
            if (uiState is FileViewModel.FileUiState.Loaded) {
                Text(uiState.fileName)
            }
        },
        navigationIcon = {
            if (showBackButton) {
                IconButton(onClick = onBackClick) {
                    Icon(
                        imageVector = LPlusIcons.ArrowBack,
                        contentDescription = stringResource(id = R.string.core_ui_back),
                    )
                }
            }
        },
        modifier = modifier.fillMaxWidth()
    )
}

2. 用Scaffold包裹页面内容 #

Now In Android的顶级页面都用Scaffold托管TopAppBar和内容区域，非顶级页面也需要同样处理，它会自动处理TopAppBar与内容的间距，同时配合系统栏沉浸效果：

@ExperimentalFoundationApi
@Composable
internal fun FileScreen(
    modifier: Modifier,
    uiState: FileViewModel.FileUiState,
    onBackClick: () -> Unit, // 添加返回回调
) {
    val state = rememberLazyListState()
    
    // 同步NiaApp的系统栏配置，实现沉浸效果
    SideEffect {
        val window = (LocalContext.current as Activity).window
        WindowCompat.setDecorFitsSystemWindows(window, false)
        window.statusBarColor = Color.Transparent
        // 根据主题配置状态栏图标颜色，和NiaApp保持一致
        WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightStatusBars = 
            MaterialTheme.colorScheme.isLight
    }

    Scaffold(
        topBar = {
            FileToolbar(
                uiState = uiState,
                onBackClick = onBackClick
            )
        },
        modifier = modifier
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            LazyColumn(
                state = state,
                horizontalAlignment = Alignment.CenterHorizontally,
                // 移除原来的safeDrawing Spacer，Scaffold的innerPadding已经处理了系统栏间距
            ) {
                when (uiState) {
                    FileViewModel.FileUiState.Empty -> item { EmptyState() }
                    is FileViewModel.FileUiState.Error -> item { ErrorState() }
                    is FileViewModel.FileUiState.Loaded -> item {
                        FileResourceCardExpanded()
                    }
                    FileViewModel.FileUiState.Loading -> item { LoadingState() }
                }
                item {
                    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing))
                }
            }
            // 滚动条代码保持不变
            val itemsAvailable = 1
            val scrollbarState = state.scrollbarState(
                itemsAvailable = itemsAvailable,
            )
            state.DraggableScrollbar(
                modifier = Modifier
                    .fillMaxHeight()
                    .windowInsetsPadding(WindowInsets.systemBars)
                    .padding(horizontal = 2.dp)
                    .align(Alignment.CenterEnd),
                state = scrollbarState,
                orientation = Orientation.Vertical,
                onThumbMoved = state.rememberDraggableScroller(
                    itemsAvailable = itemsAvailable,
                ),
            )
        }
    }
}

3. 在导航时传递返回回调 #

在配置路由的地方，给FileScreen传入返回上一页的逻辑：

// 示例：在NavHost中配置路由
composable("file/{fileName}") { backStackEntry ->
    val fileName = backStackEntry.arguments?.getString("fileName")
    FileScreen(
        fileName = fileName,
        onBackClick = { navController.popBackStack() },
        onFileClick = { /* 原有点击逻辑 */ }
    )
}

关键说明 #

• Scaffold是Material3的标准页面容器，会自动处理TopAppBar与内容的间距，避免重叠问题。
• 系统栏的沉浸配置要和NiaApp保持一致，才能保证整个App的视觉统一性。
• 移除原来的WindowInsets.safeDrawing Spacer，因为Scaffold的innerPadding已经包含了系统栏间距，重复添加会导致多余空白。

内容的提问来源于stack exchange，提问作者A. Cedano