Jetpack Compose中Row容器末尾Composable被挤压的最优解决方案

最优实现方式为给TextField添加Modifier.weight(1f)修饰符，无额外依赖、无布局异常、无需硬编码尺寸，完全适配需求。

修改后完整代码如下：

@Preview(showBackground = true, widthDp = 410)
@Composable
fun MyComposable() {
    Row(Modifier.fillMaxWidth()) {
        TextField(
            // 添加weight修饰符，占据Row内除尾部元素外的剩余全部空间
            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)}
    }
}

实现原理 #

Jetpack Compose的Row组件测量时，会优先计算未设置weight属性的子组件所需尺寸，剩余空间再按权重分配给设置了weight的子组件。所有尾部的FAB或自定义按钮会先测量自身需要的宽度，剩下的所有空间都会分配给TextField，不会出现尾部元素被挤压的问题。

方案优势 #

对比已有的临时方案，该方案的优势十分明显：

• 无需引入ConstraintLayout，代码简洁，不存在过度设计问题
• 不需要修改全局布局方向，不会出现TextField文字、图标位置异常的问题
• 无需为尾部元素硬编码固定宽度，完全适配宽度随内容变化的组件（如带本地化文字的普通Button）

内容的提问来源于stack exchange，提问作者Shreyash.K