SwiftUI - Pages with embedded NavigationViews

136 Views Asked by At

I'm attempting to build a paging app, where each page has its own NavigationView. It sort of works, but I get a completely redundant "Back" button in the navigation bar. My code so far is -

    struct AllListsView: View {
        
        @ObservedObject var viewModel: AllListsViewModel
        
        @State private var pageName: String = ""
        
        
        init(viewModel: AllListsViewModel) {
            self.viewModel = viewModel
        }
        
        var body: some View {
            
            IfLet($viewModel.listViews) { listViews in
                TabView {
                    ForEach(listViews) { $0 }
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
            } else: {
                Text("No lists")
            }
        }
    }

    struct ListView: View, Identifiable, Hashable {
        
        let id: String
        
        private var viewModel: ListViewModel
        
        init(viewModel: ListViewModel) {
            self.id = String(viewModel.list.index)
            self.viewModel = viewModel
        }
        
        var body: some View {
                
            NavigationView {
                Text("Any Text") // if I don't have this, nothing is displayed
                List(viewModel.listItems) {
                    Text("\($0.quantity) \($0.name)")
                }
                .navigationBarTitle(viewModel.list.name)
            }
        }
        
        func hash(into hasher: inout Hasher) {
            hasher.combine(id)
        }
        
        static func == (lhs: ListView, rhs: ListView) -> Bool {
            lhs.id == rhs.id
        }
    }

Spurious Back Button

However, if I put the NavigationView outside the TabView, it displays correctly, but then scrolling the list doesn't shrink the large title text and I have to update the navigationBar title when the page changes -

    // AllListsView -
    var body: some View {
            
        IfLet($viewModel.listViews) { listViews in
                
            NavigationView {
                TabView {
                    ForEach(listViews, id: \.self) { listView in
                        listView
                            .onAppear {
                                pageName = listView.name
                            }
                    }
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
                .navigationBarTitle(pageName)
            }
                
        } else: {
            Text("No lists")
        }
    }

    // ListView -
    var body: some View {
                
        List(viewModel.listItems) {
            Text("\($0.quantity) \($0.name)")
        }
    }

Correct appearance, wrong behaviour

I'd like to be able to do this in SwiftUI, as it looks like the way ahead. But I know that for me to do this using UIKit would be fairly trivial, so it's frustrating.

Any help much appreciated!

0

There are 0 best solutions below