激活键盘后用NavigationLink返回页面出现布局异常求助

问题现象 #

• 激活搜索栏键盘后，直接点击NavigationLink跳转至详情页
• 返回原页面时，原键盘位置出现白色空白区域，页面整体空间被压缩
• 重新激活键盘后再关闭，页面布局可恢复正常

推测原因 #

跳转时NavigationLink的操作优先级高于键盘关闭逻辑，导致键盘虽已关闭，但页面布局未及时收到重置通知，残留空白区域。

解决方案 #

核心思路是确保跳转前强制关闭键盘，让页面布局有足够时间重置，以下提供两种可行方案：

方案1：给NavigationLink添加同步点击手势，跳转前关闭键盘

修改itemListComponent中的NavigationLink代码，添加同步点击手势触发键盘关闭：

LazyVStack {
  ForEach(items) { item in
    NavigationLink(
      destination:ItemDetailView(item: item, isShowing: $viewModel.isItemDetailViewPresented)
    ) {
      ItemCellView(item: item)
    }
    .isDetailLink(false)
    // 添加同步手势，点击时先关闭键盘
    .simultaneousGesture(TapGesture().onEnded {
      self.endTextEditing()
    })
  }
}

方案2：在页面消失时强制关闭键盘

在HomePageView的根视图上添加onDisappear修饰符，当页面跳转到详情页时自动关闭键盘：

ZStack(alignment: .bottomTrailing) {
  // ...原有代码
}
.onTapGesture {
  self.endTextEditing()
}
// 添加页面消失时关闭键盘的逻辑
.onDisappear {
  self.endTextEditing()
}
// ...其他修饰符

补充说明 #

两种方案都依赖你已实现的endTextEditing()方法，确保该方法能正确让所有输入框失去焦点：

extension View {
    func endTextEditing() {
        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

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