SwiftUI问题：键盘弹出时Toolbar随视图上移，需仅TextField上移

问题描述 #

我在NavigationStack中创建了带自定义Toolbar的视图，键盘弹出时整个视图（包括Toolbar）都会被顶起。尝试在各处添加.ignoresSafeArea(.keyboard, edges: .bottom)无效；用ScrollView包裹后Toolbar不再移动，但会显示边框，不符合需求。需要实现仅键盘显示时TextField上移的效果，已经折腾4小时了，求指出操作错误。

原代码 #

ZStack{
    NavigationStack {
        GeometryReader { geometry in
            ZStack{
                ZStack{
                    RoundedRectangle(cornerRadius: 30)
                        .frame(width: 370, height: 500)
                        .foregroundColor(Color(red: 244 / 255, green: 246 / 255, blue: 251 / 255))
                    VStack{
                        NavigationLink(destination: SomeView()
                            .environmentObject(userViewModel)) {
                                ZStack{
                                    RoundedRectangle(cornerRadius: 30)
                                        .foregroundColor(.white)
                                        .frame(width: 300, height: 75)
                                    Text("bla bla bla")
                                        .lineLimit(2)
                                        .frame(width: 265, height: 75)
                                        .font(.custom("Roboto-Regular", size: 15))
                                        .multilineTextAlignment(.center)
                                        .foregroundColor(.black)
                                }
                                .padding(.top, 15)
                            }
                    }
                    .frame(width: 370, height: 500, alignment: .center)
                }
                .onTapGesture {
                    promtIsFocused = false
                }
            
            HStack {
                TextField("Type something", text: $text)
                    .font(.custom("Roboto-Regular", size: 15))
                    .foregroundColor(.black)
                    .focused($promtIsFocused)
                NavigationLink(destination: SomeView()
                    .environmentObject(userViewModel)) {
                    Image("send")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 35, height: 35)
                }
                .simultaneousGesture(TapGesture().onEnded {
                    promtIsFocused = false
                    text = ""
                })
            }
            .padding(.all)
            .overlay(
                RoundedRectangle(cornerRadius: 30)
                    .stroke(Color(red: 229 / 255, green: 230 / 255, blue: 235 / 255), lineWidth: 1)
            )
            .background(Color(red: 244 / 255, green: 246 / 255, blue: 251 / 255)
                .cornerRadius(30))
            .padding(.horizontal, 15)
            .padding(.vertical, 15)
            .padding(.top, geometry.size.height * 0.9)
        }
        .background(.white)
        .onTapGesture {
            promtIsFocused = false
        }
    }
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            Image("logo")
                .resizable()
                .scaledToFit()
                .frame(height: 30)
                .padding(.leading, 7)
        }
        
        ToolbarItemGroup(placement: .navigationBarTrailing) {
            
            Button(action: {
                
            }) {
                ZStack{
                    RoundedRectangle(cornerRadius: 30)
                        .foregroundColor(Color(red: 229 / 255, green: 230 / 255, blue: 235 / 255))
                        .frame(width: 80, height: 40)
                    HStack{
                        Image("stars")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 40)
                    }
                }
            }

            Button(action:{
                isSideMenuOpened.toggle()
            }) {
                Image("menu")
                    .resizable()
                    .scaledToFit()
                    .frame(height: 22)
                    .padding(.leading, 7)
            }
        }
    }
}
SideMenu(isShowing: $isSideMenuOpened, showingPaywall: $showingPaywall, attemts: $attempts)
    .environmentObject(userViewModel)
}

核心问题分析 #

你用GeometryReader硬编码了TextField的位置（.padding(.top, geometry.size.height * 0.9)），这种固定位置的写法会和SwiftUI原生的键盘自动适配逻辑冲突。另外，.ignoresSafeArea(.keyboard)没生效是因为作用层级不对，没有放在正确的容器上。

修复方案 #

步骤1：重构布局结构 #

