如何在macOS SwiftUI中实现左中右布局的Toolbar？

问题根因 #

在macOS SwiftUI的Toolbar布局中，直接使用.navigation（左侧）、.principal（中间）、.primaryAction（右侧）三个placement时，由于中间的.principal元素默认不会占据全部可用空间，会导致右侧的.primaryAction元素无法正确对齐到窗口右边缘，而是被挤到中间元素旁边。

修复方案 #

给中间的.principal元素设置frame(maxWidth: .infinity)，让它填充左侧和右侧之间的所有剩余空间，从而将右侧元素推到窗口最右侧。

完整示例代码 #

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .toolbar {
                // 左侧：封面+标题区域
                ToolbarItem(placement: .navigation) {
                    HStack(spacing: 10) {
                        Image(systemName: "square.stack") // 替换为你的封面图
                        Text("我的播放列表") // 替换为你的标题文本
                    }
                }
                
                // 中间：播放控件区域（关键：设置maxWidth撑满中间空间）
                ToolbarItem(placement: .principal) {
                    HStack(spacing: 20) {
                        Button(action: {}) { Image(systemName: "backward.end") }
                        Button(action: {}) { Image(systemName: "play.fill") }
                        Button(action: {}) { Image(systemName: "forward.end") }
                    }
                    .frame(maxWidth: .infinity) // 核心修复代码
                }
                
                // 右侧：检查器开关
                ToolbarItem(placement: .primaryAction) {
                    Toggle(isOn: .constant(false)) {
                        Image(systemName: "sidebar.right")
                    }
                }
            }
    }
}

原理说明 #

1. 左侧元素：.navigation placement默认靠左对齐，不会抢占右侧空间。
2. 中间元素：frame(maxWidth: .infinity)让中间区域自动填充左侧和右侧之间的所有可用空间，相当于在中间控件的左右两侧添加了弹性占位符，强制右侧元素对齐到窗口边缘。
3. 右侧元素：.primaryAction placement在有足够空间时会自动靠右对齐，此时中间元素的撑满设置正好为它留出了最右侧的位置。

扩展优化 #

如果需要在某一侧放置多个元素，可以使用ToolbarItemGroup替代单个ToolbarItem，例如：

// 左侧多个元素分组
ToolbarItemGroup(placement: .navigation) {
    Button(action: {}) { Image(systemName: "arrow.left") }
    HStack(spacing: 10) {
        Image(systemName: "square.stack")
        Text("我的播放列表")
    }
}

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