Add Detail View to Split View in SwiftUI

Written by Team Kodeco

Split views offer an effective way to display multiple pieces of content side by side, particularly on larger devices like an iPad or a Mac. With SwiftUI, you can conveniently create a split view with primary (sidebar) and detail views using NavigationSplitView and NavigationLink.

To add a detail view to a split view in SwiftUI, start by creating a primary view, which will appear in the leading column or the sidebar. Then, define a detail view to be displayed in the trailing column when a user selects an item in the primary view.

Consider a Book struct that you want to display in the split view. You can create two views — ContentView as the main view that includes the primary and detail views, and BookDetail for the detail view.

import SwiftUI

struct Book: Identifiable, Hashable {
  let id = UUID()
  let title: String
  let author: String
}

struct ContentView: View {
  let books = [
    Book(title: "The Hobbit", author: "J.R.R. Tolkien"),
    Book(title: "Pride and Prejudice", author: "Jane Austen"),
    Book(title: "1984", author: "George Orwell")
  ]

  @State private var selectedBook: Book? = nil

  var body: some View {
    NavigationSplitView(columnVisibility: .constant(.doubleColumn)) {
      List(books, selection: $selectedBook) { book in
        NavigationLink(book.title, value: book)
      }
      .navigationTitle("Books")
    } detail: {
      if let selectedBook = selectedBook {
        BookDetail(book: selectedBook)
      } else {
        Text("Select a book from the list to see its details.")
      }
    }
    .navigationSplitViewStyle(.balanced)
  }
}

struct BookDetail: View {
  let book: Book

  var body: some View {
    VStack {
      Text(book.title)
        .font(.largeTitle)
      Text("by \(book.author)")
        .font(.title)
    }
    .navigationTitle(book.title)
  }
}

Tap The Hobbit and your preview should look like this:

In the ContentView, NavigationSplitView is used, with a List of Book items forming the sidebar. Each item is connected to a NavigationLink that assigns the book value when a selection is made. The navigationSplitViewStyle is set to .balanced to divide the space equally between the sidebar and detail view when both are visible.

In the BookDetail view, details about the Book item, including its title and author, are displayed. The navigationTitle modifier sets the title of the detail view.

In conclusion, creating a split view in SwiftUI using NavigationSplitView is a straightforward process. By leveraging the NavigationLink view, you can efficiently transition between primary and detail views in response to user interactions.