强制撰写文本以尊重其他可组合项

Question

我正在尝试实现所示的布局。绿色圆圈应位于红色文本的右侧，内边距为 16dp。绿色圆圈应始终在屏幕上可见，并且顶部与文本对齐。较长的文本应导致多行文本。

有什么线索可以实现这种行为吗？

Answer 1

当您将文本和圆圈都放在

Row

中时，您可以使用

horizontalArrangement

来指定它们之间应有多少空间。一行中的元素默认会与顶部对齐。

默认情况下，第一个可组合项将占用所需的空间，可能会显示所有后续可组合项。为了防止这种情况，请在

weight(1f, false)

上使用修饰符

Text

，这样它只能占用行 (YourCircle) 中未加权的其他可组合项留下的空间。将第二个参数设置为

false

，这样它只在确实需要时才占用那么多空间。

放在一起会产生这样的结果：

Row(
    horizontalArrangement = Arrangement.spacedBy(16.dp),
) {
    Text(
        text = "your text",
        modifier = Modifier.weight(1f, false),
    )
    YourCircle()
}