swiftuiswiftui-tabview

Initial Tab Does not show in TabView


I am trying to create a simple TabView in the Left panel of a SwiftUI NavigationView. The first Tab does not show up in the TabView menu, but it shows as the initial view with the app is launched.

struct ContentView: View {
    @Environment(\.modelContext) private var modelContext
    
    @State var listView: ListView = ListView.recipients
    @State var addItem = false
    @State private var searchString = ""
    @State var selectedTab = 0
    @Query private var recipients: [Recipient]
    
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                FilteredList(searchString: searchString, listView: .recipients)
                    .tag(0)
                    .tabItem {
                        Label("Recipient", systemImage: "person.crop.circle")
                    }
                FilteredList(searchString: searchString, listView: .events)
                    .tag(1)
                    .tabItem {
                        Label("Event", systemImage: "calendar.circle")
                    }
                FilteredList(searchString: searchString, listView: .greetingCard)
                    .tag(2)
                    .tabItem {
                        Label("Gallery", systemImage: "photo.circle")
                    }
            }
            Text("Make a selection")
                .font(.largeTitle)
                .foregroundColor(.green)
        }
        .navigationViewStyle(.automatic)
    }
}

On the iPhone it shows correctly, but on the iPad the first tab is missing:

iPhone View iPad View


Solution

  • I ended up redesigning the View to the following code:

     var body: some View {
        TabView(selection: $listView) {
            NavigationView {
                FilteredList(searchText: searchText, listView: .events, navigationPath: $navigationPath)
                    .searchable(text: $searchText)
                    .toolbar {
                        ToolbarItem(placement: .navigationBarTrailing) {
                                Text("Events")
                                    .foregroundColor(.green)
                        }
                        ToolbarItem(placement: .navigationBarTrailing) {
                            Button(action: {
                                listView = .events
                                self.addItem.toggle()
                            }, label: {
                                Image(systemName: "plus.circle")
                                    .font(.title2)
                                    .foregroundColor(.green)
                            })
                        }
                        ToolbarItem(placement: .navigationBarTrailing) {
                            EditButton()
                                .foregroundColor(.green)
                        }
                    }
            }
            .tabItem {
                Image(systemName: "calendar")
                Text("Events")
                    .foregroundColor(.green)
            }
            .tag(ListView.events)
            NavigationView {
                FilteredList(searchText: searchText, listView: .greetingCard, navigationPath: $navigationPath)
                    .searchable(text: $searchText)
                    .toolbar {
                        ToolbarItem(placement: .navigationBarTrailing) {
                                Text("Gallery")
                                    .foregroundColor(.green)
                        }
                        ToolbarItem(placement: .navigationBarTrailing) {
                            Button(action: {
                                listView = .greetingCard
                                self.addItem.toggle()
                            }, label: {
                                Image(systemName: "plus.circle")
                                    .font(.title2)
                                    .foregroundColor(.green)
                            })
                        }
                    }
            }
            .tabItem {
                Image(systemName: "photo.stack")
                Text("Gallery")
                    .foregroundColor(.green)
            }
            .tag(ListView.greetingCard)
            NavigationView {
                FilteredList(searchText: searchText, listView: .recipients, navigationPath: $navigationPath)
                    .searchable(text: $searchText)
                    .toolbar {
                        ToolbarItem(placement: .navigationBarTrailing) {
                                Text("Recipient")
                                    .foregroundColor(.green)
                        }
                        ToolbarItem(placement: .navigationBarTrailing) {
                            Button(action: {
                                listView = .recipients
                                self.addItem.toggle()
                            }, label: {
                                Image(systemName: "plus.circle")
                                    .font(.title2)
                                    .foregroundColor(.green)
                            })
                        }
                        ToolbarItem(placement: .navigationBarTrailing) {
                            EditButton()
                                .foregroundColor(.green)
                        }
                    }
            }
            .tabItem {
                Image(systemName: "person.crop.circle")
                Text("Receipients")
                    .foregroundColor(.green)
            }
            .tag(ListView.recipients)
        }
        .sheet(isPresented: $addItem) {
            switch listView {
            case .events:
                NewEventView()
            case .recipients:
                NewRecipientView()
            case .greetingCard:
                NewGreetingCardView()
            }
        }
    }
    

    This is is working much more appropriately.