Android Compose中Dialog内嵌Scaffold内容不显示问题求助

问题：在Dialog内部使用Scaffold时，仅能看到顶部的SmallTopAppBar，下方的内容（如示例中的"Hello world!"）无法显示，后续也无法正常添加inputs、buttons等交互组件。

问题原因 #

Material3的Scaffold会为content区域提供一个innerPadding参数，用于避开TopAppBar等组件占用的空间。原代码中不仅添加了@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")注解忽略这个参数，还未将该padding应用到内容上，导致内容被TopAppBar遮挡或处于不可见区域。

修复方案 #

修改点： #

• 移除@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")注解，避免忽略Scaffold的padding参数
• 在Scaffold的content lambda中接收innerPadding参数，该参数会自动计算出避开TopAppBar的间距
• 将innerPadding应用到内容的Modifier.padding()中，同时添加fillMaxSize()让内容占满剩余空间

修复后的完整代码 #

@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
@Composable
fun MyDialog(
    openDialog: Boolean,
    closeDialog: () -> Unit,
) {
    if (openDialog) {
        Dialog(
            properties = DialogProperties(usePlatformDefaultWidth = false),
            onDismissRequest = closeDialog,
            content = {
                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    topBar = {
                        SmallTopAppBar(
                            modifier = Modifier.padding(0.dp, 0.dp, 16.dp, 10.dp),
                            title = {
                                Text(
                                    text = "Add new item",
                                    style = MaterialTheme.typography.titleMedium,
                                )
                            },
                            colors = TopAppBarDefaults.smallTopAppBarColors(
                                containerColor = MaterialTheme.colorScheme.background
                            ),
                            navigationIcon = {
                                IconButton(onClick = {
                                    closeDialog()
                                }) {
                                    Icon(
                                        imageVector = Icons.Filled.Close,
                                        contentDescription = null
                                    )
                                }
                            },
                            actions = {
                                Text(
                                    "Save",
                                    fontWeight = FontWeight.SemiBold
                                )
                            },
                        )
                    },
                ) { innerPadding ->
                    Text(
                        text = "Hello world!",
                        modifier = Modifier
                            .padding(innerPadding)
                            .fillMaxSize()
                    )
                }
            }
        )
    }
}

效果说明 #

修复后，"Hello world!"会正常显示在SmallTopAppBar下方，后续添加的inputs、buttons等组件也能正确布局在可用区域内，不会被顶部栏遮挡。

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