Published on

NavigationStack

Authors

iPhone-dagi Sozlamalar ilovasini tasavvur qiling. "Umumiy" bo'limiga tepsangiz, yangi ekran o'ngdan siljib kiradi. "Bu haqida" bo'limiga tepsangiz, yana bir ekran kiradi. Orqaga tugmasini bossangiz, kelgan yo'lingizdan qaytasiz. Mana shu — o'ngdan siljib kirish va orqaga qaytish xatti-harakati push/pop navigatsiya deyiladi va SwiftUIda u NavigationStack orqali ishlaydi.

NavigationStack — konteyner view: siz kontentingizni uning ichiga o'rab olasiz va u ekranlar to'plamini boshqaradi. "Stack" (to'plam) — bu erda juda mos mental model: chuqurroq navigatsiya qilgan sari ekranlar ustma-ust qo'shilib boradi, orqaga qaytganda esa birin-ketin olinib tashlanadi. Hozir ko'rib turgan ekraningiz har doim to'plamning eng tepasida joylashadi.

Navigatsiya havolalarini qo'shishdan avval, eng oddiy NavigationStack-ni ko'rib chiqaylik — sarlavhali konteyner. Bu yolg'iz holda ham navigatsiya panelini yuqorida hosil qiladi: orqaga tugmalar va sarlavhalar aynan o'sha panelda ko'rinadi.

Swift
ContentView.swift
import SwiftUI struct ContentView: View { var body: some View { // NavigationStack konteyner — kontentingizni uning ichiga o'rang NavigationStack { // Bu Text ildiz (birinchi) ekranning kontenti Text("Ilovamga xush kelibsiz") // .navigationTitle nav bar-dagi katta sarlavhani o'rnatadi .navigationTitle("Bosh sahifa") } } } 
NavigationStack {
    Text("Bu erda kontent")
    // String literal nav bar sarlavhasiga aylanadi
    .navigationTitle("Mening ilovam")
}

Bu modifikatorni NavigationStack ichidagi view-ga qo'llang, NavigationStack o'ziga emas. Sarlavha odatda katta uslubda bo'ladi — scroll qilganda qisqarib ketuvchi katta matn.

Text("Kontent")
.navigationTitle("Sozlamalar")
// .large = katta siljuvchi sarlavha (default), .inline = kichik markazlashgan sarlavha
.navigationBarTitleDisplayMode(.inline)

Ildiz ekranlar uchun .large, stack-da chuqurroq push qilingan ekranlar uchun .inline ishlating. Bu Apple-ning o'z ilovalaridagi patternga mos keladi.

.toolbar 

Text("Kontent")
.navigationTitle("Bosh sahifa")
.toolbar {
    // ToolbarItem tugmani nav bar-ga joylashtiradi
    ToolbarItem(placement: .navigationBarTrailing) {
        Button("Qo'shish") {
            // harakat shu yerda
        }
    }
}

O'ng tomon uchun .navigationBarTrailing (Qo'shish yoki Tahrirlash tugmalari uchun odatiy), chap tomon uchun .navigationBarLeading ishlating. Tizim joylashuvni avtomatik boshqaradi.

.toolbarBackground()

Text("Kontent")
.navigationTitle("Bosh sahifa")
// Nav bar fonini maxsus rangga o'rnatish
.toolbarBackground(Color.blue, for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)

iOS 16+. Ikkita qator kerak: biri rangni, biri panelni ko'rinadigan qiladi (kontent scroll qilinmasa ko'pincha shaffof bo'ladi). Stack ichidagi kontent view-ga qo'llang.

NavigationView vs NavigationStack: Eski onlayn darsliklarda NavigationView ni ko'rishingiz mumkin. U hali ishlaydi, lekin Apple uni iOS 16 da eskirgan deb belgiladi. NavigationStack — zamonaviy o'rnini bosuvchi. Har qanday yangi loyiha uchun NavigationStack ishlating.

Tezkor ma'lumotnoma

ModifikatorVazifasi
.navigationTitle("Sarlavha")Nav bar-da ko'rsatiladigan matnni o'rnatadi
.navigationBarTitleDisplayMode(.large)Katta siljuvchi sarlavha — ildiz ekranlar uchun yaxshi
.navigationBarTitleDisplayMode(.inline)Kichik markazlashgan sarlavha — detail ekranlar uchun yaxshi
.toolbar { }Nav bar-ga tugma yoki elementlar qo'shadi
.toolbarBackground(rang, for: .navigationBar)Nav bar fon rangini o'rnatadi (iOS 16+)

Topshiriq: navigatsiyali ekran yarating

Yangi SwiftUI loyihasi yarating va ContentView-ning body qismini NavigationStack-ga o'rang. Unga sarlavha bering, o'ng tomonga toolbar tugmasi qo'shing va .large hamda .inline display mode-larini sinab ko'ring. Simulyatorda ishga tushiring va katta sarlavhaning scroll qilganda qanday qisqarishini kuzating.

Buy mea coffee