SwiftUI中仅在MessageView隐藏底部TabBar的实现方法

问题出在你给TabBarView里的所有子视图统一设置了.toolbarBackground(.visible, for: .tabBar)，这会覆盖MessageView里的隐藏设置。我们可以通过一个全局绑定变量来动态控制TabBar的显示状态，仅在进入MessageView时隐藏它。

步骤1：修改TabBarView，添加绑定状态控制TabBar #

更新TabBarView代码，新增绑定变量控制TabBar显示：

import SwiftUI

struct TabBarView: View {
    @AppStorage("isDarkMode") var isDarkMode: Bool = false
    @Binding var selectedTab: Int
    // 新增绑定变量控制TabBar显示
    @Binding var showTabBar: Bool
    
    var body: some View {
        TabView(selection: $selectedTab) {
            Group {
                ContactsView(isDarkMode: $isDarkMode)
                    .tabItem {
                        Image(systemName: "person")
                        Text("Contacts")
                    }
                    .tag(0)
                
                CallsView(isDarkMode: $isDarkMode)
                    .tabItem {
                        Image(systemName: "phone")
                        Text("Calls")
                    }
                    .tag(1)
                
                // 传递showTabBar绑定给ChatsView
                ChatsView(isDarkMode: $isDarkMode, showTabBar: $showTabBar)
                    .tabItem {
                        Image(systemName: "bubble.left")
                        Text("Chats")
                    }
                    .tag(2)
                
                SettingsView()
                    .environmentObject(AuthViewModel())
                    .tabItem {
                        Image(systemName: "gearshape")
                        Text("Settings")
                    }
                    .tag(3)
            }
            // 根据绑定变量动态设置TabBar的可见性
            .toolbar(showTabBar ? .visible : .hidden, for: .tabBar)
            // 确保背景也跟随状态变化
            .toolbarBackground(showTabBar ? .automatic : .hidden, for: .tabBar)
        }
    }
}

struct TabBarView_Previews: PreviewProvider {
    @State static var mockSelectedTab = 2
    @State static var mockShowTabBar = true
    static var previews: some View {
        TabBarView(selectedTab: $mockSelectedTab, showTabBar: $mockShowTabBar)
    }
}

步骤2：更新ChatsView，传递绑定变量给MessageView #

修改ChatsView，接收showTabBar绑定，并在导航到MessageView时控制这个变量：

import SwiftUI

struct ChatsView: View {
    @Binding var isDarkMode: Bool
    // 新增接收showTabBar绑定
    @Binding var showTabBar: Bool
    @State private var isEditing = false
    @State private var selectedContacts: Set<UUID> = []
    @State private var showNewMessageSheet = false
    
    var contacts = [
        Contact(name: "Alice", avatar: "👩", messages: [Message(text: "Hi", timestamp: Date())]),
        Contact(name: "Bob", avatar: "👨", messages: [Message(text: "Hello", timestamp: Date())])
    ]
    
    var body: some View {
        ZStack {
            List(selection: $selectedContacts) {
                ForEach(contacts) { contact in
                    NavigationLink(destination: 
                        MessageView(isDarkMode: $isDarkMode, contact: contact)
                            // 进入MessageView时隐藏TabBar
                            .onAppear {
                                showTabBar = false
                            }
                            // 离开MessageView时恢复显示TabBar
                            .onDisappear {
                                showTabBar = true
                            }
                    ) {
                        HStack {
                            Text(contact.avatar)
                                .font(.largeTitle)
                            
                            VStack(alignment: .leading) {
                                Text(contact.name)
                                    .font(.headline)
                                
                                Text(contact.messages.last?.text ?? "")
                                    .font(.subheadline)
                                    .foregroundColor(.gray)
                            }
                            
                            Spacer()
                            
                            Text(formatDate(contact.messages.last?.timestamp ?? Date()))
                                .font(.subheadline)
                                .foregroundColor(.gray)
                        }
                    }
                    .listRowBackground(Color.clear)
                    .tag(contact.id)
                }
            }
            // 原有的toolbar和其他设置保持不变
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    if isEditing {
                        Button("Done", action: {
                            isEditing.toggle()
                        })
                    } else {
                        Button("Edit", action: {
                            isEditing.toggle()
                        })
                    }
                }
                
                ToolbarItem(placement: .navigationBarTrailing) {
                    if isEditing {
                        HStack {
                            Button("Archive", action: {
                                // Archive action
                            })
                            
                            Button("Delete", action: {
                                // Delete action
                            })
                            .disabled(selectedContacts.isEmpty)
                        }
                    } else {
                        Button(action: {
                            showNewMessageSheet.toggle()
                        }) {
                            Image(systemName: "square.and.pencil")
                        }
                    }
                }
            }
            .background(isDarkMode ? AnyView(DarkMode()) : AnyView(LightMode()))
            .scrollContentBackground(.hidden)
            .navigationBarTitleDisplayMode(.inline)
            .navigationBarTitle("Chats", displayMode: .inline)
            .environment(\.editMode, .constant(isEditing ? EditMode.active : EditMode.inactive))
            .onAppear {
                self.isEditing = false
            }
        }
        .environment(\.colorScheme, isDarkMode ? .dark : .light)
        .sheet(isPresented: $showNewMessageSheet) {
            ContactsView(isDarkMode: $isDarkMode)
        }
    }
}

