使用NavigationSplitView时如何隐藏导航切换按钮并自定义标题栏？

问题背景 #

原NavigationView已弃用，改用NavigationSplitView后遇到两个需求：

• 隐藏默认的导航侧边栏切换按钮
• 自定义标题栏：保留标题，同时在右侧添加筛选按钮，实现类似Mail.app的布局效果

解决代码 #

// ...
@State private var columnVisibility: NavigationSplitViewVisibility = .automatic

var body: some View {
    NavigationSplitView(columnVisibility: $columnVisibility) {
        DirectoryList(selection: $selectionDir)
    } content: {
        PaperList(selection: $selectionPaper)
            // 隐藏侧边栏切换按钮
            .toolbar(.hidden, for: .navigationBarSidebarToggle)
            .toolbar {
                // 右侧筛选按钮
                Button {
                    // 这里添加筛选逻辑
                } label: {
                    Label("筛选", systemImage: "line.3.horizontal.decrease.circle")
                }
            }
            // 保留默认标题
            .navigationTitle("Papers")
    } detail: {
        Editor(selectionPaper?.name ?? "")
    }
}
// ...

关键说明 #

1. 隐藏切换按钮：
   使用.toolbar(.hidden, for: .navigationBarSidebarToggle)直接针对侧边栏切换按钮类型隐藏，不会影响其他toolbar元素。

2. 自定义标题栏布局：

   • 默认情况下，navigationTitle会自动将标题放在导航栏中间，添加的toolbar按钮会自动排列在右侧，无需额外的HStack或frame设置。
   • 如果需要更精细的标题自定义（比如修改字体、样式），可以替换navigationTitle为ToolbarItem(placement: .principal)：

     ToolbarItem(placement: .principal) {
         Text("Papers")
             .font(.title2.bold())
     }
     

3. 紧凑环境适配：
   当设备处于窄屏/分屏等紧凑布局时，若需要手动控制侧边栏显示，可以添加自定义按钮来修改columnVisibility状态，例如：

   Button("显示目录") {
       columnVisibility = .all
   }
   

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