如何在macOS的NavigationSplitView侧边栏添加随折叠隐藏的底部按钮

要实现固定在侧边栏底部、且随侧边栏折叠隐藏的按钮，核心是把按钮嵌入侧边栏的视图结构内，而不是使用全局Toolbar（全局Toolbar的元素不会随侧边栏折叠消失）。

实现代码示例 #

首先定义侧边栏视图，通过VStack+Spacer将按钮固定在底部：

struct SidebarView: View {
    let addUserAction: () -> Void
    
    var body: some View {
        VStack {
            // 侧边栏核心内容（示例为列表）
            List {
                Text("用户A")
                Text("用户B")
                Text("用户C")
            }
            .navigationTitle("用户列表")
            
            // 用Spacer占据剩余空间，将按钮推到底部
            Spacer()
            
            // 底部添加按钮
            Button(action: addUserAction) {
                Label("创建新用户", systemImage: "person.crop.circle.badge.plus")
                    .frame(maxWidth: .infinity) // 撑满侧边栏宽度
            }
            .buttonStyle(.borderedProminent) // 贴近Xcode风格的按钮样式
            .padding(.horizontal, 12)
            .padding(.bottom, 16)
            .help("新用户")
        }
    }
}

然后在NavigationSplitView中使用该侧边栏：

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            SidebarView(addUserAction: {
                // 这里写添加用户的逻辑
                print("触发添加用户操作")
            })
        } detail: {
            Text("选择用户查看详情")
        }
    }
}

关键说明 #

• 按钮属于侧边栏视图的一部分，因此侧边栏折叠时，按钮会同步隐藏，完全符合需求。
• Spacer()会自动占据侧边栏内容和底部之间的所有空白，确保按钮始终固定在底部。
• 给按钮设置frame(maxWidth: .infinity)可以让按钮宽度适配侧边栏，视觉上更协调。

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