Jetpack Compose按钮布局问题：如何让按钮紧跟输入框右侧

核心解决思路 #

用Row作为根布局容器，内部嵌套BasicTextField和垂直排列按钮的Column，通过权重控制输入框宽度，实现输入框与按钮的横向并排布局。

修改后的完整代码示例 #

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    // 输入字段，设置weight占满剩余空间
    BasicTextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier
            .weight(1f)
            .padding(end = 8.dp)
            .background(Color.LightGray, RoundedCornerShape(4.dp))
            .padding(horizontal = 12.dp, vertical = 8.dp),
        singleLine = true
    )

    // 垂直排列两个按钮
    Column(
        verticalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        Button(onClick = { /* 执行Check逻辑 */ }) {
            Text("Check")
        }
        Button(onClick = { /* 执行Delete逻辑 */ }) {
            Text("Delete")
        }
    }
}

关键细节解析 #

• Row容器配置：fillMaxWidth让布局占满横向空间，verticalAlignment = Alignment.CenterVertically保证输入框和按钮垂直居中对齐，避免视觉上的错位。
• weight(1f)的作用：给BasicTextField添加weight(1f)是解决换行问题的核心——它会让输入框自动填充Row中除按钮区域外的所有可用空间，按钮则保持自身宽度固定在右侧。
• 间距与样式优化：输入框右侧添加padding(end = 8.dp)，按钮列用spacedBy(4.dp)设置按钮间距，让布局更美观。
• singleLine属性：给输入框设置singleLine = true，避免输入内容换行导致整体布局变形。

你之前尝试失败的原因 #

之前用Row/Column没解决问题，大概率是没给输入框设置weight属性。默认情况下，Row内的组件会按自身最小宽度排列，当屏幕空间不足时，按钮就会被挤到下一行。添加weight(1f)后，输入框会优先占据可用空间，按钮自然就能稳定停在右侧。

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