如何移除Jetpack Compose预览函数中的默认顶部栏？

要移除预览里的默认顶部栏，分两种常见场景处理：

场景1：默认顶部栏来自代码中的Scaffold组件 #

如果你的预览代码里使用了Scaffold，且默认设置了topBar参数，直接修改该参数即可：

• 若要替换为自定义顶部栏，将topBar的值换成你的自定义组件：

@Preview
@Composable
fun CustomTopBarPreview() {
    YourAppTheme {
        Scaffold(
            topBar = { 
                // 自定义顶部栏实现
                Row(
                    modifier = Modifier.fillMaxWidth().height(56.dp).background(Color.Blue),
                    horizontalArrangement = Arrangement.SpaceBetween,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text("自定义标题", color = Color.White, modifier = Modifier.padding(start = 16.dp))
                    Icon(Icons.Filled.Menu, contentDescription = "菜单", tint = Color.White, modifier = Modifier.padding(end = 16.dp))
                }
            }
        ) { innerPadding ->
            // 页面内容，记得使用innerPadding避免被顶部栏遮挡
            Text("页面内容", modifier = Modifier.padding(innerPadding))
        }
    }
}

• 若不需要任何顶部栏，直接将topBar设为null：

@Preview
@Composable
fun NoTopBarPreview() {
    YourAppTheme {
        Scaffold(topBar = null) { innerPadding ->
            Text("无顶部栏的页面", modifier = Modifier.padding(innerPadding))
        }
    }
}

场景2：预览模板自带的默认顶部栏 #

如果是新建Compose项目时模板自动生成的预览代码带了默认TopAppBar，直接删除或修改Scaffold的topBar参数即可，操作方式和上面一致。

注意：如果你的页面内容不需要Scaffold组件，也可以直接去掉Scaffold，直接渲染页面内容，这样自然不会有任何顶部栏。

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