📦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)
}