Jetpack Compose中两个Text组件的特殊水平布局实现咨询

你需要的是一种优先保证第二个Text宽度自适应内容，第一个Text根据剩余空间动态调整的布局逻辑，核心是在自定义Layout中先测量固定的第二个组件，再根据父容器宽度计算第一个组件的可用空间，最后完成布局。以下是具体实现方案：

自定义Layout实现 #

@Composable
fun AdaptiveTwoTextLayout(
    firstText: @Composable () -> Unit,
    secondText: @Composable () -> Unit,
    modifier: Modifier = Modifier
) {
    Layout(
        content = {
            firstText()
            secondText()
        },
        modifier = modifier
    ) { measurables, constraints ->
        // 1. 先测量第二个Text，确保它获取自身内容所需宽度
        val secondPlaceable = measurables[1].measure(constraints.copy(minWidth = 0))
        val secondWidth = secondPlaceable.width

        // 2. 计算第一个Text的可用最大宽度
        val availableWidthForFirst = constraints.maxWidth - secondWidth
        val firstConstraints = when {
            availableWidthForFirst > 0 -> constraints.copy(
                maxWidth = availableWidthForFirst,
                minWidth = 0
            )
            // 极端情况：第二个Text已占满父容器，第一个Text宽度设为0
            else -> constraints.copy(maxWidth = 0, minWidth = 0)
        }

        // 3. 测量第一个Text，用计算好的约束限制宽度
        val firstPlaceable = measurables[0].measure(firstConstraints)

        // 4. 计算布局总尺寸
        val totalWidth = minOf(firstPlaceable.width + secondWidth, constraints.maxWidth)
        val totalHeight = maxOf(firstPlaceable.height, secondPlaceable.height)

        // 5. 布局子组件
        layout(totalWidth, totalHeight) {
            val firstX = if (firstPlaceable.width + secondWidth <= constraints.maxWidth) {
                // 总宽度未超父容器：第一个Text从0开始，第二个紧跟其后
                0
            } else {
                // 总宽度超父容器：第一个Text占剩余空间，第二个固定在右侧
                totalWidth - secondWidth - firstPlaceable.width
            }
            // 垂直居中对齐
            firstPlaceable.placeRelative(
                x = firstX,
                y = (totalHeight - firstPlaceable.height) / 2
            )
            secondPlaceable.placeRelative(
                x = totalWidth - secondWidth,
                y = (totalHeight - secondPlaceable.height) / 2
            )
        }
    }
}

使用示例 #

@Composable
fun AdaptiveTextDemo() {
    Column(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        // 大屏场景：两个Text并排显示，无省略
        AdaptiveTwoTextLayout(
            firstText = {
                Text(
                    text = "AAAAAAAAAAAAAAAAAAAAAAAAAAAA",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            secondText = { Text(text = "2ndTextComposable") }
        )

        // 小屏场景：第一个Text被截断并显示省略号，第二个Text固定在右侧
        AdaptiveTwoTextLayout(
            firstText = {
                Text(
                    text = "AAAAAAAAAAAAAAAAAAAAAAAAAAAA",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            secondText = { Text(text = "2ndTextComposable") },
            modifier = Modifier.width(200.dp)
        )
    }
}

关键逻辑说明 #

1. 先测量第二个组件：通过constraints.copy(minWidth = 0)让第二个Text不受父容器最小宽度约束，完全根据自身内容计算宽度。
2. 动态计算第一个组件的约束：用父容器最大宽度减去第二个Text的宽度，得到第一个Text的可用空间，确保它不会挤压第二个组件的宽度。
3. 布局位置判断：
   • 当两个Text总宽度≤父容器宽度时，第二个Text紧跟第一个Text末尾，无额外空白；
   • 当总宽度超过父容器时，第一个Text占据剩余全部空间（配合maxLines=1和overflow=TextOverflow.Ellipsis实现省略），第二个Text固定在布局最右侧。
4. 垂直居中对齐：通过计算垂直方向的偏移量，让两个Text在高度上居中对齐。

注意事项 #

• 第一个Text必须设置maxLines=1和overflow=TextOverflow.Ellipsis，否则即使宽度被限制，也会换行或超出布局范围。
• 已处理极端场景：如果第二个Text的宽度已经超过父容器最大宽度，第一个Text会被设置为宽度0，避免布局异常。

内容的提问来源于stack exchange，提问作者Md. Khalekuzzaman