Compose Multiplatform中Card内Box的Text无法居中问题求助

问题原因 #

大字号Text的默认排版基于字体的**基线（Baseline）**对齐，Box的contentAlignment = Alignment.Center仅能将Text的布局框居中，但Text自身的文字绘制区域因字体的ascent/descent特性，视觉上会出现偏移，尤其当字号接近容器高度时，偏移问题会更突出。

解决方案 #

方案一：通过Modifier让Text自身范围居中 #

给Text添加Modifier.fillMaxSize().wrapContentSize(Alignment.Center)，让文字在Text自身布局范围内完全居中，配合Box的居中设置，实现视觉上的完全居中：

Card(Modifier.height(150.dp).weight(1.0F)) {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Text(
            text = "A",
            fontSize = 130.sp,
            modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center)
        )
    }
}

方案二：通过TextStyle设置对齐 #

让Text占满Box空间，同时设置文字的水平和垂直对齐方式：

Card(Modifier.height(150.dp).weight(1.0F)) {
    Box(modifier = Modifier.fillMaxSize()) {
        Text(
            text = "A",
            fontSize = 130.sp,
            modifier = Modifier.fillMaxSize(),
            textAlign = TextAlign.Center,
            verticalAlignment = TextAlign.CenterVertically
        )
    }
}

补充提示 #

若使用Material3的Card，默认存在内边距（ContentPadding），可能影响居中效果，可通过Card(contentPadding = PaddingValues(0.dp))移除内边距。

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