SwiftUI 中的 FocusState 更改导致键盘弹跳

Question

我正在 SwiftUI 中为 iOS 制作一个登录界面。用户应该能够通过点击软件键盘上的“下一步”按钮轻松地从用户名文本字段切换到密码文本字段。它运行良好，但由于某种原因在两个文本字段之间切换时键盘总是弹跳一点。编辑：正如this answer 中所建议的那样，我在 VStack 中添加了一个 Spacer 以使其填充可用空间。文本字段不再弹跳，但不幸的是键盘仍然弹跳。我更新了代码和 GIF 以反映我的更改。

谷歌搜索了一下，这似乎不是一个很常见的问题。 This question 似乎与发生在我身上的事情相似，但是按照答案并将文本字段包装在 ScrollView 或 GeometryReader 中并没有改变任何东西。这是我的代码：

struct AuthenticationView: View {
  @State var userName: String = ""
  @State var userAuth: String = ""
  
  @FocusState var currentFocus: FocusObject?
  enum FocusObject: Hashable { case name, auth }
  
  var body: some View {
    VStack(spacing: 8) {
      TextField("Username", text: $userName)
        .focused($currentFocus, equals: .name)
        .padding(8).background(Color.lightGray)
        .cornerRadius(8).padding(.bottom, 8)
        .textInputAutocapitalization(.never)
        .onSubmit { currentFocus = .auth }
        .autocorrectionDisabled(true)
        .keyboardType(.asciiCapable)
        .textContentType(.username)
        .submitLabel(.next)
      
      SecureField("Password", text: $userAuth)
        .focused($currentFocus, equals: .auth)
        .padding(8).background(Color.lightGray)
        .cornerRadius(8).padding(.bottom, 16)
        .textInputAutocapitalization(.never)
        .onSubmit { currentFocus = nil }
        .autocorrectionDisabled(true)
        .keyboardType(.asciiCapable)
        .textContentType(.password)
        .submitLabel(.done)
      
      Spacer() // This fixes the text fields
      // But it does not fix the keyboard
    }.padding(32)
  }
}

Answer 1

您当前的布局说：

将编辑字段放入 VStack。 在父视图中布局 VStack定心它在可用空间中。请注意，VStack 仅使用最小大小。

现在，当键盘出现时，父视图的可用空间，即它的高度，将相应减少。

因为 VStack 是居中布局的，所以文本字段会上下跳动。

有几个选项：

确保 VStack 扩展其高度并且文本字段在顶部对齐。例如使用Spacer：

    VStack(spacing: 8) {
      TextField("Username", text: $userName)
        ...   
    
      SecureField("Password", text: $userAuth)
        ...
    
      Spacer()
    }.padding(32)

使用滚动视图：

    ScrollView {

        Spacer(minLength: 80) // give some space at the top

        VStack(spacing: 8) {
          TextField("Username", text: $userName)
          ...   
    
         SecureField("Password", text: $userAuth)
         ...
    
        }.padding(32)
    }

它可能看起来不漂亮，但它应该给你一个想法，在哪里解决这个问题（你可能想要使用 GeometryReader 和可能的 ScrollView 来完善你的布局）。

另一种选择是使用Form。将您的字段放入其中，并使用Form 您还可以获得一个很好的开始，这看起来很不错。 Form 起作用的原因与它与 Spacer （在顶部对齐字段）和 ScrollView 一起使用的原因相同。

不幸的是，当您点击“下一步”时键盘会暂时消失。到目前为止，我对此没有解决方案。

Answer 2

我也有同样的问题。 你找到弹跳的解决方案了吗？