Compose中Scaffold内容被TopBar遮挡问题排查

你的问题核心是没有使用Scaffold自动计算的内边距，导致内容区域和TopBar重叠。

Material3的Scaffold组件在设置topBar后，会自动计算出TopBar的高度，并通过content lambda的参数传递一个PaddingValues对象，目的就是让内容区域避开TopBar的位置。但你不仅没使用这个参数，还添加了@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")注解忽略了警告，直接导致内容从屏幕最顶部开始布局，被TopBar遮挡。

修复步骤 #

1. 移除无用的抑制注解 #

删掉FormContent函数上的@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")，不要忽略这个重要的提示。

2. 传递并应用内边距 #

修改FormContent中的Scaffold内容块，接收paddingValues参数，然后传递给FormFields：

@Composable
private fun FormContent() {
    Scaffold(
        topBar = {
            TutorialTopBar(
                text = "FormScreen",
                fontWeight = FontWeight.Bold,
                onNavigationClick = {
                    onBackPressedDispatcher.onBackPressed()
                },
                onNavigationIcon = Icons.Filled.ArrowBack
            ).TopBar()
        },
        content = { paddingValues ->
            // 将padding传递给内容组件
            FormFields(modifier = Modifier.padding(paddingValues))
        }
    )
}

3. 修改FormFields接收Modifier参数 #

让FormFields支持外部传入Modifier，把内边距应用到根布局上：

@Composable
private fun FormFields(modifier: Modifier = Modifier) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.inversePrimary)
    ) {
        OutlinedTextField(
            value = "asdasdasd",
            onValueChange = {},
            label = {
                Text(text = "Label")
            }
        )
    }
}

效果说明 #

修复后，Scaffold会自动帮你预留TopBar的空间，内容区域会从TopBar下方开始布局，预览和实际运行时都能完整显示TopBar和文本框，不会再出现遮挡问题。

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