Jetpack Compose：Box组件内AnnotatedString文本左对齐问题修复

当前代码里的文本块已通过Modifier.align(Alignment.Center)定位到屏幕中央，但文本内容自身呈左对齐状态，想要实现文本内容也居中显示，该怎么修改？

原代码： #

Box(
    modifier = Modifier.fillMaxSize(),
) {
    val emptyMessage = AnnotatedString(
        text = "You don't have any items in this list. Click the ",
        spanStyle = SpanStyle(Color.Gray)
    ).plus(
        AnnotatedString(
            text = "+ ",
            spanStyle = SpanStyle(Color.Gray, fontSize = 18.sp),
        )
    ).plus(
        AnnotatedString(
            text = "button below to add an item.",
            spanStyle = SpanStyle(Color.Gray)
        )
    )

    Text(
        modifier = Modifier.align(Alignment.Center),
        text = emptyMessage,
    )
}

（配图：）

解决方案： #

给Text组件添加textAlign = TextAlign.Center参数即可。

Modifier.align(Alignment.Center)仅控制Text组件在父容器Box中的位置，而textAlign参数才是控制文本内容在Text组件内部的对齐方式，二者作用层级不同。

修改后的代码：

Box(
    modifier = Modifier.fillMaxSize(),
) {
    val emptyMessage = AnnotatedString(
        text = "You don't have any items in this list. Click the ",
        spanStyle = SpanStyle(Color.Gray)
    ).plus(
        AnnotatedString(
            text = "+ ",
            spanStyle = SpanStyle(Color.Gray, fontSize = 18.sp),
        )
    ).plus(
        AnnotatedString(
            text = "button below to add an item.",
            spanStyle = SpanStyle(Color.Gray)
        )
    )

    Text(
        modifier = Modifier.align(Alignment.Center),
        text = emptyMessage,
        textAlign = TextAlign.Center // 新增该行实现文本自身居中
    )
}

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