NavigationView: พื้นฐาน, สแต็กการนำทางในแอป SwiftUI

NavigationView คืออะไร?

NavigationView คือคอนเทนเนอร์ SwiftUI ที่ห่อหุ้มลำดับชั้นของหน้าจอและให้อินเทอร์เฟซการนำทาง ภายใน NavigationView จะทำงาน NavigationLink — องค์ประกอบที่เมื่อกดแล้วจะแทนที่หน้าจอปัจจุบันด้วยหน้าจอใหม่ NavigationView จะเพิ่มแถบนำทางพร้อมหัวเรื่องและปุ่ม «กลับ» โดยอัตโนมัติ

NavigationView ปรากฏใน iOS 13 พร้อมกับ SwiftUI ในแนวคิดแล้วมันแทนที่ UINavigationController จาก UIKit แต่ถูกนำไปใช้ในรูปแบบประกาศ แทนที่จะ push/pop ด้วยตนเอง นักพัฒนาจะอธิบายความสัมพันธ์ระหว่างหน้าจอผ่าน NavigationLink ระบบจะจัดการสแต็กโดยอัตโนมัติ

NavigationView รองรับตัวปรับแต่ง .navigationTitle, .navigationBarTitleDisplayMode, .toolbar และ .searchable สำหรับ iOS 16+ Apple ได้แนะนำ NavigationStack ซึ่งคง API ของ NavigationView ไว้ แต่เพิ่มการจัดการสแต็กแบบโปรแกรมผ่าน NavigationPath สำหรับโปรเจกต์ที่รองรับ iOS 15 และต่ำกว่า NavigationView ยังคงเป็นตัวเลือกเดียว

NavigationLink และการเปลี่ยนระหว่างหน้าจอ

NavigationLink คือองค์ประกอบ SwiftUI ที่สร้างการเปลี่ยนไปยังหน้าจอเป้าหมายภายใน NavigationView หรือ NavigationStack เมื่อกด NavigationLink ระบบจะเพิ่มหน้าจอเป้าหมายไปยังสแต็กการนำทาง แอนิเมชันการเปลี่ยนจะเป็น push มาตรฐานจากด้านขวาบน iOS ซึ่งปรับตามแพลตฟอร์ม

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(items) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    Text(item.title)
                }
            }
            .navigationTitle("รายการ")
        }
    }
}

struct DetailView: View {
    let item: Item

