Jetpack Compose文本重叠模拟器工具栏问题求助

方案1：使用Scaffold组件（推荐） #

Scaffold会自动处理系统状态栏、顶部导航栏的内边距，让内容避开这些系统UI区域，是最规范的解决方式。

如果需要自定义顶部导航栏：

@Composable
fun MainScreen() {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("我的应用") })
        }
    ) { innerPadding ->
        Column(modifier = Modifier.padding(innerPadding)) {
            Text("这是不会与工具栏重叠的文本")
            // 其他布局内容
        }
    }
}

如果不需要顶部导航栏，仅需避开状态栏：

@Composable
fun MainScreen() {
    Scaffold { innerPadding ->
        Column(modifier = Modifier.padding(innerPadding)) {
            Text("这是不会与状态栏重叠的文本")
        }
    }
}

方案2：手动添加状态栏内边距 #

若不想使用Scaffold，可以直接通过WindowInsets获取状态栏的尺寸，手动给布局添加内边距：

@Composable
fun MainScreen() {
    val statusBarInsets = WindowInsets.statusBars
    Column(
        modifier = Modifier
            .padding(statusBarInsets.asPaddingValues())
    ) {
        Text("这是不会重叠的文本")
    }
}

问题原因 #

默认情况下，Column/Row不会自动识别系统状态栏（模拟器顶部工具栏属于系统UI）的空间，会从屏幕最顶端开始绘制内容，从而导致重叠。上述两种方式都能让布局自动避开系统UI区域，解决重叠问题。

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