SwiftUI NavigationStack键盘抬起返回时视图跳动问题求助

问题场景 #

给NavigationStack添加底部padding以预留自定义TabBar空间后，从包含TextField的详情视图在键盘弹出状态下返回根视图，根视图会出现上下跳动的异常。该问题在iOS 18中仍存在。

最小复现代码 #

@State private var text = ""

var body: some View {
    NavigationStack {
      NavigationLink {
        TextField("Placeholder", text: $text)
      } label: {
        Text("Click to open detail")
            .padding()
            .background(.blue.opacity(0.2))
      }
    }.padding(.bottom, 50) // 为自定义TabBar预留空间
}

解决方案 #

直接给NavigationStack添加底部padding会干扰系统的键盘布局计算，导致返回时的跳动。推荐以下两种更符合SwiftUI布局逻辑的方案：

方案1：将底部padding移至NavigationStack内部容器 #

把底部padding应用到NavigationStack内部的根容器视图上，同时配合忽略底部键盘安全区域，让系统正确处理布局动画：

@State private var text = ""

var body: some View {
    NavigationStack {
        VStack {
            NavigationLink {
                TextField("Placeholder", text: $text)
            } label: {
                Text("Click to open detail")
                    .padding()
                    .background(.blue.opacity(0.2))
            }
            Spacer() // 确保内容不会被底部padding挤到上方
        }
        .padding(.bottom, 50) // 内部容器添加padding
        .ignoresSafeArea(.keyboard, edges: .bottom)
    }
}

方案2：使用safeAreaInset替代直接padding #

利用SwiftUI的safeAreaInset来预留TabBar空间，这是系统推荐的自定义底部导航栏布局方式，能自动适配键盘和视图的交互：

@State private var text = ""

var body: some View {
    NavigationStack {
        NavigationLink {
            TextField("Placeholder", text: $text)
        } label: {
            Text("Click to open detail")
                .padding()
                .background(.blue.opacity(0.2))
        }
    }
    .safeAreaInset(edge: .bottom, spacing: 0) {
        // 用透明占位视图模拟TabBar高度，实际开发中替换为你的自定义TabBar
        Color.clear.frame(height: 50)
    }
    .ignoresSafeArea(.keyboard, edges: .bottom)
}

原理说明 #

直接给NavigationStack添加外部padding会让视图的整体布局边界包含该padding，当键盘弹出/收起时，系统的布局调整逻辑会和这个外部padding冲突，导致返回时的跳动。而将padding移至内部容器或使用safeAreaInset，能让布局逻辑符合SwiftUI的系统行为，配合ignoresSafeArea(.keyboard, edges: .bottom)可以避免键盘动画和视图布局的冲突。

内容的提问来源于stack exchange，提问作者Vojta Böhm