struct ChatsView_Previews: PreviewProvider {
    @State static var isDarkMode = false
    @State static var showTabBar = true
    static var previews: some View {
        ChatsView(isDarkMode: $isDarkMode, showTabBar: $showTabBar)
    }
}

步骤3：移除MessageView中多余的TabBar隐藏代码 #

删除MessageView里的.toolbar(.hidden, for: .tabBar)，因为现在由全局绑定变量控制：

import SwiftUI

struct MessageView: View {
    @State private var messageText: String = ""
    @State private var isMicButton: Bool = true
    @Binding var isDarkMode: Bool
    
    var contact: Contact
    
    var body: some View {
        VStack {
            ScrollView {
                // List of messages
            }
            .onTapGesture {hideKeyboard()}
            // Message Input Area
            HStack {
                Button(action: {
                    // Add Media Action
                }) {
                    Image(systemName: "photo")
                }

                TextField("Type a message", text: $messageText)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.horizontal)

                if messageText.isEmpty {
                    Button(action: {
                        if isMicButton {
                            // Send Audio Message
                        } else {
                            // Send Video Message
                        }
                        isMicButton.toggle()
                    }) {
                        Image(systemName: isMicButton ? "mic.fill" : "video.fill")
                    }
                } else {
                    Button(action: {
                        // Send Text Message
                        messageText = ""
                    }) {
                        Image(systemName: "paperplane.fill")
                    }
                }
            }
            .padding(.horizontal)
        }
        .background(isDarkMode ? AnyView(DarkMode()) : AnyView(LightMode()))
        .navigationBarTitleDisplayMode(.inline)
        // 移除这行代码
        // .toolbar(.hidden, for: .tabBar)
        .toolbar {
            ToolbarItem(placement: .principal) {
                VStack(alignment: .center) {
                    Text(contact.name)
                        .font(.headline)
                    Text("Last Active: Today")
                        .font(.subheadline)
                        .foregroundColor(.gray)
                }
            }
            
            ToolbarItem(placement: .navigationBarTrailing) {
                Text(contact.avatar)
                    .font(.largeTitle)
            }
        }
    }
}

struct MessageView_Previews: PreviewProvider {
    @State static var isDarkMode = false
    static var previews: some View {
        MessageView(isDarkMode: $isDarkMode, contact: Contact(name: "Alice", avatar: "👩", messages: [Message(text: "Hi", timestamp: Date())]))
    }
}

步骤4：在根视图初始化绑定变量 #

假设你的根视图是TabBarView的父视图，需要初始化showTabBar状态变量并传递进去：

// 示例根视图
struct ContentView: View {
    @State private var selectedTab = 2
    @State private var showTabBar = true
    
    var body: some View {
        NavigationStack {
            TabBarView(selectedTab: $selectedTab, showTabBar: $showTabBar)
        }
    }
}

这样修改后，TabBar会在所有视图中正常显示，只有进入MessageView时自动隐藏，返回ChatsView时自动恢复显示。

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