Published on

SwiftUI-da NavigationView va NavigationLink — qanday ishlatish kerak

Authors

Bu videoda biz NavigationView va NavigationLink haqida gaplashamiz. Bu SwiftUI-dagi eng muhim komponentlardan biri — deyarli har qanday ilovada ishlatiladi.

NavigationView — bu container. Uni ishlatish bilan bir qator tayyor imkoniyatlar kelib chiqadi:

  • Yuqorida sarlavha qo'shish
  • Yuqori panelga tugmalar qo'shish
  • NavigationLink orqali boshqa ekranlarga o'tish va avtomatik "Orqaga" tugmasi

Boshlang'ich sozlama — NavigationView

struct NavigationViewBootcamp: View {
    var body: some View {
        NavigationView {
            ScrollView {
                Text("Salom dunyo!")
                Text("Salom dunyo!")
                Text("Salom dunyo!")
            }
            .navigationTitle("Barcha xabarlar")
        }
    }
}

ScrollView NavigationView ichida bo'lganda sarlavha uchun yuqorida joy qoladi. navigationTitle modifikatori NavigationView ichidagi view-ga qo'yiladi — NavigationView o'ziga emas.

// Avtomatik — sarlavha katta boshlanadi, scroll qilganda kichrayadi
// Bu eng chiroyli va professional ko'rinish
.navigationTitle("Barcha xabarlar")
// yoki
.navigationBarTitleDisplayMode(.automatic)

// Doim kichik — sarlavha har doim yuqori panelda kichik ko'rinadi
.navigationBarTitleDisplayMode(.inline)

// Doim katta — scroll qilganda ham kichraymaydi
.navigationBarTitleDisplayMode(.large)

Tavsiya: .automatic eng yaxshi ko'rinishni beradi — scroll qilganda sarlavha katta formatdan kichik formatga o'tadi. Bu professional ilovalarda keng tarqalgan effekt.

NavigationLink — ekranga o'tish

NavigationLink — bu tugma kabi ishlaydi, lekin bosilganda o'ngdan yangi ekran surilib kiradi:

NavigationView {
    ScrollView {
        // 1-usul: faqat matn bilan
        NavigationLink("Salom dunyo", destination: Text("Ikkinchi ekran"))

        // 2-usul: alohida destination va label bilan
        NavigationLink {
            MyOtherScreen()
        } label: {
            Text("Bu yerga bosing")
        }
    }
    .navigationTitle("Barcha xabarlar")
}

NavigationLink bosilganda birinchi ekranning sarlavhasi avtomatik ravishda ikkinchi ekranning "Orqaga" tugmasiga aylanadi. Bu tayyor va professional ko'rinish.

Ikkinchi ekranga sarlavha qo'shish va davom ettirish

// Birinchi ekran
struct NavigationViewBootcamp: View {
    var body: some View {
        NavigationView {
            ScrollView {
                NavigationLink("Ikkinchi ekranga o'tish") {
                    MySecondScreen()
                }
            }
            .navigationTitle("Birinchi ekran")
        }
    }
}

// Ikkinchi ekran
struct MySecondScreen: View {
    var body: some View {
        ZStack {
            Color.green.edgesIgnoringSafeArea(.all)

            // Ikkinchi ekrandan uchinchi ekranga ham o'tish mumkin
            NavigationLink("Uchinchi ekranga o'tish") {
                Text("Uchinchi ekran")
            }
        }
        .navigationTitle("Ikkinchi ekran")
    }
}

Bir NavigationView ichida xohlagancha chuqur ketishingiz mumkin — har bir ekranga o'z sarlavhasi va avtomatik "Orqaga" tugmasi qo'shiladi.

Ba'zan standart navigatsiya panelini yashirib, o'z dizaynimizni qo'llash kerak:

struct MySecondScreen: View {

    @Environment(\.presentationMode) var presentationMode

