Jetpack Compose中解决双文本重叠并实现自适应排版的方案咨询

嘿，我看到你遇到的Jetpack Compose文本重叠问题了，刚好我之前也处理过类似的需求，给你几个靠谱的解决方案！

首先得说清楚你原代码的问题：你用的Box是层叠布局，两个Text分别设置了TopStart和BottomEnd对齐，但它们之间没有任何约束关系——也就是说，系统完全不知道这两个文本需要避开彼此，所以当消息文本（body）太长时，就会直接覆盖到时间文本（time）的位置，自然就重叠了。

要实现你想要的「短文本时时间同行、长文本时时间换行」的效果，我们需要用更智能的布局方式，下面是两种实用方案：

方案一：用FlowRow快速实现（依赖Material3） #

如果你已经在用Compose Material3库，直接用FlowRow就能轻松搞定，它会自动根据内容宽度判断是否换行：

@Composable
fun TextMessageItem(body: String, userName: String, time: String) {
    FlowRow(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically,
        horizontalGap = 8.dp // 消息和时间之间的间距
    ) {
        Text(
            text = body,
            modifier = Modifier.weight(1f), // 让消息优先占据可用空间
            overflow = TextOverflow.Wrap
        )
        Text(
            text = time,
            modifier = Modifier.align(Alignment.Top) // 确保时间和消息顶部对齐
        )
    }
}

原理：FlowRow会自动计算内容宽度，如果消息+时间+间距的总宽度超过父容器，就会把时间换行到消息下方，同时保持右对齐；如果宽度足够，就会和消息在同一行。

如果还没引入Material3，可以在build.gradle（Module级别）里添加依赖：

implementation "androidx.compose.material3:material3:1.2.0"

方案二：自定义SubcomposeLayout（无需额外依赖） #

如果你不想依赖Material3，用SubcomposeLayout可以实现完全自定义的布局逻辑，而且不需要额外引入库：

@Composable
fun TextMessageItem(body: String, userName: String, time: String) {
    SubcomposeLayout(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
    ) { constraints ->
        // 第一步：先测量时间文本的尺寸
        val timePlaceable = subcompose("time") {
            Text(text = time)
        }.first().measure(constraints.copy(minWidth = 0))
        
        // 计算消息文本的最大宽度：父容器宽度 - 时间宽度 - 间距
        val horizontalGap = 8.dp.roundToPx()
        val bodyMaxWidth = constraints.maxWidth - timePlaceable.width - horizontalGap
        
        // 第二步：测量消息文本（限制最大宽度）
        val bodyPlaceable = subcompose("body") {
            Text(
                text = body,
                overflow = TextOverflow.Wrap
            )
        }.first().measure(constraints.copy(minWidth = 0, maxWidth = bodyMaxWidth))
        
        // 计算总高度：同行时取两者最大高度，换行时取两者高度之和加间距
        val totalHeight = if (bodyPlaceable.width <= bodyMaxWidth) {
            maxOf(bodyPlaceable.height, timePlaceable.height)
        } else {
            bodyPlaceable.height + timePlaceable.height + horizontalGap
        }
        
        // 第三步：布局两个文本
        layout(constraints.maxWidth, totalHeight) {
            // 把消息文本放在左上角
            bodyPlaceable.place(0, 0)
            
            // 放置时间文本：同行时右对齐且垂直居中，换行时在消息下方右对齐
            val timeX = constraints.maxWidth - timePlaceable.width
            val timeY = if (bodyPlaceable.width <= bodyMaxWidth) {
                (totalHeight - timePlaceable.height) / 2
            } else {
                bodyPlaceable.height + horizontalGap
            }
            timePlaceable.place(timeX, timeY)
        }
    }
}

原理：我们先提前测量时间文本的宽度，然后给消息文本设置最大宽度——如果消息的实际宽度小于等于这个最大宽度，说明可以和时间放在同一行；否则就自动把时间移到消息下方，从根源上避免了重叠问题。

这两个方案都能完美满足你的需求，你可以根据自己的项目情况选择~

备注：内容来源于stack exchange，提问作者TinaTT2