New in SwiftUI 4: NavigationSplitView

DevTechie
DevTechie
Published in
4 min readJun 18, 2022

--

Photo by Niklas Jonasson on Unsplash

Another new addition introduced in SwiftUI 4, as a part of Navigation API is NavigationSplitView.

NavigationSplitView is a view that presents views in two or three column layout, selections in leading columns controls the presentation in subsequent columns.

We can create a split view with two or three column layout, we will start with two column layout first.

Two Column Layout

For our example, we will start with a simple data structure.

struct DevTechieCourse: Identifiable, Hashable {
let id = UUID()
let name: String
let details: String
}

We also need some sample data to play with. Let’s add actual video courses available at https://www.devtechie.com

extension DevTechieCourse {
static var exampleData: [DevTechieCourse] {
[
.init(name: "Mastering SwiftUI 3", details: "Mastering SwiftUI 3"),
.init(name: "DisneyPlus Clone in SwiftUI", details: "DisneyPlus Clone in SwiftUI"),
.init(name: "Drawing App in SwiftUI", details: "Drawing App in SwiftUI"),
.init(name: "Speech ToDo in UIKit", details: "Speech ToDo in UIKit"),
.init(name: "Build Strava Clone in UIKit", details: "Build Strava Clone in UIKit"),
.init(name: "Build Music…

--

--