SwiftUI中仅聚焦顶部TextField时VStack内TextField偏移问题

问题描述 #

作为Swift及App开发新手，编写的登录界面出现以下异常：点击顶部TextField弹出键盘时，视图整体上移，但顶部TextField会被推出VStack范围；点击第二个TextField时则恢复正常。尝试过为VStack元素添加padding、设置ignoreSafeArea、添加Spacer等方法均无效，最终找到可行的代码方案。

问题复现代码 #

import SwiftUI

struct Login_Sign_Up: View {
    var body: some View {
        ZStack {
            ColorPalette.greenDark.ignoresSafeArea()
            LoginScreen()
            .frame(width: 320, height: 270)
            .cornerRadius(20)
        }
        
    }
}

// 登录界面
struct LoginScreen: View {
  @State private var email = ""
  @State private var password = ""

  var body: some View {
      NavigationView {
          VStack(spacing: 16.0) {
              Text("Login")
              TextField("Email", text: $email)
                  .frame(width: 260)
                  .padding()
                  .overlay(
                    RoundedRectangle(cornerRadius: 10)
                    .stroke(ColorPalette.greenDarker, lineWidth: 2)
                   )
              TextField("Password", text: $password)
                  .frame(width: 260)
                  .padding()
                  .overlay(
                    RoundedRectangle(cornerRadius: 10)
                    .stroke(ColorPalette.greenDarker, lineWidth: 2)
                   )
              Button("Sign In") {
                  // TODO: 实现用户登录逻辑
              }
              Text("Don't have an account? Sign up")
              .onTapGesture {
                  // TODO: 跳转到注册界面
              }
        }
      }
      .ignoresSafeArea(.keyboard)
  }
}

可行最终代码 #

import SwiftUI

struct Login_Sign_Up: View {
    var body: some View {
        LoginScreen()
    }
}

// 登录界面
struct LoginScreen: View {
  @State private var email = ""
  @State private var password = ""

  var body: some View {
      NavigationView {
          ZStack {
              ColorPalette.green.ignoresSafeArea()
              VStack(spacing: 20) {
                  Text("Login")
                  TextField("Email", text: $email)
                      .frame(width: 260)
                      .padding()
                      .overlay(
                        RoundedRectangle(cornerRadius: 10)
                        .stroke(ColorPalette.greenDarker, lineWidth: 2)
                       )
                  TextField("Password", text: $password)
                      .frame(width: 260)
                      .padding()
                      .overlay(
                        RoundedRectangle(cornerRadius: 10)
                        .stroke(ColorPalette.greenDarker, lineWidth: 2)
                       )
                  Button("Sign In") {
                      // TODO: 实现用户登录逻辑
                  }
                  Text("Don't have an account? Sign up")
                  .onTapGesture {
                      // TODO: 跳转到注册界面
                  }
              }
              .frame(width: 320, height: 270, alignment: .center)
              .background(Color.white)
              .cornerRadius(20)
          }
          
      }
  }
}

关键修改说明 #

• 移除外层Login_Sign_Up中的ZStack布局，将背景色移至LoginScreen内部的ZStack中，让视图层级更清晰
• 将登录表单的固定宽高、白色背景、圆角属性从LoginScreen外层迁移到内部VStack上，确保整个表单作为一个独立的容器单元，避免键盘弹出时的布局错乱
• 删除了.ignoresSafeArea(.keyboard)设置，让SwiftUI默认处理键盘弹出时的视图调整逻辑，保证TextField始终在容器范围内

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