如何将Android Compose TextField的标签与输入文本置于同一水平轴？

完全可以实现这种布局，利用Compose的Row容器就能轻松将标签与输入框水平排列，适配你节省垂直空间的需求。

下面是一个简单的实现示例：

Row(
    modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    // 左侧标签
    Text(
        text = "用户名:",
        modifier = Modifier.width(60.dp), // 固定标签宽度，保持多输入框对齐整齐
        fontSize = 14.sp,
        color = MaterialTheme.colorScheme.onSurface
    )
    
    // 输入框，占满剩余水平空间
    OutlinedTextField(
        value = inputText,
        onValueChange = { inputText = it },
        modifier = Modifier.weight(1f),
        singleLine = true, // 适配短文本输入，限制单行
        placeholder = { Text("请输入") },
        // 不再使用默认label参数，避免标签浮动到上方
    )
}

关键细节说明： #

• 使用Row的verticalAlignment = Alignment.CenterVertically让标签和输入框垂直居中对齐，视觉更协调
• 给标签设置固定宽度，能让多个同类型输入框的标签保持对齐，提升页面整洁度
• 输入框通过weight(1f)占满Row的剩余水平空间，自动适配不同屏幕宽度
• 短文本场景下设置singleLine = true，既符合输入预期，也避免输入框高度动态变化

如果需要更贴合设计风格，还可以结合焦点状态调整标签样式，比如输入框获取焦点时改变标签颜色：

val inputRequester = FocusRequester()
var isFocused by remember { mutableStateOf(false) }

Row(...) {
    Text(
        text = "用户名:",
        color = if (isFocused) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurface,
        modifier = Modifier.width(60.dp),
        fontSize = 14.sp
    )
    
    OutlinedTextField(
        value = inputText,
        onValueChange = { inputText = it },
        modifier = Modifier
            .weight(1f)
            .focusRequester(inputRequester)
            .onFocusChanged { isFocused = it.isFocused },
        singleLine = true,
        placeholder = { Text("请输入") }
    )
}

这样就能完全实现标签在输入框左侧的水平布局，完美适配你节省垂直空间的需求。

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