SwiftUI navigatsiya

SwiftUI navigatsiya

NavigationStack bilan navigatsiya qilishni, NavigationLink bilan ekranlarni stack’ga qo‘shishni (push) hamda sheet va alert’larni ko‘rsatishni o‘rganing.

NavigationStack va NavigationLink

View’larni stack’ga qo‘shish (push) uchun NavigationStack ni NavigationLink bilan birga ishlating.

Sarlavhalar va toolbar elementlarini qo‘shing.

Sintaksis:

• NavigationStack { List { NavigationLink("Title", destination: Detail()) } }
• .navigationTitle("Title")
• .toolbar { ... }

import SwiftUI

struct Detail: View {
  let text: String
  var body: some View { Text(text).navigationTitle("Detail") }
}

struct NavStackDemo: View {
  var body: some View {
    NavigationStack {
      List(1...3, id: \.self) { i in
        NavigationLink("Item \(i)", destination: Detail(text: "Item \(i)"))
      }
      .navigationTitle("Items")
      .toolbar { ToolbarItem(placement: .navigationBarTrailing) { Button("Add") {} } }
    }
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { NavStackDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

Ushbu misol elementlar stack’ini yaratadi va qator bosilganda Detail view’ini push qiladi; unda sarlavha va o‘ng tomonda toolbar tugmasi bor.

Modal ko‘rsatish

Sheet’larni .sheet(isPresented:) bilan, alert’larni esa .alert bilan ko‘rsating.

Sintaksis:

• .sheet(isPresented: $flag) { View() }
• .alert("Title", isPresented: $flag) { Buttons... } message: { Text("...") }

import SwiftUI

struct ModalDemo: View {
  @State private var showSheet = false
  @State private var showAlert = false

  var body: some View {
    VStack(spacing: 12) {
      Button("Show Sheet") { showSheet = true }
      Button("Show Alert") { showAlert = true }
    }
    .sheet(isPresented: $showSheet) {
      VStack(spacing: 12) {
        Text("Hello from a sheet!")
        Button("Close") { showSheet = false }
      }
      .padding()
      .presentationDetents([.medium])
    }
    .alert("Are you sure?", isPresented: $showAlert) {
      Button("Cancel", role: .cancel) { }
      Button("OK", role: .destructive) { }
    } message: {
      Text("This is a confirmation alert.")
    }
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { ModalDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

Ushbu misol sheet va alert’ni ko‘rsatish uchun boolean qiymatlarni almashtiradi; sheet o‘rtacha balandlik darajasidan (medium detent) va oddiy yopish tugmasidan foydalanadi.

Dasturiy navigatsiya (NavigationPath)

NavigationPath yoki tiplashtirilgan path binding’ni yangilash orqali navigatsiyani kod orqali boshqaring.

Sintaksis:

• @State private var path: [T] = []
• NavigationStack(path: $path) { ... }
• .navigationDestination(for: T.self) { ... }

import SwiftUI

struct NumberDetail: View {
  let n: Int
  var body: some View { Text("Number: \(n)") }
}

struct PathDemo: View {
  @State private var path: [Int] = []
  var body: some View {
    NavigationStack(path: $path) {
      VStack(spacing: 12) {
        Button("Go to 42") { path.append(42) }
        Button("Back") { if !path.isEmpty { _ = path.removeLast() } }
      }
      .navigationTitle("Path Demo")
      .navigationDestination(for: Int.self) { n in NumberDetail(n: n) }
    }
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { PathDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

Ushbu misol Int manzilini push qilish va uni dasturiy ravishda pop qilish (yopish) uchun tiplashtirilgan path’dan foydalanadi.