Jetpack Compose：如何实现溢出文本的正确对齐（支持向左溢出）

要让文本在溢出时保持右对齐（溢出部分向左延伸），可以通过两种方式实现：

方法一：使用Box容器配合wrapContentWidth #

利用Box的内容对齐属性，将Text包裹在其中，让文本始终对齐容器右侧：

@Composable
fun Test() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.CenterEnd // 让内容对齐容器右侧
    ) {
        Text(
            text = "Hello there!",
            fontSize = 150.sp,
            softWrap = false,
            textAlign = TextAlign.End,
            modifier = Modifier.wrapContentWidth() // 文本自身宽度自适应，不强制占满容器
        )
    }
}

方法二：自定义Layout组件（更灵活） #

如果需要更精确的控制，可以自定义Layout来固定文本的对齐逻辑，不受溢出状态影响：

@Composable
fun AlignedOverflowText(
    text: String,
    modifier: Modifier = Modifier,
    textAlign: TextAlign = TextAlign.Start,
    style: TextStyle = TextStyle.Default
) {
    Layout(
        content = {
            Text(
                text = text,
                softWrap = false,
                textAlign = textAlign,
                style = style
            )
        },
        modifier = modifier
    ) { measurables, constraints ->
        // 测量文本实际尺寸，解除最小宽度限制
        val textPlaceable = measurables.first().measure(constraints.copy(minWidth = 0))
        val containerWidth = constraints.maxWidth
        val containerHeight = constraints.maxHeight

        // 根据对齐方式计算文本X轴偏移量
        val offsetX = when (textAlign) {
            TextAlign.End, TextAlign.Right -> containerWidth - textPlaceable.width
            TextAlign.Center -> (containerWidth - textPlaceable.width) / 2
            else -> 0 // 左对齐/起始对齐
        }
        // 垂直居中对齐
        val offsetY = (containerHeight - textPlaceable.height) / 2

        // 按容器尺寸布局，将文本放置到计算好的位置
        layout(containerWidth, containerHeight) {
            textPlaceable.placeRelative(offsetX, offsetY)
        }
    }
}

// 使用示例
@Composable
fun Test() {
    AlignedOverflowText(
        text = "Hello there!",
        modifier = Modifier.fillMaxSize(),
        textAlign = TextAlign.End,
        style = TextStyle(fontSize = 150.sp)
    )
}

这两种方式都能让文本在溢出时维持指定的对齐方向，溢出部分向相反方向延伸，配合字号缩小动画会更流畅。

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