android - Jetpack Compose IntrinsicSize.Min 限定符强制文本为 2 行

Question

这是我要创建的文本。

我想使用 Divider() 在文本下方画一条线，但出了点问题。让我解释一下。

@Preview(showBackground = true)
@Composable
fun Example() {
Column(
     modifier = Modifier.width(IntrinsicSize.Min)
) {
    Text(text = "Jetpack Compose")
    Divider(
        color = Color.Red
    )
   }
}

问题:如您所见，IntrinsicSize.Min 强制我的文本为 2 行。发生这种情况是因为文本内有空白，我不想要它，我想要一个单行文本，其下方有分隔线。

我尝试过的

@Preview(showBackground = true)
@Composable
fun Original() {
Text(text = "Jetpack Compose", modifier = Modifier
    .padding(bottom = 1.dp)
    .drawBehind {
        drawRect(
            color = Color.Red,
            topLeft = Offset(0f, size.height),
            size = Size(width = size.width, height = 1.dp.toPx())
        )
    })
}

使用drawBehind修饰符按我的预期工作，但我认为对于这种情况应该有更好的方法。我们可以在不使用修饰符的情况下实现这一点吗？

Answer 1

将可组合文本所需的宽度设置为 IntrinsicSize.Max

@Preview(showBackground = true)
@Composable
fun UnderlinedText(text: String = "Jetpack Compose") {
    Column(Modifier.width(IntrinsicSize.Min)) {
        Text(
           modifier = Modifier.requiredWidth(IntrinsicSize.Max),
            text = text,
        )
        Divider(color = Color.Red)
    }
}

这将迫使您的文本可组合项尝试占用尽可能多的空间，同时仍然允许分隔符受到列宽度的限制。