SwiftUI 5.5 Flat and Hierarchical Navigation

Search for a command to run...

No comments yet. Be the first to comment.
EnvironmentObject is useful when you want to create a dependency in a higher component of the layout tree and use it on a lower component without having to pass it down the tree through every child component. We will now use EnvironmentObject to moni...
EnvironmentObject is useful when you want to create a dependency in a higher component of the layout tree and use it on a lower component without having to pass it down the tree through every child component. We will now use EnvironmentObject to moni...

CompositionLocal is useful when you want to create a dependency in a higher node of the layout tree and use it on a lower node without having to pass it down the tree through every child Composable. Here we will use it to direct our application when ...

The TDD (Test Driven Development) approach is important when it comes to testing small portions of business logic code in isolation. In this blog, I'll cover how I would use TDD to build a clean architecture To-do SwiftUI application I'll cover imp...

The TDD (Test Driven Development) approach is important when it comes to testing small portions of business logic code in isolation. In this blog, I'll cover how I would use TDD to build a clean architecture To-do Jetpack Compose Android application ...

The Room persistence library provides an abstraction layer over SQLite. To use Room in your app, add the following dependencies to your app’s build.gradle file: dependencies { .... kapt "org.xerial:sqlite-jdbc:3.34.0" // Room def roo...

Navigation in your app has to be appropriate: Don’t use non-logical navigation.
Navigation must always be intuitive: Users don’t have time to look for the right section in your app
Don’t steal time from your users: They will delete the app
Navigation must be clear: Users have to always know which screen they are on now
When building a business application the 2 main navigation structures are Hierarchical and Flat.
Users navigate by making only one choice per screen until they reach their destination. To get to another destination, users must either retrace, or start from the beginning and make other choices.
We use NavigationView to implement hierarchical navigation
import SwiftUI
struct ChildView: View {
var body: some View {
Text("This is the Child of Screen 1")
}
}
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: ChildView()) {
Text("Go To Child of Screen 1")
}.navigationTitle("Screen 1")
}.navigationViewStyle(StackNavigationViewStyle())
}
}

Clicking on the Navigation Link will push the child screen onto Screen 1
All the primary screens can be navigated from the main screen.
We use TabViews to implement flat navigation.
import SwiftUI
struct ChildView: View {
var body: some View {
Text("This is the Child of Screen 1")
}
}
struct Screen1View: View {
var body: some View {
NavigationView {
NavigationLink(destination: ChildView()) {
Text("Go To Child of Screen 1")
}.navigationTitle("Screen 1")
}.navigationViewStyle(StackNavigationViewStyle())
}
}
struct Screen2View: View {
var body: some View {
NavigationView {
Text("Screen 2").navigationTitle("Screen 2")
}.navigationViewStyle(StackNavigationViewStyle())
}
}
struct ContentView: View {
var body: some View {
TabView{
Screen1View()
.tabItem({
Label("One", systemImage: "1.circle")
})
Screen2View()
.tabItem({
Label("Two", systemImage: "2.circle")
})
}
}
}

We’ve now incorporated hierarchical nav inside of flat nav with a TabView and given the tabs labels and icons