> 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/deprecated/navigationview.md).

# NavigationView

\[ <mark style="background-color:orange;">deprecated</mark> ]

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

* [ ] Design+Code ⟩ [List Style and Navigation View](https://designcode.io/swiftui-ios15-list-style-navigation-view)
* [ ] **Mastering SwiftUI**, Ch. 11: Navigation UI
* [ ] Nick McConnell ⟩ [Flow Navigation With SwiftUI (Revisited)](https://betterprogramming.pub/flow-navigation-with-swiftui-revisited-791f89421923)
* [ ] Sarun ⟩ [How to add button to navigation bar in SwiftUI](https://sarunw.com/posts/how-to-add-button-to-navigation-bar-in-swiftui/)
  {% endtab %}

{% tab title="💾 程式" %}
{% hint style="info" %}
Adding a [`Text`](/ios/swiftui/control/text.md) view is a useful way to give the <mark style="color:red;">**second column**</mark> (**details pane**, or **primary pane**) a <mark style="color:red;">**placeholder**</mark> view.

👉 see *example 1* below.
{% endhint %}

```swift
// example 1
NavigationView {
    
    // ⭐️ `List` of `NavigationLink`s
    List(model.notes) { note in
        NavigationLink(note.title, destination: NoteEditor(id: note.id))
    }
    
    // ⭐️ 這部分竟然會「自動出現」而且「只出現」在 "details pane"❗️ 
    Text("Select a Note")
}

// example 2
struct AccountView: View {
    var body: some View {
        NavigationView {                        // navigation view
            List {                              // list
                
                Section {                       // list section
                    Text("Settings")
                    Text("Billings")
                    Text("Help")
                }.listRowSeparatorTint(.gray)   // color of the separator
                
                Section {                       // list section
                    Text("Feedback")
                    Text("Support")
                }.listRowSeparator(.hidden)     // hide separators
            }
            .listStyle(.insetGrouped)           // list style
            .navigationTitle("Account")         // navigation title
        }
    }
}
```

{% endtab %}

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

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩&#x20;
  * [Presentation Containers](https://developer.apple.com/documentation/swiftui/presentation-containers) ⟩ [NavigationView ](https://developer.apple.com/documentation/swiftui/navigationview)⟩&#x20;
    * [.navigationTitle(\_:)](https://developer.apple.com/documentation/swiftui/view/navigationtitle\(_:\)-5di1u)&#x20;
    * [.navigationBarTitleDisplayMode(\_:)](https://developer.apple.com/documentation/swiftui/link/navigationbartitledisplaymode\(_:\))
    * ~~.navigationBarTitle()~~ <mark style="color:red;">**deprecated**</mark>.
  * [View Layout and Presentation](https://developer.apple.com/documentation/swiftui/view-layout-and-presentation) ⟩
    * [List](https://developer.apple.com/documentation/swiftui/list)
    * [Section](https://developer.apple.com/documentation/swiftui/section) - used in views like [`List`](https://developer.apple.com/documentation/swiftui/list), [`Picker`](https://developer.apple.com/documentation/swiftui/picker), and [`Form`](https://developer.apple.com/documentation/swiftui/form)&#x20;
    * [Form](https://developer.apple.com/documentation/swiftui/form) ⟩ [View Modifiers](https://developer.apple.com/documentation/swiftui/form-view-modifiers) ⟩&#x20;
      * [.listRowSeparator(\_:edges:)](https://developer.apple.com/documentation/swiftui/form/listrowseparator\(_:edges:\))
        {% endtab %}

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

* [List](/ios/swiftui/lists/list.md) is used as content.
* use [NavigationLink](/ios/swiftui/view/navi/link.md) to navigate to other views.
  {% endtab %}
  {% endtabs %}