Jetpack Compose Android TextField宽度溢出挤压右侧Post按钮如何解决

问题根因 #

你当前的评论输入组件外层应为Row布局，TextField默认未配置宽度权重，文本内容超出宽度后会无限制拉伸自身宽度，挤压右侧Post按钮的展示空间。

修复方案 #

只需修改两处配置即可实现预期效果：

• 给TextField添加Modifier.weight(1f)，让它仅占用Row中除固定宽度元素外的剩余可用空间，不会挤压其他组件
• 给TextField设置maxLines参数（可根据需求指定最大行数，设为Int.MAX_VALUE则支持无限自动换行），实现文本输入到边界后内部自动换行

修改后的完整代码 #

// 外层Row布局保持不变，仅修改TextField和ClickableText部分配置
Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
    TextField(
        modifier = Modifier.weight(1f), // 新增权重配置
        value = newCommentState.value,
        textStyle = TextStyle(
            fontSize = 16.sp,
            color = MaterialTheme.colors.primary
        ),
        onValueChange = { newCommentState.value = it },
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = Color.White
        ),
        keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Sentences),
        maxLines = 3, // 新增最大行数配置，可按需调整
        placeholder = {
            Text(
                "Add your comment",
                color = colorResource(R.color.disabled_gray)
            )
        }
    )
    Spacer(modifier = Modifier.width(8.dp))
    ClickableText(
        modifier = Modifier.defaultMinSize(70.dp),
        text = AnnotatedString("Post"),
        style = TextStyle(
            color = if (newCommentState.value.text.isNullOrEmpty())
                colorResource(
                    R.color.disabled_gray
                ) else colorResource(R.color.green),
            fontSize = 20.sp,
        ),
        onClick = {
            if (newCommentState.value.text.isNullOrEmpty())
                Toast.makeText(
                    context,
                    "Cant post empty comment!",
                    Toast.LENGTH_SHORT
                ).show()
            else
                coroutineScope.launch { createComment(context) }
        },
    ) 
}

内容的提问来源于stack exchange，提问作者Harshit Agrawal