如何在 SwiftUI 中使用 NavigationView 创建自定义 TabView？

Question

[EDIT] - This question has been edited and simplified.

I need to create a CustomLooking TabView instead of the default one.

Here is my full code with the problem. Just run the code below.

import SwiftUI

enum TabName {
    case explore, network
}

struct ContentView: View {
    @State var displayedTab: TabName = .explore
    var body: some View {
        VStack(spacing: 0) {
            Spacer()
            switch displayedTab {
            case .explore: AViewWhichNavigates(title: "Explore").background(Color.yellow)
            case .network: AViewWhichNavigates(title: "Network").background(Color.green)
            }
            Spacer()
            CustomTabView(displayedTab: $displayedTab)
        }
    }
}

struct CustomTabView: View {
    @Binding var displayedTab: TabName
    var body: some View {
        HStack {
            Spacer()
            Text("Explore").border(Color.black, width: 1).onTapGesture { self.displayedTab = .explore }
            Spacer()
            Text("Network").border(Color.black, width: 1).onTapGesture { self.displayedTab = .network }
            Spacer()
        }
    }
}

struct AViewWhichNavigates: View {
    let title: String
    var body: some View {
        NavigationView(content: {
            NavigationLink(destination: Text("We are one level deep in navigation")) {
                Text("You are at root. Tap to navigate").navigationTitle(title)
            }
        })
    }
}

On tab#1 click the navigation. Switch to tab#2, then Switch back to tab#1. You will see that tab#1 has popped to root.

How do I prevent the customTabView from popping to root every time i switch tabs?

Answer 1

The problem is that the Navigation isActive state is not recorded as well as the displayed tab state.

By recording the state of the navigation of each tab as well as which tab is active the correct navigation state can be show for each tab.

The model can be improved to remove the tuple and make it more flexible but the key thing is the use of getter and setter to use an encapsulated model of what the navigation state is for each tab in order to allow the NavigationLink to update it via a binding.

I have simplified the top level VStack and removed the top level switch as its not needed here, but it can be added back for using different types of views at the top level in a real implementation

---

enum TabName : String {
    case Explore, Network
}

struct ContentView: View {
    
    @State var model =  TabModel()
    
    init(){
         UINavigationBar.setAnimationsEnabled(false)
    }
    
    var body: some View {
        VStack(spacing: 0) {
            Spacer()
            AViewWhichNavigates(model: $model).background(Color.green)
            Spacer()
            CustomTabView(model:$model)
        }
    }
}

struct CustomTabView: View {
    @Binding var model: TabModel
    var body: some View {
        HStack {
            Spacer()
            Text("Explore").border(Color.black, width: 1).onTapGesture { model.selectedTab = .Explore }
            Spacer()
            Text("Network").border(Color.black, width: 1).onTapGesture { model.selectedTab = .Network }
            Spacer()
        }
    }
}

struct AViewWhichNavigates: View {
    @Binding var model:TabModel
    
    var body: some View {
        NavigationView(content: {
            NavigationLink(destination: Text("We are one level deep in navigation in \(model.selectedTab.rawValue)"), isActive: $model.isActive) {
                Text("You are at root of \(model.selectedTab.rawValue). Tap to navigate").navigationTitle(model.selectedTab.rawValue)
            }.onDisappear {
                UINavigationBar.setAnimationsEnabled(model.isActive)
            }
        })
    }
}

struct TabModel {
    var selectedTab:TabName = .Explore
    var isActive : Bool {
        get {
            switch selectedTab {
                case .Explore : return tabMap.0
                case .Network : return tabMap.1
            }
        }
        set {
            switch selectedTab {
                case .Explore : nOn(isActive, newValue); tabMap.0 = newValue;
                case .Network : nOn(isActive, newValue); tabMap.1 = newValue;
            }
        }
    }
    //tuple used to represent a fixed set of tab isActive navigation states
    var tabMap = (false, false)
     
    func  nOn(_ old:Bool,_ new:Bool ){
        UINavigationBar.setAnimationsEnabled(new && !old)
    }
    
}

Answer 2

All you need is a ZStack with opacity.

import SwiftUI

enum TabName {
    case explore, network
}

struct ContentView: View {
    @State var displayedTab: TabName = .explore
    var body: some View {
        VStack {
            ZStack {
                AViewWhichNavigates(title: "Explore")
                    .background(Color.green)
                    .opacity(displayedTab == .explore ? 1 : 0)
                AViewWhichNavigates(title: "Network")
                    .background(Color.green)
                    .opacity(displayedTab == .network ? 1 : 0)
            }
            CustomTabView(displayedTab: $displayedTab)
        }
    }
}

struct CustomTabView: View {
    @Binding var displayedTab: TabName
    var body: some View {
        HStack {
            Spacer()
            Text("Explore").border(Color.black, width: 1).onTapGesture { self.displayedTab = .explore }
            Spacer()
            Text("Network").border(Color.black, width: 1).onTapGesture { self.displayedTab = .network }
            Spacer()
        }
    }
}

struct AViewWhichNavigates: View {
    let title: String
    var body: some View {
        NavigationView(content: {
            NavigationLink(destination: Text("We are one level deep in navigation")) {
                Text("You are at root. Tap to navigate").navigationTitle(title)
            }
        })
    }
}

Answer 3

I think it is possible even with your custom tab view, because the issue is in rebuilding ExploreTab() when you switch tabs, so all content of that tab is rebuilt as well, so internal NavigationView on rebuilt is on first page.

Assuming you have only one ExploreTab in your app (as should be obvious), the possible solution is to make it Equatable explicitly and do not allow SwiftUI to replace it on refresh.

So

struct ExploreTab: View, Equatable {
    static func == (lhs: Self, rhs: Self) -> Bool {
        return true    // prevent replacing ever !!
    }

    var body: some View {
       // ... your code here
    }
}

and

    VStack(spacing: 0) {
        switch displayedTab {
        case .explore: ExploreTab().equatable()      // << here !!
        case .network: NetworkTab()
        }
        CustomTabView(displayedTab: $displayedTab)   //This is the Custom TabBar
    }

Update: tested with Xcode 12 / iOS 14 - works as described above (actually the same idea works for standard containers)

Here is a quick demo replication of CustomTabView with test environment as described above.

Full module code:

struct ExploreTab: View, Equatable {
    static func == (lhs: Self, rhs: Self) -> Bool {
        return true    // prevent replacing ever !!
    }

    var body: some View {
       NavigationView {
            NavigationLink("Go", destination: Text("Explore"))
       }
    }
}

enum TestTabs {
    case explore
    case network
}

struct CustomTabView: View {
    @Binding var displayedTab: TestTabs
    var body: some View {
        HStack {
            Button("Explore") { displayedTab = .explore }
            Divider()
            Button("Network") { displayedTab = .network }
        }
        .frame(maxWidth: .infinity)
        .frame(height: 80).background(Color.yellow)
    }
}

struct TestCustomTabView: View {
    @State private var displayedTab = TestTabs.explore

    var body: some View {
        VStack(spacing: 0) {
            switch displayedTab {
                case .explore: ExploreTab().equatable()      // << here !!
                case .network: Text("NetworkTab").frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            CustomTabView(displayedTab: $displayedTab)   //This is the Custom TabBar
        }

        .edgesIgnoringSafeArea(.bottom)
    }
}