SwiftUI TabView not rendering Preview Labels

Question

I am developing a SwiftUI App for macOS.

However, i was not able to make TabView to render correctly in Preview Canvas and when using the view on a new Window.

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

Why does this Code renders like this in Preview Canvas:

instead of correctly showing the tabs with labels:

^{For the record: XCode 13.2.1, BigSur 11.6.2}

Answer 1

On MacOS SwiftUI does not render images in Tab labels: https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/tab-views/

You have to go for a custom solution with Buttons. This seems to be tricky. The only way I got half way was the following.

This basically is a customizable ToolBar. To not have it in the title bar, you have to use.windowToolbarStyle(.expanded). Unfortunately the.windowToolbarStyle(.expanded) has to be directly on the 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)
    }
}