🎁NavigationView

📗 參考

• Design+Code ⟩ List Style and Navigation View

• Mastering SwiftUI, Ch. 11: Navigation UI

• Nick McConnell ⟩ Flow Navigation With SwiftUI (Revisited)

• Sarun ⟩ How to add button to navigation bar in SwiftUI

💾 程式

Adding a Text view is a useful way to give the second column (details pane, or primary pane) a placeholder view.

👉 see example 1 below.

// 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
        }
    }
}

📘 手冊

• SwiftUI ⟩

  • Presentation Containers ⟩ NavigationView ⟩

    • .navigationTitle(_:)

    • .navigationBarTitleDisplayMode(_:)

    • .navigationBarTitle() deprecated.

  • View Layout and Presentation ⟩

    • List

    • Section - used in views like List, Picker, and Form

    • Form ⟩ View Modifiers ⟩

      • .listRowSeparator(_:edges:)

👥 相關

• List is used as content.

• use NavigationLink to navigate to other views.