macOS SwiftUI 应用程序中的 TabView，带有工具栏中的分段控件

Question

我正在尝试使用SwiftUI创建一个macOS应用程序。我需要一个TabView或类似的东西，但是当我使用TabView时，分段控件不在macOS工具栏中。
点击这里查看我想要的示例。

我的当前代码是：

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Text("1")
                .tabItem {
                    Text("1")
            }
        }
    }
}

分段控件需要放在工具栏而不是视图中。

- NG235

Answer 1

我在想在macOS BigSur上构建类似项目时，偶然发现了你的问题。我正在使用Xcode 12.2。

以下是我的解决方案，受Asperi答案启发。重要的是将窗口组的标题设置为空字符串""，否则看起来很奇怪。

请注意，它仅在运行应用程序时才起作用，而不是在预览中！ 应用程序文件

import SwiftUI

@main
struct SegmentedToolbarApp: App {
    var body: some Scene {
        WindowGroup("") {
            ToolbarItemPlacement()
        }
    }
}

工具栏项目放置视图

重要的部分是与主要项相关的位置。

另外，设置更大的最小宽度也很重要——否则工具栏将消失！

import SwiftUI

struct ToolbarItemPlacement: View {
    
    private let tabs = ["Watch Now", "Movies", "TV Shows", "Kids", "Library"]
    @State private var selectedTab = 0
    
    var body: some View {
        VStack {
            ChildTabView(title: self.tabs[self.selectedTab], index: self.selectedTab)
        }
        .toolbar {
            ToolbarItem(placement: .principal) {
                
                Picker("", selection: $selectedTab) {
                    ForEach(tabs.indices) { i in
                        Text(self.tabs[i]).tag(i)
                    }
                }
                .pickerStyle(SegmentedPickerStyle())
                .padding(.top, 8)
            }
        }
        .frame(minWidth: 800, minHeight: 400)
    }
}

ChildTabView

子标签页视图

struct ChildTabView: View {
    var title: String
    var index: Int

    var body: some View {
        Text("\(title) - Index \(index)")
            .padding()
    }
}

- Denise

---

如果在ChildView中添加一些TextFields或其他控件呢？这个解决方案无法正常工作，因为当您更改选项卡时，ChildTabView会每次重绘。 - Lupurus

Answer 2

这里是一个简化的演示，展示了实现此目标的可能方法。经过测试，可在Xcode 11.2中使用。

1）在AppDelegate中准备窗口以具有所需的样式和背景。

func applicationDidFinishLaunching(_ aNotification: Notification) {
    // Create the SwiftUI view that provides the window contents.
    let contentView = ContentView()
        .edgesIgnoringSafeArea(.top)
        .frame(minWidth: 480, maxWidth: .infinity, minHeight: 300, maxHeight: .infinity)

    // Create the window and set the content view. 
    window = NSWindow(
        contentRect: NSRect(x: 0, y: 0, width: 480, height: 300),
        styleMask: [.titled, .closable, .miniaturizable, .resizable, .fullSizeContentView],
        backing: .buffered, defer: false)
    window.center()
    window.titlebarAppearsTransparent = true
    window.titleVisibility = .hidden

    window.setFrameAutosaveName("Main Window")
    window.contentView = NSHostingView(rootView: contentView)
    window.makeKeyAndOrderFront(nil)
}

2）准备窗口内容视图以具有所需的行为

struct ContentView: View {
    private let tabs = ["Watch Now", "Movies", "TV Shows", "Kids", "Library"]
    @State private var selectedTab = 0
    var body: some View {
        VStack {
            HStack {
                Spacer()
                Picker("", selection: $selectedTab) {
                    ForEach(tabs.indices) { i in
                        Text(self.tabs[i]).tag(i)
                    }
                }
                .pickerStyle(SegmentedPickerStyle())
                .padding(.top, 8)
                Spacer()
            }
            .padding(.horizontal, 100)
            Divider()
            GeometryReader { gp in
                VStack {
                    ChildTabView(title: self.tabs[self.selectedTab], index: self.selectedTab)
                }
            }
        }
    }
}

struct ChildTabView: View {
    var title: String
    var index: Int

    var body: some View {
        Text("\(title)")
    }
}

- Asperi

---

谢谢您的回答。我真的在寻找类似于苹果应用程序的东西，即使是在AppKit中也可以。虽然感谢您的回复。谢谢。 - NG235

我相信在2019年WWDC上，苹果展示了一个带有工具栏分段控件的SwiftUI Mac应用程序。 - NG235

Answer 3

很不幸的是，从macOS 13.0和SwiftUI 4.0开始，唯一让这个工作的方法是将您的应用程序设置为SwiftUI应用程序。

@main
struct SettingsViewDemoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        
        Settings {
            SettingsView()
        }
    }
}

来源：https://serialcoder.dev/text-tutorials/macos-tutorials/presenting-the-preferences-window-on-macos-using-swiftui/

- Raimundas Sakalauskas