SwiftUI表单：如何让邮箱输入框下划线与下方圆角框对齐

问题源于Form默认的TextField样式搭配HStack布局，导致邮箱输入框下划线右侧未预留内边距。以下是两种可行的解决方法：

方法一：直接调整输入框内边距与布局 #

给邮箱对应的TextField添加水平内边距，并让外层HStack占满Form宽度，确保输入框能利用剩余空间且左右内边距统一：

struct ContentView: View {
  @State var email = ""
  @State var text = ""

  var body: some View {
      Form {
          HStack{
              Text("E-MAIL: ")
                .font(.subheadline)
              TextField("Your e-mail...", text: $email)
                .padding(.horizontal) // 添加水平内边距
          }
          .frame(maxWidth: .infinity) // 让HStack填充Form的可用宽度

          TextField("type text", text: $text, axis:.vertical)
            .padding()
            .overlay( RoundedRectangle(cornerRadius: 20).stroke(.gray) )
            .lineLimit(6)
            .padding(.top, 20)
      }
      .padding()
  }
}

方法二：自定义TextField样式统一规范 #

如果需要让所有输入框保持一致的内边距风格，可以自定义TextFieldStyle并应用到邮箱输入框上：

struct CustomTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .padding(.horizontal)
    }
}

struct ContentView: View {
  @State var email = ""
  @State var text = ""

  var body: some View {
      Form {
          HStack{
              Text("E-MAIL: ")
                .font(.subheadline)
              TextField("Your e-mail...", text: $email)
                .textFieldStyle(CustomTextFieldStyle()) // 应用自定义样式
          }
          .frame(maxWidth: .infinity)

          TextField("type text", text: $text, axis:.vertical)
            .padding()
            .overlay( RoundedRectangle(cornerRadius: 20).stroke(.gray) )
            .lineLimit(6)
            .padding(.top, 20)
      }
      .padding()
  }
}

两种方法都能让邮箱输入框的下划线左右内边距与下方圆角矩形框尺寸匹配，实现居中对齐的视觉效果。

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