如何在Compose中围绕多行文本绘制边框 [英] How to draw a border around multiline text in compose

问题描述

我想像这样在Text周围画一个边框，

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

但对于多行文本，它看起来不太好。
边框和文本之间的右侧有间隙。

那么如何在多行文本周围绘制边框，使其适合文本宽度？

推荐答案

我不确定这是错误还是预期行为。对于我创建的第一个案例this issue，我们将看看维护人员的想法。

以下是手动限制的方法：

var textWidth by remember { mutableStateOf<Int?>(null) }
Text(
    "Box around text with a very very very very longlonglonglongword",
    color = Color.White,
    onTextLayout = { layoutResult ->
        textWidth = (0 until layoutResult.lineCount)
            .maxOf {
                ceil(layoutResult.getLineRight(it)).toInt()
            }
    },
    modifier = Modifier
        .border(width = 2.dp, color = Color.Red)
        .width(with(LocalDensity.current) { textWidth?.toDp() ?: Dp.Unspecified })
        .drawWithContent {
            // prevent full with text from being drawn
            if (textWidth != null) {
                drawContent()
            }
        }
        .background(Color.DarkGray)
)

结果：

这篇关于如何在Compose中围绕多行文本绘制边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！