撰写：将文本包装在行布局中，而不是将同级文本推出

Question

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

但文本不会换行，它会占用行中的所有空间：

@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

Row一个接一个地测量其子项，如果某个项目需要占用所有可用空间（例如，如果您使用fillMaxWidth，或者在这种情况下文本具有多行），则下一个项目将没有任何剩余空间。

如果它的布局逻辑支持压缩到零大小，则您根本不会看到它（就像使用 的情况一样）Icon，否则可以在行的末尾看到它，实际上采用零大小，但绘制的尺寸超出了边界。

要更改测量子项的顺序，您可以使用修饰符：在这种情况下，将在 之前计算weight的大小：IconText

父级将在测量未加权的子元素后划分剩余的垂直空间

还有weight一个参数，默认fill设置为。true这相当于fillMaxWidth(whenweight在 a 内使用Row)，因此您可以跳过fillMaxWidth父级中的修饰符。当您不需要此行为时，传递false给此参数。

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

Answer 2

尝试这个

@Composable
fun SampleLayout(text: String) {
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween,
                    ) {
                        Text(text = text)
                        IconButton(
                            modifier = Modifier.weight(1f, fill = false), //You must add the false fill here to keep it from occupying all the available space
                            onClick = {  },
                        ) {
                            Icon(
                                imageVector = androidx.compose.material.icons.Icons.Default.StarBorder,
                                null
                            )
                        }
                    }
}