首页 > 解决方案 > Jetpack Compose 中的文本布局优先级

问题描述

我连续有两个文本:

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)把它带回来,但第一个文本仍然占用所有可用宽度并低于第二个文本。

在此处输入图像描述

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

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

标签: androidandroid-jetpack-composeandroid-jetpack-compose-text

解决方案


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

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))
    )
}

在此处输入图像描述 在此处输入图像描述


推荐阅读