如何在Jetpack Compose中并排排列独立Text组件并按需自动换行？

用FlowRow实现（推荐方案） #

先确认你已引入androidx.compose.foundation.layout依赖，通过配置FlowRow参数，就能让独立Text组件自动换行。核心是让FlowRow占满屏幕宽度，同时每个Text保持宽度自适应内容。

示例代码：

import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun AutoWrapTextFlow(textItems: List<String>) {
    FlowRow(
        modifier = Modifier.fillMaxWidth(),
        // 可根据需求调整元素间的水平/垂直间距
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        textItems.forEach { item ->
            Text(text = item)
            // Text默认是wrapContentWidth，无需额外设置，确保FlowRow能判断剩余空间
        }
    }
}

如果之前用FlowRow没生效，检查两个关键点：

• FlowRow必须设置Modifier.fillMaxWidth()，以屏幕宽度作为换行边界
• 不要给Text设置固定宽度，保持默认的自适应宽度

自定义布局（应对特殊需求） #

如果FlowRow无法满足你的特殊排版要求，可以手动实现自定义布局，精确控制每个Text的换行逻辑：

import androidx.compose.foundation.layout.Layout
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.Measurable
import androidx.compose.ui.layout.MeasureScope
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.dp

@Composable
fun CustomAutoWrapTextFlow(
    textItems: List<String>,
    modifier: Modifier = Modifier,
    horizontalGap: Float = 8.dp.value,
    verticalGap: Float = 4.dp.value
) {
    Layout(
        modifier = modifier,
        content = { textItems.forEach { Text(it) } }
    ) { measurables, constraints ->
        val maxWidth = constraints.maxWidth
        var currentRowWidth = 0
        val rows = mutableListOf<MutableList<Measurable>>()
        val currentRow = mutableListOf<Measurable>()

        measurables.forEach { measurable ->
            val placeable = measurable.measure(constraints.copy(minWidth = 0))
            val itemWidth = placeable.width

            // 计算当前行加入该元素后的总宽度，判断是否超出屏幕
            val requiredWidth = currentRowWidth + itemWidth + (if (currentRow.isNotEmpty()) horizontalGap.toInt() else 0)
            if (requiredWidth > maxWidth && currentRow.isNotEmpty()) {
                // 换行，保存当前行
                rows.add(currentRow.toMutableList())
                currentRow.clear()
                currentRowWidth = itemWidth
                currentRow.add(measurable)
            } else {
                // 加入当前行
                if (currentRow.isNotEmpty()) currentRowWidth += horizontalGap.toInt()
                currentRowWidth += itemWidth
                currentRow.add(measurable)
            }
        }
        // 添加最后一行
        if (currentRow.isNotEmpty()) rows.add(currentRow)

        // 计算整体高度
        val totalHeight = rows.sumOf { row ->
            row.maxOf { it.measure(constraints.copy(minWidth = 0)).height }
        } + (rows.size - 1) * verticalGap.toInt()

        // 布局所有元素
        layout(maxWidth, totalHeight) {
            var yOffset = 0
            rows.forEach { row ->
                var xOffset = 0
                val rowHeight = row.maxOf { it.measure(constraints.copy(minWidth = 0)).height }
                row.forEach { measurable ->
                    val placeable = measurable.measure(constraints.copy(minWidth = 0))
                    // 垂直居中对齐行内元素
                    placeable.placeRelative(x = xOffset, y = yOffset + (rowHeight - placeable.height) / 2)
                    xOffset += placeable.width + horizontalGap.toInt()
                }
                yOffset += rowHeight + verticalGap.toInt()
            }
        }
    }
}

使用方式：

CustomAutoWrapTextFlow(
    textItems = listOf("第一块文本", "第二块较长的文本内容", "短文本", "超级长的独立文本块测试换行"),
    modifier = Modifier.fillMaxWidth()
)

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