    var body: some View {
        VStack {
            Text(item.description)
                .navigationTitle(item.title)
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

NavigationLink รับพารามิเตอร์สองตัว: destination — View เป้าหมาย และ label — องค์ประกอบที่ผู้ใช้กด สำหรับรายการ ไวยากรณ์กับ value และ NavigationLink(value:) สะดวก — มันจะยกเลิกการเลือกเซลล์โดยอัตโนมัติและทำงานกับ NavigationPath

NavigationStack กับ NavigationView: เปรียบเทียบ API

กับ iOS 16 Apple ได้แนะนำ NavigationStack เพื่อแทนที่ NavigationView NavigationStack คงไวยากรณ์แบบประกาศไว้ แต่เพิ่มคุณสมบัติที่สำคัญอย่างยิ่ง — การจัดการสแต็กแบบโปรแกรมผ่านคุณสมบัติ path ชนิด NavigationPath หรืออาร์เรย์ของ Hashable

สำหรับโปรเจกต์ที่มีเวอร์ชันขั้นต่ำ iOS 16+ ให้ใช้ NavigationStack สำหรับรองรับ iOS 14-15 — NavigationView NavigationStack ไม่มีสิ่งที่คล้ายกันโดยตรงสำหรับเวอร์ชันเก่า ดังนั้นการอัปเกรดต้องตรวจสอบความเข้ากันได้

Toolbar และการกำหนดค่า navigationTitle

ตัวปรับแต่ง .toolbar และ .navigationTitle ควบคุมเนื้อหาของแถบนำทาง .navigationTitle กำหนดหัวเรื่องหน้าจอ .navigationBarTitleDisplayMode เลือกสไตล์: .large (ใหญ่, ค่าเริ่มต้น) หรือ .inline (กะทัดรัด, เหมือนในการตั้งค่า) .toolbar เพิ่มปุ่ม ค้นหา และการควบคุมแบบแบ่งส่วน

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("โปรไฟล์") {
                    Text("ชื่อผู้ใช้")
                    Toggle("การแจ้งเตือน", isOn: $notifications)
                }
            }
            .navigationTitle("การตั้งค่า")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("บันทึก") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable เป็นตัวปรับแต่งอีกตัวที่รวมแถบค้นหาเข้ากับแถบนำทาง ทำงานทั้งกับ NavigationView และ NavigationStack การค้นหาจะซ่อนโดยอัตโนมัติเมื่อเลื่อนและปรากฏเมื่อปัดลง รองรับการกรองรายการผ่าน Binding String

การนำทางแบบโปรแกรมด้วย NavigationPath

NavigationPath เป็นชนิด iOS 16+ ที่แสดงสแต็กการนำทางเป็นชุดของค่า Hashable นักพัฒนาเพิ่มองค์ประกอบไปยัง path สำหรับการเปลี่ยนแบบโปรแกรม และลบออกเพื่อกลับมา NavigationPath รองรับ deep links การแจ้งเตือนแบบ push และการกู้คืนสถานะ

struct AppNavigation: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            List(categories) { category in
                NavigationLink("หมวดหมู่ \(category.name)",
                               value: category)
            }
            .navigationTitle("หมวดหมู่")
            .navigationDestination(for: Category.self) { category in
                ProductListView(category: category)
            }
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
        }

        // การเปลี่ยนแบบโปรแกรมผ่าน deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) ลงทะเบียนชนิดข้อมูลที่จะแสดงหน้าจอ เมื่อค่าในชนิดนี้ถูกเพิ่มไปยัง path ระบบจะสร้าง View เป้าหมายโดยอัตโนมัติ วิธีการนี้แทนที่ NavigationLink(destination:) แบบชัดแจ้งและทำให้การนำทางถูกกำหนดชนิดอย่างเคร่งครัด

NavigationView บน iPad, watchOS และ tvOS

NavigationView และ NavigationStack ทำงานบนทุกแพลตฟอร์มของ Apple: iOS, iPadOS, watchOS, tvOS และ macOS พฤติกรรมปรับตามหน้าจอ บน iPad NavigationStack รองรับ NavigationSplitView ซึ่งแทนที่ UISplitViewController จาก UIKit และแสดงสองคอลัมน์บนหน้าจอกว้าง

NavigationSplitView (iOS 16+) แบ่งหน้าจอเป็นแถบด้านข้าง (รายการ) และรายละเอียด บน iPhone แถบด้านข้างจะถูกซ่อน แสดงเฉพาะรายละเอียดผ่าน NavigationLink บน iPad แถบด้านข้างและรายละเอียดจะแสดงพร้อมกันในโหมด split

struct AdaptiveNavigation: View {
    @State private var selectedCategory: Category?

    var body: some View {
        NavigationSplitView {
            List(categories, selection: $selectedCategory) { category in
                Text(category.name)
            }
            .navigationTitle("หมวดหมู่")
        } detail: {
            ProductListView(category: selectedCategory)
        }
    }
}

NavigationSplitView จะเลือกโหมดการแสดงผลที่เหมาะสมที่สุดสำหรับแต่ละอุปกรณ์โดยอัตโนมัติ บน iPhone ในแนวตั้ง — สแต็ก, บน iPad และ iPhone ในแนวนอน — split นักพัฒนาไม่จำเป็นต้องเขียนโค้ดแยกต่างหากสำหรับ size classes ที่แตกต่างกัน