SwiftUI：TabView内导航栏按钮未显示在顶部问题求助

DevOps 小满

2026-8-20

解决TabView内NavigationView导航栏按钮位置异常问题

你的问题出在TabView中每个NavigationView未设置导航标题，导致系统启用紧凑样式导航栏，ToolbarItem默认显示在导航栏中间而非右侧顶部。

修复方案

给每个Tab内的NavigationView内容添加navigationTitle（即使是空标题也可），同时明确指定ToolbarItem的位置为.navigationBarTrailing，确保按钮定位正确。

修改后的HomeView代码

struct HomeView: View {
    var body: some View {
        TabView {
            NavigationView {
                VStack(alignment: .leading) {
                    Text("Tab 1")
                        .padding(.leading, 30)
                }
                // 添加导航标题，空标题也能维持导航栏正常高度
                .navigationTitle("")
                .toolbar {
                    // 明确指定按钮位置为导航栏右侧
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button(action: {
                            print("person icon pressed")
                        }, label: {
                            Image(systemName: "person.crop.circle").imageScale(.large)
                        })
                    }
                }
            }.tabItem {
                Image(systemName: "list.bullet")
                    .font(.system(size: 26))
                Text("Tab 1")
            }
            
            NavigationView {
                VStack(alignment: .leading) {
                    Text("Tab 2")
                }
                .navigationTitle("")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button(action: {
                            print("Plus icon pressed.")
                        }, label: {
                            Image(systemName: "plus").imageScale(.large)
                        })
                    }
                }
            }.tabItem {
                Image(systemName: "books.vertical")
                    .font(.system(size: 26))
                Text("Tab 2")
            }
        }
    }
}