如何在Compose中实现多行Text的边框自适应文本宽度

问题原因 #

你当前直接给Text组件的Modifier添加border的写法，边框是跟随Text组件的整体布局宽度渲染的。多行文本如果父布局分配的宽度大于文本实际占满的宽度，Text组件默认会占满父布局分配的宽度，所以就会出现边框右侧和文本之间有空隙的问题。

解决方案 #

分两种适用场景选择实现方式：

场景1：文本无最大宽度限制，希望组件宽度完全适配文本内容

只需在Modifier中添加width(IntrinsicSize.Min)，让组件宽度自动匹配最长一行文本的实际宽度即可：

Text(
    "Box around text with a very very very very longlonglonglongword",
    modifier = Modifier
        .padding(top = 8.dp)
        .width(IntrinsicSize.Min)
        .border(width = 2.dp, color = Color.Red)
        .background(Color.DarkGray)
)

场景2：文本需要限制最大宽度（比如占满父布局宽度后自动换行）

这种情况需要通过onTextLayout回调拿到文本实际布局参数，自定义绘制背景和边框，确保完全贴合文本实际尺寸：

// 记录文本布局结果
var textLayoutResult by remember { mutableStateOf<TextLayoutResult?>(null) }
val borderWidth = 2.dp
val borderColor = Color.Red
val backgroundColor = Color.DarkGray

Text(
    text = "Box around text with a very very very very longlonglonglongword",
    modifier = Modifier
        .padding(top = 8.dp)
        .fillMaxWidth() // 按实际需求设置最大宽度，比如占满父布局
        .drawBehind {
            textLayoutResult?.let { layout ->
                // 绘制背景
                drawRect(
                    color = backgroundColor,
                    size = Size(layout.size.width.toFloat(), layout.size.height.toFloat())
                )
                // 绘制贴合文本实际尺寸的边框
                drawRect(
                    color = borderColor,
                    style = Stroke(width = borderWidth.toPx()),
                    size = Size(layout.size.width.toFloat(), layout.size.height.toFloat())
                )
            }
        },
    onTextLayout = { textLayoutResult = it }
)

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