Jetpack Compose：FlowRow实现文本两端对齐的问题

当前代码的核心问题是：每个JustifiedText作为独立的Row组件被FlowRow流式排列，单个Text的textAlign = TextAlign.Justify仅作用于自身文本，无法实现跨组件的行内对齐；同时FlowRow默认不会拆分单个item到两行，导致行尾剩余空间无法被利用。以下是两种可行的解决思路：

方法一：合并内容为单个带InlineContent的Text组件 #

将所有内容（包括未来要添加的图标）合并为一个AnnotatedString，利用原生Text的排版能力实现自动连字符换行和两端对齐，通过InlineContent插入图标。这种方法实现简单，完全符合需求。

@OptIn(ExperimentalTextApi::class)
@Preview
@Composable
fun JustifiedTextWithIcons() {
    // 模拟带图标的数据项
    val items = listOf(
        Pair(Icons.Default.Info, "This part will have an icon and text."),
        Pair(Icons.Default.Warning, "Another example of a lengthy text."),
        Pair(Icons.Default.Star, "Short text."),
        Pair(Icons.Default.Email, "A very long piece of text that will wrap to the next line.")
    )

    // 构建包含图标占位符的AnnotatedString
    val annotatedString = buildAnnotatedString {
        items.forEachIndexed { index, (_, text) ->
            val iconId = "icon_$index"
            appendInlineContent(iconId)
            append(text)
            if (index != items.lastIndex) append(" ")
        }
    }

    // 定义图标对应的InlineContent
    val inlineContent = items.mapIndexed { index, (icon, _) ->
        "icon_$index" to InlineContent(
            Placeholder(
                width = 20.sp,
                height = 20.sp,
                placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
            )
        ) {
            Icon(
                imageVector = icon,
                contentDescription = null,
                modifier = Modifier.size(20.sp)
            )
        }
    }.toMap()

    Text(
        text = annotatedString,
        style = TextStyle(
            textAlign = TextAlign.Justify,
            hyphens = Hyphens.Auto, // 自动添加连字符换行
            lineHeight = 24.sp
        ),
        inlineContent = inlineContent,
        modifier = Modifier.padding(4.dp)
    )
}

补充说明 #

如果需要给每个item添加独立点击事件，可以在buildAnnotatedString中为对应文本段添加ClickableSpan。

方法二：自定义流式布局组件 #

如果必须保留每个item的独立组件（比如需要独立交互逻辑），可以通过自定义Layout实现以下逻辑：

1. 测量所有子组件宽度，逐行排列
2. 计算每行剩余空间，尝试拆分无法完全放入的文本item并添加连字符
3. 调整行内组件间距，实现两端对齐

@Composable
fun CustomJustifiedFlowRow(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(content = content, modifier = modifier) { measurables, constraints ->
        val placeables = measurables.map { it.measure(constraints.copy(minWidth = 0)) }
        val rowHeight = placeables.maxOf { it.height }
        val availableWidth = constraints.maxWidth

        var currentRowWidth = 0
        val rows = mutableListOf<MutableList<Placeable>>()
        var currentRow = mutableListOf<Placeable>()

        placeables.forEach { placeable ->
            if (currentRowWidth + placeable.width <= availableWidth) {
                currentRow.add(placeable)
                currentRowWidth += placeable.width
            } else {
                val remainingWidth = availableWidth - currentRowWidth
                if (remainingWidth > 0) {
                    // 这里需要根据文本内容计算可容纳的字符数，实际实现需结合文本测量API
                    // 以下为简化示意，拆分文本并添加连字符
                    val textMeasurable = measurables.first { it is TextMeasurable }
                    val splitPlaceable = textMeasurable.measure(constraints.copy(maxWidth = remainingWidth))
                    currentRow.add(splitPlaceable)
                    rows.add(currentRow)

                    // 剩余文本放入下一行
                    val remainingPlaceable = textMeasurable.measure(constraints.copy(maxWidth = availableWidth))
                    currentRow = mutableListOf(remainingPlaceable)
                    currentRowWidth = remainingPlaceable.width
                } else {
                    rows.add(currentRow)
                    currentRow = mutableListOf(placeable)
                    currentRowWidth = placeable.width
                }
            }
        }
        rows.add(currentRow)

        val layoutWidth = availableWidth
        val layoutHeight = rows.size * rowHeight

        layout(layoutWidth, layoutHeight) {
            var y = 0
            rows.forEach { row ->
                val totalRowWidth = row.sumOf { it.width }
                val spacing = if (row.size > 1) (availableWidth - totalRowWidth) / (row.size - 1) else 0
                var x = 0
                row.forEach { placeable ->
                    placeable.place(x, y)
                    x += placeable.width + spacing
                }
                y += rowHeight
            }
        }
    }
}

// 使用示例
@Preview
@Composable
fun CustomFlowRowDemo() {
    val items = listOf(
        "This part will have an icon and text.",
        "Another example of a lengthy text.",
        "Short text.",
        "A very long piece of text that will wrap to the next line."
    )

    CustomJustifiedFlowRow {
        items.forEach { item ->
            Row(modifier = Modifier.padding(4.dp)) {
                Text(text = item)
            }
        }
    }
}

补充说明 #

这种方法实现复杂度较高，需要处理文本拆分、动态测量等细节，但能保留每个item的独立性，适合有独立交互需求的场景。

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