    var body: some View {
        ZStack {
            Color.green.edgesIgnoringSafeArea(.all)

            VStack {
                // O'z "Orqaga" tugmamiz
                Button("Orqaga") {
                    presentationMode.wrappedValue.dismiss()
                }

                NavigationLink("Oldinga") {
                    Text("Uchinchi ekran")
                }
            }
        }
        // Standart navigatsiya panelini yashirish
        .navigationBarHidden(true)
    }
}

presentationMode.wrappedValue.dismiss() — Sheet-da ham, NavigationView-da ham bir xil ishlaydi. SwiftUI joriy muhitni o'zi aniqlaydi va to'g'ri dismiss usulini tanlaydi.

NavigationBarItems — yuqori panelga tugma qo'shish

struct NavigationViewBootcamp: View {
    var body: some View {
        NavigationView {
            ScrollView {
                Text("Kontent")
            }
            .navigationTitle("Barcha xabarlar")
            .navigationBarItems(
                // Chap tomonga
                leading: HStack {
                    Image(systemName: "person.fill")
                    Image(systemName: "flame.fill")
                },
                // O'ng tomonga
                trailing: NavigationLink {
                    MyOtherScreen()
                } label: {
                    Image(systemName: "gear")
                }
                .accentColor(.red)
            )
        }
    }
}

navigationBarItems — yuqori panelning chap (leading) va o'ng (trailing) tomoniga istalgan view qo'shish imkonini beradi. Ular bitta tugma, HStack ichida bir nechta tugma yoki NavigationLink bo'lishi mumkin.

.accentColor(.red) — NavigationLink yoki tugmaning standart ko'k rangini o'zgartiradi.

To'liq misol

struct NavigationViewBootcamp: View {
    var body: some View {
        NavigationView {
            ScrollView {
                NavigationLink {
                    MyOtherScreen()
                } label: {
                    Text("Ikkinchi ekranga o'tish")
                }
            }
            .navigationTitle("Barcha xabarlar")
            .navigationBarTitleDisplayMode(.automatic)
            .navigationBarItems(
                leading: Image(systemName: "person.fill"),
                trailing: Image(systemName: "gear")
            )
        }
    }
}

struct MyOtherScreen: View {

    @Environment(\.presentationMode) var presentationMode

    var body: some View {
        ZStack {
            Color.green.edgesIgnoringSafeArea(.all)

            Button("Orqaga") {
                presentationMode.wrappedValue.dismiss()
            }
        }
        .navigationTitle("Ikkinchi ekran")
        .navigationBarHidden(false)
    }
}

⚠️ Muhim qoidalar

// ❌ NOTO'G'RI — NavigationView ichiga NavigationView qo'ymang
NavigationView {
    NavigationView {  // Bu xatolarga olib keladi!
        Text("Salom")
    }
}

// ✅ TO'G'RI — faqat bitta NavigationView, chuqur ketish NavigationLink orqali
NavigationView {
    NavigationLink("Ikkinchi") {
        NavigationLink("Uchinchi") {
            Text("Uchinchi ekran")
        }
    }
}

Butun ilova uchun bitta NavigationView yetarli — odatda ilovaning eng yuqori qatlamida qo'yiladi.

Xulosa

XususiyatQo'llash
NavigationViewBarcha navigatsiya uchun container — bitta bo'lishi kerak
.navigationTitle()Har bir ekran sarlavhasi
.navigationBarTitleDisplayMode(.automatic)Scroll bilan o'zgaradigan sarlavha — tavsiya etiladi
NavigationLinkEkranga o'tish — avtomatik "Orqaga" tugmasi bilan
.navigationBarHidden(true)Standart panelni yashirish
presentationMode.wrappedValue.dismiss()O'z "Orqaga" tugmangiz uchun
.navigationBarItems(leading:trailing:)Yuqori panelga tugmalar qo'shish

NavigationView Sheet va Transition-ga qaraganda ko'p hollarda qulayroq — tayyor "Orqaga" tugmasi, sarlavha va panel bilan juda kam kod yozib professional natijaga erishiladi.

Rahmat, men Nick, bu Swiftful Thinking va keyingi videoda ko'rishguncha!

Buy mea coffee