如何对齐Text与CircularProgressIndicator，文本多行时仍保持组合布局

要实现文本行数（1-3行）变化时，CircularProgressIndicator始终与文本末尾对齐并作为整体排版，无需使用Row布局，利用Jetpack Compose的文本内嵌内容功能即可完美解决：

修改后的代码如下：

@Composable
fun Test() {
    val progressInlineKey = "progress_indicator"
    
    Text(
        text = buildAnnotatedString {
            append("Sample text to show large text view on screen. Switching to view in 3, 2, 1")
            // 给进度条预留内嵌位置，可添加空格控制间距
            append(" ")
            appendInlineContent(progressInlineKey)
        },
        maxLines = 3, // 限制文本最多显示3行
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp),
        inlineContent = mapOf(
            progressInlineKey to InlineTextContent(
                Placeholder(
                    width = 20.dp,
                    height = 20.dp,
                    // 让进度条与文本行垂直居中对齐
                    placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
                )
            ) {
                CircularProgressIndicator(
                    modifier = Modifier.size(20.dp),
                    strokeWidth = 2.dp // 调整线条粗细，适配文本视觉效果
                )
            }
        )
    )
}

核心优势 #

• 自动适配行数：进度条作为文本流的一部分，会自动跟随文本换行，始终附着在最后一行末尾，不管文本是1行、2行还是3行。
• 精准对齐：通过PlaceholderVerticalAlign.TextCenter确保进度条与所在行的文本垂直居中对齐，视觉上更协调。
• 简洁布局：无需嵌套Row，减少布局层级，更符合Compose的排版逻辑。

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