SwiftUI TabView 不呈现预览标签答案

【问题标题】：SwiftUI TabView not rendering Preview LabelsSwiftUI TabView 不呈现预览标签
【发布时间】：2022-01-20 20:20:23
【问题描述】：

我正在为 macOS 开发一个 SwiftUI 应用程序。

但是，我无法让 TabView 在预览画布中正确呈现以及在新窗口上使用视图时。

struct DevView: View {
    
    @State var isOn = true
    
    var body: some View {
        TabView {
            Toggle(isOn: $isOn) {
                Text("Foo")
            }
            .toggleStyle(SwitchToggleStyle(tint: .green))
            .tabItem {
                Label("Foo", systemImage: "dot.square")
            }
            
            Text("Bar")
            .tabItem {
                Label("Bar", systemImage: "gear")
            }
            
        }.frame(width: 200, height:75)
    }
}

struct DevView_Previews: PreviewProvider {
    static var previews: some View {
        DevView()
    }
}

为什么这段代码在 Preview Canvas 中会这样渲染：

而不是正确显示带有标签的选项卡：

^{备案：XCode 13.2.1, BigSur 11.6.2}

【问题讨论】：

标签： canvas swiftui render preview tabview

【解决方案1】：

在 MacOS 上，SwiftUI 不会在 Tab 标签中呈现图像： https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/tab-views/

您必须使用 Buttons 寻求自定义解决方案。这似乎很棘手。我获得一半的唯一方法是以下。

这基本上是一个可定制的工具栏。要在标题栏中没有它，您必须使用 .windowToolbarStyle(.expanded)。不幸的是 .windowToolbarStyle(.expanded) 必须直接在 WindowGroup 上：

@main
struct test_stack_macOsApp: App {
    var body: some Scene {
        WindowGroup {
            DevView()
                .toolbar(id: "myToolbar") {
                    ToolbarItem(id: "1", placement: .principal) {
                        Button {
                            // pass id to view
                        } label: {
                            Label("Foo", systemImage: "dot.square")
                        }
                    }
                    ToolbarItem(id: "2") {
                        Button {
                            // pass id to view
                        } label: {
                            Label("Bar", systemImage: "gear")
                        }
                    }
                }
                .navigationTitle("Foo")
        }
        .windowToolbarStyle(.expanded)
    }
}

【讨论】：