SwiftUI自定义TabBar弹出键盘时上移问题求助

我做了一个自定义TabBar，在其中一个视图里加了搜索栏。现在遇到问题：屏幕键盘弹出时，TabBar会被向上推起一半。我在所有能想到的地方都试了.ignoresSafeArea(.keyboard)，但结果只是TabBar图标消失，TabBar顶部还是停留在上方。折腾了24小时都没解决，求帮忙！

自定义TabBar代码 #

import SwiftUI

enum Tabs: Int {
    case home = 0
    case hot = 1
    case favourites = 2
    case settings = 3
}

struct TabBar: View {
    
    @Binding  var selectedTab : Tabs
    
    var body: some View {
        
        HStack (alignment: .center){
            
            Button {
                selectedTab = .home
            } label: {
                
                GeometryReader { geo in
                    
                    if selectedTab == .home {
                        
                        Rectangle()
                            .foregroundColor(.red)
                            .frame(width: geo.size.width/2, height: 5)
                            .padding(.leading, geo.size.width/4)
                    }
                    VStack (alignment: .center){
                        
                        Image(systemName: "house")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 24, height: 24)
                            .padding(.top, 40.0)
                    }
                    .frame(width: geo.size.width, height: geo.size.height)
                }
                .offset(y: -35)
            }
            .tint(Color.black)
            
            Button {
                selectedTab = .hot
            } label: {
                GeometryReader { geo in
                    
                    if selectedTab == .hot {
                        
                        Rectangle()
                            .foregroundColor(.red)
                            .frame(width: geo.size.width/2, height: 5)
                            .padding(.leading, geo.size.width/4)
                    }
                    VStack (alignment: .center){
                        Image(systemName: "flame")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 24, height: 24)
                            .padding(.top, 40.0)
                    }
                    .frame(width: geo.size.width, height: geo.size.height)
                }
                .offset(y: -35)
            }
            .tint(Color.black)
            
            Button {
                selectedTab = .favourites
            } label: {
                GeometryReader { geo in
                    
                    if selectedTab == .favourites {
                        
                        Rectangle()
                            .foregroundColor(.red)
                            .frame(width: geo.size.width/2, height: 5)
                            .padding(.leading, geo.size.width/4)
                    }
                    
                    VStack (alignment: .center){
                        Image(systemName: "star")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 24, height: 24)
                            .padding(.top, 40.0)
                    }
                    .frame(width: geo.size.width, height: geo.size.height)
                }
                .offset(y: -35)
            }
            .tint(Color.black)
            
            Button {
                selectedTab = .settings
            } label: {
                GeometryReader { geo in
                    
                    if selectedTab == .settings {
                        
                        Rectangle()
                            .foregroundColor(.red)
                            .frame(width: geo.size.width/2, height: 5)
                            .padding(.leading, geo.size.width/4)
                    }
                    
                    VStack (alignment: .center){
                        Image(systemName: "gear")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 24, height: 24)
                            .padding(.top, 40.0)
                    }
                    .frame(width: geo.size.width, height: geo.size.height)
                }
                .offset(y: -35)
            }
            .tint(Color.black)
            
        }
        .frame(height: 20)
    }
}

struct TabBar_Previews: PreviewProvider {
    static var previews: some View {
        TabBar(selectedTab: .constant(.home))
            .ignoresSafeArea(.keyboard)
    }
}

注：我已经把所有尝试过的.ignoresSafeArea(.keyboard)注释都删掉了

搜索栏代码 #

import SwiftUI

struct SearchBarView: View {
    
    @StateObject var im = SearchBarContents()
    
    @State private var query = ""
    
    var body: some View {
        
        NavigationView {
            
            List {
                
                ForEach(im.filteredData) { item in
                    HStack{
                        NavigationLink(destination: ItemView(item: item))
                        {
                            SBarView(item: item)
                        }
                    }
                }
            }
            .navigationTitle("Items")
            .searchable(text: $query,
                        placement: .navigationBarDrawer(displayMode: .always),
                        prompt: "Find an Item") {
            }
            .onSubmit(of: .search) {
                im.search(with: query)
            }
            .onChange(of: query) { newQuery in
                im.search(with: newQuery)
            }
            .onAppear {
                im.search()
            }
        }
    }
}

struct SearchBarView_previews: PreviewProvider {
    static var previews: some View {
        SearchBarView()
    }
}

问题出在自定义TabBar的布局逻辑和安全区域处理方式上，具体调整步骤如下：

1. 固定TabBar到屏幕底部 #

将TabBar的HStack包裹在VStack中，用Spacer()顶起，确保TabBar始终停留在屏幕底部，同时统一处理安全区域：

var body: some View {
    VStack {
        Spacer()
        HStack (alignment: .center){
            // 原Button代码保持不变
        }
        .frame(height: 60) // 调整为合适高度，避免布局压缩
        .background(Color.white) // 添加背景避免和下方内容重叠
    }
    .ignoresSafeArea(.keyboard, edges: .bottom)
}

2. 移除偏移导致的布局错乱 #

删除所有.offset(y: -35)，调整Image的padding(.top)值适配新布局，比如改成padding(.top, 10)，保证图标在TabBar内的位置稳定。

3. 在主视图层级统一处理安全区域 #

确保包含TabBar的主视图（如ContentView）正确布局，不要在子视图上滥用.ignoresSafeArea，而是在TabBar外层统一设置：

struct ContentView: View {
    @State private var selectedTab: Tabs = .home
    
    var body: some View {
        ZStack {
            // 根据选中标签切换视图
            switch selectedTab {
            case .home: HomeView()
            case .hot: SearchBarView()
            case .favourites: FavouritesView()
            case .settings: SettingsView()
            }
            TabBar(selectedTab: $selectedTab)
                .ignoresSafeArea(.keyboard, edges: .bottom)
        }
    }
}

4. 适配新版导航组件（iOS 16+） #

将NavigationView替换为NavigationStack，避免旧组件的布局冲突：

struct SearchBarView: View {
    @StateObject var im = SearchBarContents()
    @State private var query = ""
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(im.filteredData) { item in
                    NavigationLink(destination: ItemView(item: item)) {
                        SBarView(item: item)
                    }
                }
            }
            .navigationTitle("Items")
            .searchable(text: $query,
                        placement: .navigationBarDrawer(displayMode: .always),
                        prompt: "Find an Item")
            .onSubmit(of: .search) {
                im.search(with: query)
            }
            .onChange(of: query) { newQuery in
                im.search(with: newQuery)
            }
            .onAppear {
                im.search()
            }
        }
    }
}

核心原理：通过VStack+Spacer实现TabBar的绝对底部布局，在最外层忽略键盘带来的底部安全区域变化，避免布局被顶起；同时移除不必要的偏移，保证TabBar的尺寸和位置稳定。

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