Jetpack Compose 中的文本布局优先级

Question

我连续发了两条短信：

Row {
    Text(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
        maxLines = 1,
        style = MaterialTheme.typography.h4,
        modifier = Modifier
            .background(Color.Cyan)
    )
    Spacer(
        modifier = Modifier
            .weight(1f)
            .requiredWidthIn(min = 10.dp)
    )
    Text(
        "Second",
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .requiredWidth(IntrinsicSize.Min)
            .background(Color.Yellow.copy(alpha = 0.5f))
    )
}

第一个可能会很长。当它发生时，第二个文本被压缩并从视图中消失。

requiredWidth(IntrinsicSize.Min) 将其恢复，但第一个文本仍占用所有可用宽度并位于第二个文本下方。

当第一个文本很小时，我需要第二个文本在右边，这就是我在它们之间使用间隔符的原因。

如何添加一些布局优先级来修复它？

Answer 1

您可以在Row中添加Arrangement.SpaceBetween，并在第一个Text中添加修饰符weight(1f, fill= false)：

Row(horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier.fillMaxWidth()) {
    Text(
        "Lorem ....",
        maxLines = 1,
        style = MaterialTheme.typography.h4,
        modifier = Modifier
            .background(Color.Cyan)
            .weight(1f, fill= false)
    )
    Text(
        "Second",
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .background(Color.Yellow.copy(alpha = 0.5f))
    )
}

Answer 2

您可以尝试阻止 Text 可组合项填满整个宽度。

例如你可以说

Text(text = "Lorem...", modifier = Modifier.fillMaxWidth(0.75f))

这将使文本填满其最大宽度，但为第二个文本保留剩余 space 的 25%。当然，您可以将 0.75f 更改为您认为适合您的用例的任何值。

Jetpack Compose 中的文本布局优先级

Text layout priority in Jetpack Compose

android

android-jetpack-compose

android-jetpack-compose-text