macOS 13 - 如何使用 SwiftUI 创建 Message.App 设置工具栏？

Question

各位开发者大家好。

我正在尝试创建一个与 Message.app 设置窗口类似的等效设置窗口。使用苹果提供的代码我一无所获，它可以工作，但显示它很小。使用我在这里显示的代码，更接近，但不像 message.app 设置视图。

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
            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")
    }
}

我喜欢创造什么：

我有什么：（只有一个图标，代码将显示三个）

我在 SO 看到了一些示例代码，但没有一个接近 Message.app 设置窗口。 正如你所看到的，没有文字，上面的矩形区域被切掉了。除了胡佛宽度的宽度之外，所有三种方式都是相同的。另外，我刚刚添加了第一次尝试，这是 .toolbar 中的最后一次尝试。

如果它有效，我可以将它变成修改器或 viewBuilder 以使其通用。有什么建议吗？

Answer 1

使用

TabView

，例如

struct SettingsView: View {
    private enum Tabs: Hashable {
        case general, advanced
    }
    var body: some View {
        TabView {
            GeneralSettingsView()
                .tabItem {
                    Label("General", systemImage: "gear")
                }
                .tag(Tabs.general)
            AdvancedSettingsView()
                .tabItem {
                    Label("Advanced", systemImage: "star")
                }
                .tag(Tabs.advanced)
        }
        .padding(20)
        .frame(width: 375, height: 150)
    }
}