android - 编写 : wrap text in Row layout, 而不是将 sibling 推出

Question

我正在尝试使用 Jetpack Compose，但我对 Row 的行为感到困惑。我在图标按钮旁边有一个文本，我希望图标按钮锚定在最小宽度为 48dp 的一侧，并在其周围环绕文本。像这样:

但是文本没有换行，它占用了 Row 中的所有空间:

@Composable
fun SampleLayout(text: String) {
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween,
                    ) {
                        Text(text)
                        IconButton(
                            onClick = {  },
                        ) {
                            Icon(
                                imageVector = androidx.compose.material.icons.Icons.Default.StarBorder,
                                null
                            )
                        }
                    }
}

@Preview(showBackground = true, backgroundColor = 0x006EAEA0, fontScale = 1.5F)
@Composable
fun SamplePreview1() {
    Box(Modifier.padding(16.dp)) {
        SampleLayout("helooooo")
    }
}

@Preview(showBackground = true, backgroundColor = 0x006EAEA0, fontScale = 1.5F)
@Composable
fun SamplePreview2() {
    Box(Modifier.padding(16.dp)) {
        SampleLayout("helooooooooooooooooooooooooooo")
    }
}
@Preview(showBackground = true, backgroundColor = 0x006EAEA0, fontScale = 1.5F)
@Composable
fun SamplePreview3() {
    Box(Modifier.padding(16.dp)) {
        SampleLayout("heloooooooooooooooooooooooooooooooooooooooo")
    }
}

我尝试将图标的最小宽度设置为 48dp，但文本仍然会填充到行尾。
如何确保文本宽度不超过图标按钮？

Answer 1

默认 Text布局优先级高于 Icon为了填补必要的空间。您可以使用 weight 更改此设置修饰符。
使用此修饰符后，Icon 的大小将在 Text 之前计算:

The parent will divide the vertical space remaining after measuring unweighted child elements

还有 weight有一个 fill参数，设置为 true默认。这相当于 fillMaxWidth (当 weight 在 Row 中使用时)，因此您可以跳过 fillMaxWidth修饰符在你的 parent 。当您不需要此行为时，请通过 false到这个参数。

Row{
    Text(text, modifier = Modifier.weight(1f))
    IconButton(
        onClick = { }
    ) {
        Icon(
            imageVector = Icons.Default.StarBorder,
            null
        )
    }
}