📦NavigationSplitView

🚧 施工中

SwiftUI ⟩ navigation ⟩ NavigationSplitView

A view that organizes your views in 2 or 3 columns, allowing you to select items from the leading column to present a view in the trailing column.

NavigationSplitView looks like NavigationStack if you have a small screen size.

💾 程式

📁 two-column

// 在 view 的宣告部分
@State private var employeeIds: Set<Employee.ID> = []

// 在 view 的 body 裡面
NavigationSplitView {
    // ⭐️ sidevar view (1st column)
    List(model.employees, selection: $employeeIds) { employee in
        Text(employee.name)
    }
} detail: {
    // ⭐️ detail view (2nd column)
    EmployeeDetails(for: employeeIds)
}

📁 three-column

// 在 view 的宣告部分
@State private var departmentId: Department.ID?         // single selection
@State private var employeeIds: Set<Employee.ID> = []   // multiple selection

// 在 view 的 body 裡面
NavigationSplitView {
    // ⭐️ sidevar view (1st column)
    List(model.departments, selection: $departmentId) { department in
        Text(department.name)
    }
} content: {
    // ⭐️ content view (2nd column)
    if let department = model.department(id: departmentId) {
        List(department.employees, selection: $employeeIds) { employee in
            Text(employee.name)
        }
    } else {
        Text("Select a department")
    }
} detail: {
    // ⭐️ detail view (3rd column)
    EmployeeDetails(for: employeeIds)
}

👥 相關

• NavigationLink

• NavigationStack

📘 手冊

• SwiftUI ⟩ Navigation ⟩ NavigationSplitView

📗 參考

• Use Your Loaf ⟩ SwiftUI Split View Configuration

• AppCoda ⟩ A Beginner’s Guide to NavigationSplitView in SwiftUI for iOS 16