compose 中 Row 内的 requiredWidthIn() 的奇怪行为

Question

我有一个

Row

，其中包含三个

Text

组件。我想要的行为是，如果第一个文本太长，则将第二个和第三个文本缩小到 50 dp 的最小宽度。

我遇到的问题是，当我为该行内的第二个和第三个文本设置

requiredWidthIn(50.dp)

时，如果第一个文本很长，它会推动第二个文本直到它消失。

另一个问题是，当它推送其他文本时，它会忽略我设置的

end

和

spacedBy

填充。第二个和第三个文本中的所有填充都消失了。

有什么办法可以解决这个问题吗？谢谢！

@Composable
fun MinWidthWithRowTestComp(modifier: Modifier = Modifier) {
    Row(
        modifier = Modifier
            .background(color = Color.Black)
            .fillMaxWidth()
            .padding(16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Text(
            modifier = Modifier
                .background(color = Color.Red),
            text = "Hello World! Hello World!  Hello World! Hello World! ",
        )

        Text(
            modifier = Modifier
                .background(color = Color.Blue)
                .requiredWidthIn(min = 50.dp),
            text = "Hello World!",
        )

        Text(
            modifier = Modifier
                .background(color = Color.Yellow)
                .requiredWidthIn(min = 50.dp),
            text = "Hello World!",
        )
    }
}

Answer 1

您需要在第一个

weight

可组合项上设置

Text

修饰符。否则，首先对其进行测量，并且只会占用所需的空间。

Text(
    modifier = Modifier
        .weight(1f)
        .background(color = Color.Red),
    text = "Hello World! Hello World!  Hello World! Hello World! ",
)