Swift Toolbars are bleeding using Tabview and NavigationSplitView

104 views Asked by At

I have a Tabview, each tab links to a new Scene which has 3 column NavigationSplitView, sidebar, content and detail. Each of those 3 splitviews have a toolbar. They work fine until you click between the tabviews on MACOS, then they duplicate and triplicate. How do I stop it? Fine on iOS.


import SwiftUI

//The Main Tab View
struct ContentView: View {
    @State var selectedIndex: Int = 1
    var body: some View {
        TabView(selection: $selectedIndex) {
            SplitView()
                .tabItem {
                    Label("Home", systemImage: "house")
                }
                .tag(1)
            SplitView()
                .tabItem {
                    Label("Contacts", systemImage: "person.3")
                }
                .tag(2)
            SplitView()
                .tabItem {
                    Label("Settings", systemImage: "gearshape")
                }
                .tag(3)
        }
    }
}

//An identical Split view for each of the tabs
struct SplitView: View{
    
    var body: some View {
        NavigationSplitView{
            Sidebar()
        }content:{
            Content()
        }detail:{
            Detail()
        }
        
    }
}
//The sidebar view with one toolbar
struct Sidebar: View{
    var body: some View {
        NavigationLink(destination: Content()){
            Text("To Content")
                .toolbar {
                    ToolbarItem {
                        Button {
                            print("Profile ")
                        } label: {
                            Image(systemName: "1.circle")
                        }
                        
                    }
                }
        }
    }
}
//The content view with one toolbar
struct Content: View{
    var body: some View {
        NavigationLink(destination: Detail()){
            Text("To Details")
                .toolbar {
                    ToolbarItem {
                        Button {
                            print("Profile ")
                        } label: {
                            Image(systemName: "2.circle")
                        }
                        
                    }
                }
        }
    }
}
//The sidebar view with two toolbars
struct Detail: View{
    var body: some View {
        Text("Detail")
            .toolbar {
                ToolbarItem {
                    Button {
                        print("Profile ")
                    } label: {
                        Image(systemName: "3.circle")
                    }
                    
                }
                ToolbarItem {
                    Button {
                        print("Profile ")
                    } label: {
                        Image(systemName: "4.circle")
                    }
                    
                }
            }
    }
}


In my larger working example I have a data model which tracks which TabView is being shown. The toolbar's appearance is then restricted to prevent a pile on.

0

There are 0 answers