Day 25: Manifesting a Split View Layout
Welcome to Day 25 of the #30DaysOfSwift series!
Split views allow you to create master-detail interfaces that are perfect for iPad, offering a way to present multiple panes of information side by side.
Step 1: Understanding the Split View Layout
In a split view, you typically have:
- A sidebar (or master view) that displays a list of items.
- A detail view that shows content based on the selection from the sidebar.
SwiftUI makes it easy to create this kind of layout using NavigationSplitView.
Step 2: Building the Split View
import SwiftUI struct SplitViewExample: View { @State private var selectedItem: String? = "Item 1" let items = ["Item 1", "Item 2", "Item 3"] var body: some View { NavigationSplitView { // Sidebar View List(items, id: \.self, selection: $selectedItem) { item in Text(item) .padding() .frame(maxWidth: .infinity, alignment: .leading) } .navigationTitle("Sidebar") } detail: { // Detail View if let selectedItem = selectedItem { DetailView(selectedItem: selectedItem) } else { Text("Select an item") .font(.largeTitle) .foregroundColor(.gray) } } } } struct DetailView: View { let selectedItem: String var body: some View { VStack { Text("Details for \(selectedItem)") .font(.largeTitle) .padding() Spacer() } .navigationTitle("Detail") } } How does it works out for you? Share your thoughts below.
Happy Coding!
Top comments (0)