Jetpack Compose：Scaffold内Column垂直居中失效问题排查

我尝试让基础Jetpack Compose应用中的文本实现垂直居中，使用了配置verticalArrangement = Arrangement.Center的Column组件，但文本仍处于屏幕顶部。

问题原因与解决方案 #

核心问题是Column未占据足够的垂直空间——verticalArrangement = Arrangement.Center仅在Column自身高度填充父布局时才会生效。需要做两处关键修改：

• 给GreetingText传递的modifier添加fillMaxSize()，让它填充Scaffold的可用空间，同时结合Scaffold的innerPadding避免内容被系统栏遮挡。
• 给Column的modifier添加fillMaxSize()，确保Column占据整个可用高度，让垂直居中规则生效。

修改后的完整代码 #

MainActivity部分 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HappyBirthday3Theme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    GreetingText(
                        message = "Happy Birthday Baruška!",
                        from = "From Dominika",
                        modifier = Modifier
                            .padding(innerPadding)
                            .fillMaxSize(),
                    )
                }
            }
        }
    }
}

GreetingText部分 #

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier.fillMaxSize(),
    ) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center,
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End),
        )
    }
}

预览组件优化 #

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthday3Theme {
        GreetingText(
            message = "Happy Birthday Baruš!", 
            from = "From Dominika",
            modifier = Modifier.fillMaxSize()
        )
    }
}

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