移除GeometryReader，改用VStack+Spacer将TextField自动推到底部，让SwiftUI布局系统接管位置管理。

步骤2：正确设置忽略键盘安全区 #

给NavigationStack内部的根视图添加.ignoresSafeArea(.keyboard, edges: .top)，确保Toolbar不随键盘上移，同时TextField能自动适配。

步骤3：保留原有交互逻辑 #

保留点击空白处关闭键盘的手势，不影响原有功能。

修改后的完整代码 #

ZStack{
    NavigationStack {
        VStack { // 用VStack替代嵌套ZStack+GeometryReader的硬布局
            // 原主内容区域
            ZStack{
                RoundedRectangle(cornerRadius: 30)
                    .frame(width: 370, height: 500)
                    .foregroundColor(Color(red: 244 / 255, green: 246 / 255, blue: 251 / 255))
                VStack{
                    NavigationLink(destination: SomeView()
                        .environmentObject(userViewModel)) {
                            ZStack{
                                RoundedRectangle(cornerRadius: 30)
                                    .foregroundColor(.white)
                                    .frame(width: 300, height: 75)
                                Text("bla bla bla")
                                    .lineLimit(2)
                                    .frame(width: 265, height: 75)
                                    .font(.custom("Roboto-Regular", size: 15))
                                    .multilineTextAlignment(.center)
                                    .foregroundColor(.black)
                            }
                            .padding(.top, 15)
                        }
                }
                .frame(width: 370, height: 500, alignment: .center)
            }
            .onTapGesture {
                promtIsFocused = false
            }
            
            Spacer() // 用Spacer将TextField推至底部
            
            // TextField区域
            HStack {
                TextField("Type something", text: $text)
                    .font(.custom("Roboto-Regular", size: 15))
                    .foregroundColor(.black)
                    .focused($promtIsFocused)
                NavigationLink(destination: SomeView()
                    .environmentObject(userViewModel)) {
                    Image("send")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 35, height: 35)
                }
                .simultaneousGesture(TapGesture().onEnded {
                    promtIsFocused = false
                    text = ""
                })
            }
            .padding(.all)
            .overlay(
                RoundedRectangle(cornerRadius: 30)
                    .stroke(Color(red: 229 / 255, green: 230 / 255, blue: 235 / 255), lineWidth: 1)
            )
            .background(Color(red: 244 / 255, green: 246 / 255, blue: 251 / 255)
                .cornerRadius(30))
            .padding(.horizontal, 15)
            .padding(.vertical, 15)
        }
        .background(.white)
        .onTapGesture {
            promtIsFocused = false
        }
        .ignoresSafeArea(.keyboard, edges: .top) // 指定顶部安全区忽略键盘，Toolbar保持不动
    }
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            Image("logo")
                .resizable()
                .scaledToFit()
                .frame(height: 30)
                .padding(.leading, 7)
        }
        
        ToolbarItemGroup(placement: .navigationBarTrailing) {
            Button(action: {}) {
                ZStack{
                    RoundedRectangle(cornerRadius: 30)
                        .foregroundColor(Color(red: 229 / 255, green: 230 / 255, blue: 235 / 255))
                        .frame(width: 80, height: 40)
                    HStack{
                        Image("stars")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 40)
                    }
                }
            }

            Button(action:{
                isSideMenuOpened.toggle()
            }) {
                Image("menu")
                    .resizable()
                    .scaledToFit()
                    .frame(height: 22)
                    .padding(.leading, 7)
            }
        }
    }
    
    SideMenu(isShowing: $isSideMenuOpened, showingPaywall: $showingPaywall, attemts: $attempts)
        .environmentObject(userViewModel)
}

效果说明 #

• 键盘弹出时，TextField会自动上移避免被遮挡，Toolbar保持固定在顶部不动。
• 保留了原有所有交互逻辑，布局更符合SwiftUI的原生适配规则。

内容的提问来源于stack exchange，提问作者Baturay Koç