macOS 13：如何用SwiftUI实现Message.app风格设置工具栏？

我正尝试创建一个和Message.app设置窗口样式完全一致的设置界面。用Apple提供的基础代码虽然能运行，但窗口显示尺寸过小；自己写的代码已经接近目标效果，但还是没法匹配Message.app的设置视图。

当前我的实现存在两个问题：

• 选项按钮的文本无法正常显示
• 界面上方的布局区域被截断

我尝试了三种ToolbarItem的实现方式，除了hover时的宽度不同，效果基本一致，当前截图对应的是代码里最后一个ToolbarItem的写法。如果能实现目标效果，我打算把它封装成modifier或者viewBuilder来做通用化实现，求各位开发者给点建议。

我的代码 #

import SwiftUI

@main
struct WKB_MultiWindow_PreferencesApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        Settings {
            SettingView()
                .frame(minWidth: 400, maxWidth: 500, minHeight: 500, maxHeight: 500, alignment: .center)
        }.commands {
            // This is possible using my own toolbar setup?
            ToolbarCommands() // ?????
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello")
                .padding()
            Spacer()
        }
        .frame(width: 500, height: 400)
    }
}

struct SettingView: View {
    var body: some View {
        Color.clear
            .toolbar {
                ToolbarItem(placement: .principal) {
                    Button {
                    } label: {
                        Label {
                            Text("General")
                        } icon: {
                            Image(systemName: "gearshape")
                        }
                        .font(.title)
                        //.frame(width: 100, height: 100)
                        .background(Color.white.opacity(0.01))
                        .padding(.horizontal, 4.0)
                        .padding(.vertical, 1.0)
                    }
                }
                ToolbarItem(placement: .principal) {
                    Button {
                    } label: {
                        Label {
                            Text("General")
                        } icon: {
                            Image(systemName: "gearshape")
                        }
                    }
                    .font(.title)
                    //.frame(width: 100, height: 100)
                    .background(Color.white.opacity(0.01))
                    .padding(.horizontal, 4.0)
                    .padding(.vertical, 1.0)
                }
                ToolbarItem(placement: .principal) {
                    Button(action: {print("text")}, label: {
                        VStack {
                            Image(systemName: "gearshape")
                            Text("General")
                        }
                        .font(.title)
                        //.frame(width: 100, height: 100)
                        .background(Color.white.opacity(0.01))
                        .padding(.horizontal, 4.0)
                        .padding(.vertical, 1.0)
                    })
                }
                ToolbarItem {
                    Button(action: save, label: {
                        VStack {
                            Image(systemName: "network")
                                .font(.title)
                                .padding(2)
                            Text("General")
                                .font(.body)
                                .padding(2)
                        }
                        .padding(0)
                    })
                    //.font(.title)
                    .frame(width: 100, height: 150)
                }
            }
        }
        .navigationTitle("My Application")
    }
    
    func save() {}
}

效果对比 #

目标效果

左侧是垂直排列的选项栏，每个选项包含图标和文字，选中时有高亮背景；右侧对应显示该选项的设置内容区域，整体窗口布局和Message.app设置界面完全一致。

当前实现效果

选项按钮的文字无法显示，界面上方的布局区域被截断，选项的排列和样式也不符合目标效果。

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