> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/view/navi/split-view.md).

# NavigationSplitView

🚧 施工中

[SwiftUI](/ios/swiftui.md) ⟩ [navigation](/ios/swiftui/view/navi.md) ⟩ NavigationSplitView

{% hint style="success" %}
A [view](/ios/swiftui/view.md) that <mark style="color:yellow;">organizes your views in 2 or 3 columns</mark>, allowing you to <mark style="color:yellow;">select items</mark> from the <mark style="color:yellow;">leading column</mark> to <mark style="color:yellow;">present a view</mark> in the <mark style="color:yellow;">trailing column</mark>.
{% endhint %}

{% hint style="danger" %} <mark style="color:purple;">NavigationSplitView</mark> looks like [NavigationStack](/ios/swiftui/view/navi/stack.md) if you have a <mark style="color:yellow;">small screen size</mark>.
{% endhint %}

{% tabs %}
{% tab title="💾 程式" %}
📁 two-column&#x20;

<pre class="language-swift"><code class="lang-swift"><strong>// 在 view 的宣告部分
</strong><strong>@State private var employeeIds: Set&#x3C;Employee.ID> = []
</strong>
// 在 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)
}
</code></pre>

📁 three-column&#x20;

```swift
// 在 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)
}
```

{% endtab %}

{% tab title="👥 相關" %}

* [NavigationLink](/ios/swiftui/view/navi/link.md)
* [NavigationStack](/ios/swiftui/view/navi/stack.md)
  {% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Navigation](https://developer.apple.com/documentation/swiftui/navigation) ⟩ [NavigationSplitView](https://developer.apple.com/documentation/swiftui/navigationsplitview)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] Use Your Loaf ⟩ [SwiftUI Split View Configuration](https://useyourloaf.com/blog/swiftui-split-view-configuration/)
* [ ] AppCoda ⟩ [A Beginner’s Guide to NavigationSplitView in SwiftUI for iOS 16](https://www.appcoda.com/navigationsplitview-swiftui/)
  {% endtab %}
  {% endtabs %}