How to navigate views with enums - ios

Question

I have followed a tutorial in SWIFT UI (only just started using it) and I am trying to open new views using the same logic applied so far. Basically there is a tab bar with 5 views (Search ,home etc...) which works opening a new view with each tabbar item, however in my homeview page I have some button cards that I want to open a new view. I can get the text for selectedSection to work but it shows the Text over the top of the homeview. How can I get it to open a new view entirely?
Here is my content view:
struct ContentView: View {
#AppStorage("selectedTab") var selectedTab: Tab = .home
#AppStorage("selectedSection") var selectedSection: Features = .calculators
#State var isOpen = false
#State var show = false
let button = RiveViewModel(fileName: "menu_button", stateMachineName: "State
Machine", autoPlay: false)
var body: some View {
ZStack {
Color("Background 2").ignoresSafeArea()
SideMenu()
.opacity(isOpen ? 1 : 0)
.offset(x: isOpen ? 0 : -300)
.rotation3DEffect(.degrees(isOpen ? 0 : 30), axis: (x: 0, y: 1, z: 0))
Group{
switch selectedTab {
case .home:
HomeView()
case .search:
Text("Search")
case .star:
Text("Favorites")
case .bell:
Text("Bell")
case .user:
Text("User")
}
switch selectedSection {
case .calculators:
Text("Calculators")
case .projects:
Text("Projects")
case .kvFinder:
Text("kv Finder")
}
}
And my home view:
var content: some View {
VStack(alignment: .leading, spacing: 0) {
Text("Welcome")
.customFont(.largeTitle)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.horizontal, 20)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 20) {
ForEach(sections) { section in
Button {
selectedSection = section.features
} label : {
VCard(section: section)
}
}
}
And here is my VCard:
struct Section: Identifiable {
var id = UUID()
var title: String
var subtitle: String
var caption: String
var color: Color
var image: Image
var features: Features
}
var sections = [
Section(title: "TAB Calculations", subtitle: "Find all basic and advanced HVAC
calculations", caption: "3 sections - over 40 calculators", color: Color(hex:
"7850F0"), image: Image(systemName: "x.squareroot"), features: .calculators),
Section(title: "Upcoming Projects", subtitle: "Find upcoming and current
commissioning projects.", caption: "Over 150 projects", color: Color(hex: "6792FF"),
image: Image(systemName: "folder.fill.badge.plus"), features: .projects),
Section(title: "Valve Kv Finder", subtitle: "Quickly determine valve flow rates from
brands such as Oventropp, IMI TA and Danfoss", caption: "150 tables", color:
Color(hex: "005FE7"), image: Image(systemName: "magnifyingglass"), features:
.kvFinder)
]
enum Features: String {
case calculators
case projects
case kvFinder
}

Answer 1

You can use NavigationStack API if your minimum app deployment is 16+. otherwise, you may use the old NavigationView.
You can find the migration document here.
struct ContentView: View {
#State var path: [YourDestinations] = []
var body: some View {
TabView {
VStack {
NavigationStack(path: $path) { // <= here
VStack {
NavigationLink("Card 1", value: YourDestinations.place1)
NavigationLink("Card 1", value: YourDestinations.place2)
NavigationLink("Card 1", value: YourDestinations.place3)
}
.navigationDestination(for: YourDestinations.self) { destination in
switch destination {
case .place1:
Text("Detination 1")
.foregroundColor(.yellow)
case .place2:
Text("Detination 2")
.foregroundColor(.green)
case .place3:
Text("Detination 3")
.foregroundColor(.gray)
}
}
}
}
.tabItem({
Text("Tab 1")
})
Text("Hello, world!")
.padding()
.tabItem({
Text("Tab 2")
})
Text("Hello, world!")
.padding()
.tabItem({
Text("Tab 3")
})
}
}
}