Android Compose象限布局标题文本无法水平居中问题求助

我正在学习Kotlin与Android Compose，在象限布局项目里遇到了问题：屏幕被划分为四个象限，每个象限包含标题和正文两个文本块。其中标题文本（firstTitle、secondTitle、thirdTitle、fourthTitle）设置TextAlign.Center后依然左对齐，无法水平居中；但正文文本（firstText、secondText、thirdText、fourthText）设置TextAlign.Justify后显示符合预期。我尝试在代码不同位置调整Alignment属性，都没解决问题，附上代码请求排查：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeQuadrantTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    WholePage(
                        firstTitle = stringResource(R.string.First_Title),
                        firstText = stringResource(R.string.First_Text),
                        secondTitle = stringResource(R.string.Second_Title),
                        secondText = stringResource(R.string.Second_Text),
                        thirdTitle = stringResource(R.string.Third_Title),
                        thirdText = stringResource(R.string.Third_Text),
                        fourthTitle = stringResource(R.string.Fourth_Title),
                        fourthText = stringResource(R.string.Fourth_Text),
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun WholePage(firstTitle: String, firstText: String, secondTitle: String, secondText: String, thirdTitle: String, thirdText: String, fourthTitle: String, fourthText: String, modifier: Modifier = Modifier) {
    Column(modifier = Modifier.fillMaxSize()
    ) {
        Row(modifier = Modifier.weight (1f)) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .weight (1f)
                    .background(Color(0xFFEADDFF))
                    .wrapContentSize(align = Alignment.Center)
                    .padding(16.dp)
            ){
                Text(
                    //First title is upper left corner.
                    text = firstTitle,
                    fontWeight = FontWeight.Bold,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(
                    //First text is upper left corner.
                    text = firstText,
                    textAlign = TextAlign.Justify,
                )
            }
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .weight (1f)
                    .background(Color(0xFFD0BCFF))
                    .wrapContentSize(align = Alignment.Center)
                    .padding(16.dp)
            ) {
                Text(
                    //Second title is upper right corner.
                    text = secondTitle,
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(
                    //Second text is upper right corner.
                    text = secondText,
                    textAlign = TextAlign.Justify,
                )
            }
        }
        Row(modifier = Modifier.weight (1f)) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .weight (1f)
                    .background(Color(0xFFB69DF8))
                    .padding(16.dp)
                    .wrapContentSize(align = Alignment.Center)
            ) {
                Text(
                    //Third title is lower left corner.
                    text = thirdTitle,
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(
                    //Third text is lower left corner.
                    text = thirdText,
                    textAlign = TextAlign.Justify,
                )
            }
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .weight (1f)
                    .background(Color(0xFFF6EDFF))
                    .wrapContentSize(align = Alignment.Center)
                    .padding(16.dp)
            ) {
                Text(
                    //Fourth title is lower right corner.
                    text = fourthTitle,
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(
                    //Fourth text is lower right corner.
                    text = fourthText,
                    textAlign = TextAlign.Justify,
                )
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ComposeQuadrantTheme {
        WholePage(
            firstTitle = stringResource(R.string.First_Title),
            firstText = stringResource(R.string.First_Text),
            secondTitle = stringResource(R.string.Second_Title),
            secondText = stringResource(R.string.Second_Text),
            thirdTitle = stringResource(R.string.Third_Title),
            thirdText = stringResource(R.string.Third_Text),
            fourthTitle = stringResource(R.string.Fourth_Title),
            fourthText = stringResource(R.string.Fourth_Text)
        )
    }
}

问题原因 #

标题文本无法居中的核心原因是：Text组件默认宽度为包裹内容，TextAlign.Center仅在文本宽度大于内容宽度时生效。你给Column设置的wrapContentSize(align = Alignment.Center)只会让Column自身居中，但内部Text仍只占自身内容宽度，所以TextAlign.Center无法触发居中效果。而正文文本设置TextAlign.Justify生效，是因为正文内容较长，宽度撑满了父容器的可用空间。

修复方案 #

有两种简单有效的修复方式：

方式1：给标题Text添加fillMaxWidth()修饰符

让标题文本宽度占满父容器可用空间，此时TextAlign.Center就能让文本内容居中：

Text(
    text = firstTitle,
    fontWeight = FontWeight.Bold,
    textAlign = TextAlign.Center,
    modifier = Modifier
        .padding(bottom = 16.dp)
        .fillMaxWidth() // 添加该行
)

方式2：调整Column的布局配置

给Column添加horizontalAlignment = Alignment.CenterHorizontally，让Column内所有子元素水平居中，无需给每个Text单独设置宽度：

Column(
    modifier = Modifier
        .fillMaxSize()
        .weight(1f)
        .background(Color(0xFFEADDFF))
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally // 添加该行
){
    // 标题和正文文本
}

注：这种方式下可以去掉wrapContentSize(align = Alignment.Center)，因为fillMaxSize()已经让Column占满父容器，结合horizontalAlignment即可实现子元素居中。

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