Jetpack Compose 中 Column 内 Surface 嵌套的 Text 无法居中对齐问题

正在练习使用 Jetpack Compose 进行开发，嵌套在两个 Surface 组件内的 Text 文本始终无法居中对齐，尝试给 Text 组件添加 .fillMaxWidth() 修饰符未生效，实现代码如下：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SimpleLayoutsTheme {
                // A surface container using the 'background' color from the theme
                MainScreen("Hello World!")
            }
        }
    }
}

@Composable
fun MainScreen(message: String) {
    Surface {
        Column {
            Surface(modifier = Modifier
                .width(500.dp)
                .height(250.dp)) {
                Text(text = message, Modifier.align(Alignment.CenterHorizontally))
            }
            Surface(modifier = Modifier
                .width(500.dp)
                .height(250.dp)) {
                Text(text = message, Modifier.align(Alignment.CenterHorizontally))
            }
        }
    }
}

问题效果截图：

Modifier.align()是父布局提供的作用域限定修饰符，你使用的Alignment.CenterHorizontally是Column布局提供的对齐选项，仅对Column的直接子组件生效。你的Text是Surface的直接子组件，Surface本身没有提供该对齐方法，所以这个修饰符不会生效。
之前单独添加.fillMaxWidth()没有生效的原因是你没有配套修改Text的文本对齐属性，Text占满宽度后内部文本默认是左对齐，视觉上还是会停留在左侧。

提供两种常用实现方案：

• 方案1：修改Text自身属性实现水平居中
  给Text同时添加fillMaxWidth()修饰符和textAlign = TextAlign.Center属性即可：

@Composable
fun MainScreen(message: String) {
    Surface {
        Column {
            Surface(modifier = Modifier
                .width(500.dp)
                .height(250.dp)) {
                Text(
                    text = message,
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
            }
            Surface(modifier = Modifier
                .width(500.dp)
                .height(250.dp)) {
                Text(
                    text = message,
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

• 方案2：嵌套布局实现完全居中
  如果需要同时实现水平+垂直居中，可以在Surface内部嵌套一个Box，设置Box的内容对齐属性：

@Composable
fun MainScreen(message: String) {
    Surface {
        Column {
            Surface(modifier = Modifier
                .width(500.dp)
                .height(250.dp)) {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = message)
                }
            }
            Surface(modifier = Modifier
                .width(500.dp)
                .height(250.dp)) {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = message)
                }
            }
        }
    }
}

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