SwiftUI中基于TabView实现导航栏工具栏动态隐藏的问题

问题分析 #

当前代码存在两个核心问题：

• ContentView 中的工具栏属于 NavigationStack 层级，TaskListView 里子视图设置的 .toolbar(.visible/hidden) 无法影响父级的工具栏状态。
• TaskListView 中的 selectedTab 未与 TabView 绑定，无法实时追踪当前选中的标签页，导致工具栏按钮无法随标签切换自动更新。

解决方案 #

通过以下步骤修复：

1. 将 TaskListView 中的 selectedTab 改为 @Binding，让父视图 ContentView 共享并控制该状态。
2. 给 TabView 绑定 selectedTab，实时同步当前选中的标签。
3. 在 ContentView 中根据当前选中的标签，控制工具栏添加按钮的显示/隐藏。

修改后的代码 #

TaskListView.swift

struct TaskListView: View {
    
    @ObservedObject var taskStore: TaskStore
    // 将selectedTab改为Binding，让父视图控制状态
    @Binding var selectedTab: Tab
    
    enum Tab {
        case tasks
        case completed
    }
    
    var body: some View {
        // 绑定selectedTab到TabView，实时同步选中状态
        TabView(selection: $selectedTab) {
            List(taskStore.tasks.filter { !$0.isCompleted }, id: \.self) { task in
                NavigationLink(value: task) {
                    VStack {
                        TaskRowView(task: task)
                    }
                    .padding([.leading, .trailing], 20)
                }
                .navigationDestination(for: Task.self) { task in
                    TaskDetailView(task: $taskStore.tasks
                        .first(where: { $0.id == task.id })!)
                }
            }
            .tabItem {
                Image(systemName: "list.bullet.circle")
                Text("Tasks")
            }
            .tag(Tab.tasks)
            
            List(taskStore.tasks.filter { $0.isCompleted }, id: \.self) { task in
                NavigationLink(value: task) {
                    VStack {
                        TaskRowView(task: task)
                    }
                    .padding([.leading, .trailing], 20)
                }
                .navigationDestination(for: Task.self) { task in
                    TaskDetailView(task: $taskStore.tasks
                        .first(where: { $0.id == task.id })!)
                }
            }
            .tabItem {
                Image(systemName: "checkmark.circle")
                Text("Completed")
            }
            .tag(Tab.completed)
        }
    }
    
    struct TaskListView_Previews: PreviewProvider {
        static var previews: some View {
            TaskListView(taskStore: TaskStore(), selectedTab: .constant(.tasks))
        }
    }
}

ContentView.swift

import SwiftUI

struct ContentView: View {
    @StateObject var taskStore = TaskStore()
    // 在ContentView中持有selectedTab状态
    @State private var selectedTab: TaskListView.Tab = .tasks
    
    var body: some View {
        NavigationStack {
            VStack {
                if taskStore.tasks.isEmpty {
                    Text("No tasks found")
                } else {
                    // 将selectedTab绑定传递给TaskListView
                    TaskListView(taskStore: taskStore, selectedTab: $selectedTab)
                }
                Spacer()
            }
            .navigationTitle("My Tasks")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    // 根据选中的标签控制按钮显示
                    if selectedTab == .tasks {
                        NewTaskButtonView(taskStore: taskStore)
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

效果说明 #

• 首次启动默认选中.tasks标签，工具栏显示添加按钮。
• 切换到.completed标签时，工具栏按钮自动隐藏。
• 切回.tasks标签时，按钮重新显示，实现工具栏按钮的自动UI更新。

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