Row() 中的最后一个可组合项被压缩 (Jetpack Compose)

Question

我正在尝试创建一个自定义搜索栏；其中我使用Row()可组合项作为所有其他元素的容器。这里最后一个FloatingActionButton被挤压，但我希望它TextField是灵活的，以便它被缩短以容纳剩余的元素。

我已经知道一些解决方法，但我想要一个更好的解决方案。请参阅下文了解已知的解决方法及其缺点。

@Preview(showBackground = true, widthDp = 410)
@Composable
fun MyComposable() {
    Row(Modifier.fillMaxWidth()) {
        TextField(value = "Search", onValueChange = {})
        FloatingActionButton(onClick = {}) {Icon(Icons.Filled.SkipNext, contentDescription = null)}
        FloatingActionButton(onClick = {}) {Icon(Icons.Filled.Close, contentDescription = null)}
        FloatingActionButton(onClick = {}) {Icon(Icons.Filled.Home, contentDescription = null)}
    }
}

已知的解决方法：

1. 使用ConstraintLayout（缺点：复杂。在很多情况下似乎有点矫枉过正。）
2. 用于CompositionLocalProvider提供 RTL LocalLayoutDirection。（缺点：看起来很老套。子组件的所有布局都变成了 RTL。例如文本字段图标和文本放置。）
3. 为最后一个元素指定固定宽度（或权重）。（缺点：这使得倒数第二个元素受到挤压，并迫使我对宽度进行硬编码，这在某些元素上无法完成，例如Button它的宽度是由其中的本地化文本确定的。）

Answer 1

您可以weight(1f)将 应用于TextField：

Row(Modifier.fillMaxWidth()) {
        TextField(
            modifier = Modifier.weight(1f),
            value = "Search", onValueChange = {})

        FloatingActionButton(onClick = {}) {Icon(Icons.Filled.SkipNext, contentDescription = null)}
        FloatingActionButton(onClick = {}) {Icon(Icons.Filled.Close, contentDescription = null)}
        FloatingActionButton(onClick = {}) {Icon(Icons.Filled.Home, contentDescription = null)}
    }