SwiftUI中如何将ToolbarItem置于侧边栏切换按钮之前？

要实现你需要的按钮顺序逻辑，核心是通过监听侧边栏的可见状态，动态控制自定义按钮的位置和显示，同时隐藏默认的切换按钮。以下是具体实现步骤和代码：

关键思路 #

1. 用NavigationSplitViewVisibility绑定侧边栏状态，精准控制展开/收起。
2. 隐藏详情页的默认导航栏工具栏，完全自定义按钮布局。
3. 根据侧边栏状态分配按钮位置：
   • 侧边栏展开时：切换按钮放在侧边栏的右上角，详情页仅显示关闭按钮。
   • 侧边栏收起时：关闭按钮在前、切换按钮在后，都放在详情页的左侧工具栏。

完整代码示例 #

import SwiftUI

struct ProjectView: View {
    // 跟踪侧边栏的可见状态
    @State private var splitViewVisibility: NavigationSplitViewVisibility = .doubleColumn
    
    var body: some View {
        NavigationSplitView(columnVisibility: $splitViewVisibility) {
            List {
                // 侧边栏内容区域
            }
            .toolbar {
                // 侧边栏展开时，在侧边栏右上角显示收起按钮
                if splitViewVisibility != .detailOnly {
                    ToolbarItemGroup(placement: .topBarTrailing) {
                        Button {
                            splitViewVisibility = .detailOnly
                        } label: {
                            Image(systemName: "chevron.left")
                        }
                    }
                }
            }
        } detail: {
            ZStack {
                // 详情页内容区域
            }
            .toolbar {
                ToolbarItemGroup(placement: .topBarLeading) {
                    // 始终显示关闭按钮
                    Button {
                        print("Close window...")
                    } label: {
                        Image(systemName: "xmark")
                    }
                    
                    // 侧边栏收起时，在关闭按钮右侧显示展开按钮
                    if splitViewVisibility == .detailOnly {
                        Button {
                            splitViewVisibility = .doubleColumn
                        } label: {
                            Image(systemName: "sidebar.left")
                        }
                    }
                }
            }
            // 隐藏详情页的默认导航栏（包含默认切换按钮）
            .toolbar(.hidden, for: .navigationBar)
        }
        .navigationSplitViewStyle(.balanced)
    }
}

代码说明 #

• splitViewVisibility：绑定侧边栏状态，用来判断当前是展开还是收起状态。
• 侧边栏的工具栏：仅在侧边栏可见时显示收起按钮，对应你视觉示例中「详情页+侧边栏」的切换按钮位置。
• 详情页的工具栏：始终显示关闭按钮，仅在侧边栏收起时追加展开按钮，保证关闭按钮在前的顺序。
• .toolbar(.hidden, for: .navigationBar)：彻底隐藏默认的切换按钮，避免和自定义按钮冲突。

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