SwiftUI中如何将TextField垂直居中于其背景区域？

你遇到的问题是底部区域的TextField无法垂直居中，偏下的原因主要是系统自带的RoundedBorderTextFieldStyle包含默认的内边距与垂直布局偏移，再加上外层叠加的padding，导致整体位置错位。

修复方案 #

可以通过两种方式解决：

方案1：调整系统样式的padding与对齐

修改底部的HStack代码，明确设置垂直对齐，并清理多余的padding：

HStack(alignment: .center, spacing: 10) {
    TextField("Send a message", text: $textFieldContent)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        .padding(.leading, 10)
        .padding(.vertical, 0) // 移除垂直方向的额外padding
        .focusable(false)
    Button(action: {}) {
        Text("Send")
            .foregroundColor(.blue)
            .padding(.vertical, 8) // 让按钮高度与文本框匹配
    }
    .buttonStyle(PlainButtonStyle())
    .padding(.trailing, 20)
}
.padding(.vertical, 8) // 给HStack设置统一的垂直内边距，保证整体居中

方案2：自定义TextField样式（更可控）

放弃系统的RoundedBorderTextFieldStyle，自定义样式完全控制尺寸和位置：

HStack(alignment: .center, spacing: 10) {
    TextField("Send a message", text: $textFieldContent)
        .padding(12) // 自定义内边距
        .background(Color.white)
        .cornerRadius(25)
        .focusable(false)
        .padding(.leading, 10)
    Button(action: {}) {
        Text("Send")
            .foregroundColor(.blue)
            .padding(.vertical, 12) // 匹配文本框的垂直内边距
    }
    .buttonStyle(PlainButtonStyle())
    .padding(.trailing, 20)
}
.padding(.vertical, 4)

原理说明 #

系统的RoundedBorderTextFieldStyle内部有默认的垂直间距，会让文本框本身的重心偏下；通过明确HStack的.center对齐，同时统一控件的垂直padding，就能让TextField和按钮在区域内完全垂直居中。

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