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 SwiftUI-da 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