SwiftUI：键盘收起后底部SafeArea未收缩的修复咨询

激活TextField后点击「Open link」跳转至详情页，返回原页面时，带有TextField的红色VStack会停留在屏幕中间，无法回到底部。该问题仅在ZStack首个视图为ScrollView且添加了.ignoresSafeArea(.keyboard)时出现。

问题原因 #

ScrollView的.ignoresSafeArea(.keyboard)修饰符会让视图忽略键盘弹出时的SafeArea变化，当导航返回后，系统未正确重置SafeArea的布局状态，导致底部视图的对齐位置出错。

修复方案1：移除ScrollView的键盘忽略修饰符（简单直接） #

如果不需要ScrollView保持全屏不被键盘遮挡，直接移除.ignoresSafeArea(.keyboard)，让系统自动处理键盘弹出/收起时的布局：

struct ContentView: View {
  @State private var text = ""
  
  var body: some View {
    NavigationStack {
      ZStack(alignment: .bottom) {
        ScrollView {
          Color.green.opacity(0.2)
            .frame(height: 1000)
        }
        // 移除 .ignoresSafeArea(.keyboard)
        
        VStack {
          TextField("", text: $text, prompt: Text("Input"))
            .textFieldStyle(.roundedBorder)
            .padding()
          NavigationLink("Open link") {
            Text("Details view")
          }
        }
        .background { Color.red }
        .background(ignoresSafeAreaEdges: .bottom)
      }
    }
  }
}

修复方案2：强制触发视图重绘（保留原键盘忽略行为） #

如果需要保持ScrollView忽略键盘的全屏状态，可通过添加重绘触发机制，在返回页面时强制重置布局：

struct ContentView: View {
  @State private var text = ""
  @State private var refreshTrigger = false
  
  var body: some View {
    NavigationStack {
      ZStack(alignment: .bottom) {
        ScrollView {
          Color.green.opacity(0.2)
            .frame(height: 1000)
        }
        .ignoresSafeArea(.keyboard)
        
        VStack {
          TextField("", text: $text, prompt: Text("Input"))
            .textFieldStyle(.roundedBorder)
            .padding()
          NavigationLink("Open link") {
            Text("Details view")
          }
        }
        .background { Color.red }
        .background(ignoresSafeAreaEdges: .bottom)
        .onAppear {
          // 返回页面时触发重绘
          refreshTrigger.toggle()
        }
      }
      .id(refreshTrigger) // 通过id变化强制ZStack重绘
    }
  }
}

修复方案3：手动计算SafeArea高度（精确控制布局） #

通过GeometryReader获取底部SafeArea高度，手动固定VStack的底部位置，避免布局偏移：

struct ContentView: View {
  @State private var text = ""
  @State private var bottomSafeAreaHeight: CGFloat = 0
  
  var body: some View {
    NavigationStack {
      GeometryReader { geometry in
        ZStack(alignment: .bottom) {
          ScrollView {
            Color.green.opacity(0.2)
              .frame(height: 1000)
          }
          .ignoresSafeArea(.keyboard)
          
          VStack {
            TextField("", text: $text, prompt: Text("Input"))
              .textFieldStyle(.roundedBorder)
              .padding()
            NavigationLink("Open link") {
              Text("Details view")
            }
          }
          .background { Color.red }
          .padding(.bottom, bottomSafeAreaHeight)
          .onAppear {
            // 获取底部SafeArea高度
            bottomSafeAreaHeight = geometry.safeAreaInsets.bottom
          }
        }
      }
    }
  }
}

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