Published on

SwiftUI-da if-else va shartli operatorlar

Authors

Hammaga xush kelibsiz! Mening ismim Nick, bu — Swiftful Thinking kanali.

Swift UI-ning asosiy narsalarini o'rgandik. Endi qiziqroq mavzularga o'tamiz. Bu videoda shartli mantiq — ya'ni if-else operatorlari bilan ishlaymiz.

Shartli mantiq — ma'lum bir shart to'g'ri yoki noto'g'ri ekanligiga qarab ekranda turli elementlarni ko'rsatish yoki yashirish imkonini beradi. Masalan:

  • Foydalanuvchi tizimga kirgan bo'lsa — asosiy ekran
  • Kirмаgan bo'lsa — login ekrani

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni ConditionalBootcamp deb nomlang va Create tugmasini bosing. Canvas-da Resume bosing.

Boshlang'ich ko'rinish

Oddiy VStack yaratamiz — bir tugma va bir doira:

struct ConditionalBootcamp: View {

    @State var showCircle: Bool = false

    var body: some View {
        VStack(spacing: 20) {
            Button("Doira: \(showCircle.description)") {
                showCircle.toggle()
            }

            Circle()
                .frame(width: 100, height: 100)

            Spacer()
        }
    }
}

.toggle() — Bool o'zgaruvchisini true-dan false-ga, false-dan true-ga o'tkazadi. showCircle = true yozishdan qulayroq.

if — oddiy shart

Doirani faqat showCircle true bo'lganda ko'rsatamiz:

struct ConditionalBootcamp: View {

    @State var showCircle: Bool = false

    var body: some View {
        VStack(spacing: 20) {
            Button("Doira: \(showCircle.description)") {
                showCircle.toggle()
            }

            if showCircle {
                Circle()
                    .frame(width: 100, height: 100)
            }

            Spacer()
        }
    }
}

if showCircle — if showCircle == true bilan bir xil ma'no beradi. Swift bu qisqartmani avtomatik tushunadi.

Teskarisini ko'rsatish — ! (not)

! belgisi "emas" degan ma'noni bildiradi. showCircle false bo'lganda doirani ko'rsatish:

if !showCircle {
    Circle()
        .frame(width: 100, height: 100)
}

if-else — ikki variant

Shart true bo'lganda doira, false bo'lganda to'rtburchak:

struct ConditionalBootcamp: View {

    @State var showCircle: Bool = false

    var body: some View {
        VStack(spacing: 20) {
            Button("Doira: \(showCircle.description)") {
                showCircle.toggle()
            }

            if showCircle {
                // showCircle true bo'lsa
                Circle()
                    .frame(width: 100, height: 100)
            } else {
                // showCircle false bo'lsa
                Rectangle()
                    .frame(width: 100, height: 100)
            }

            Spacer()
        }
    }
}

if-else if-else — bir nechta shart

Ikkita alohida o'zgaruvchi — doira va to'rtburchak uchun:

struct ConditionalBootcamp: View {

    @State var showCircle: Bool = false
    @State var showRectangle: Bool = false

    var body: some View {
        VStack(spacing: 20) {
            Button("Doira: \(showCircle.description)") {
                showCircle.toggle()
            }

            Button("To'rtburchak: \(showRectangle.description)") {
                showRectangle.toggle()
            }

            if showCircle {
                // Birinchi tekshiriladi
                Circle()
                    .frame(width: 100, height: 100)
            } else if showRectangle {
                // showCircle false bo'lsa tekshiriladi
                Rectangle()
                    .frame(width: 100, height: 100)
            } else {
                // Ikkalasi ham false bo'lsa
                RoundedRectangle(cornerRadius: 25)
                    .frame(width: 200, height: 100)
            }

            Spacer()
        }
    }
}

Muhim: shart yuqoridan pastga o'qiladi. Agar showCircle va showRectangle ikkalasi ham true bo'lsa, faqat doira ko'rinadi — chunki birinchi shart bajarildi va keyingilar tekshirilmaydi.

Alohida if bloklari — bir vaqtda bir nechta element

Agar bir vaqtda ham doira, ham to'rtburchak ko'rinishi kerak bo'lsa, ularni alohida if bloklarda yozamiz:

if showCircle {
    Circle()
        .frame(width: 100, height: 100)
}

if showRectangle {
    Rectangle()
        .frame(width: 100, height: 100)
}

Endi ikkalasi ham true bo'lsa, ikkalasi ham ko'rinadi.

&& — "va" operatori

Ikkala shart ham bajarilishi kerak bo'lsa && ishlatiladi:

// showCircle HAM showRectangle true bo'lsa
if showCircle && showRectangle {
    RoundedRectangle(cornerRadius: 25)
        .frame(width: 200, height: 100)
}

! bilan kombinatsiya:

// showCircle true, showRectangle false bo'lsa
if showCircle && !showRectangle {
    RoundedRectangle(cornerRadius: 25)
        .frame(width: 200, height: 100)
}

// Ikkalasi ham false bo'lsa
if !showCircle && !showRectangle {
    RoundedRectangle(cornerRadius: 25)
        .frame(width: 200, height: 100)
}

|| — "yoki" operatori

Kamida bittasi true bo'lsa yetarli:

// showCircle YOKI showRectangle true bo'lsa (yoki ikkalasi)
if showCircle || showRectangle {
    RoundedRectangle(cornerRadius: 25)
        .frame(width: 200, height: 100)
}

Operatorlar xulosa jadvali

OperatorMa'noMisol
if aa true bo'lsaif showCircle
if !aa false bo'lsaif !showCircle
if a && ba va b ikkalasi trueif showCircle && showRectangle
if a || ba yoki b (yoki ikkalasi) trueif showCircle || showRectangle
else if bbirinchi shart false, b trueelse if showRectangle
elsehech biri true emaselse { ... }

Haqiqiy hayotdagi misol — yuklanish ko'rsatkichi

Ilovalar ko'pincha ma'lumot yuklanayotganda maxsus ko'rinish ko'rsatadi. Buning uchun isLoading o'zgaruvchisi va ProgressView ishlatiladi:

struct ConditionalBootcamp: View {

    @State var isLoading: Bool = false

    var body: some View {
        VStack(spacing: 20) {
            Button("Holat: \(isLoading.description)") {
                isLoading.toggle()
            }

            if isLoading {
                // Ma'lumot yuklanayotganda
                ProgressView()
            } else {
                // Ma'lumot yuklangandan so'ng
                Text("Kontent shu yerda ko'rinadi")
                    .font(.headline)
            }

            Spacer()
        }
    }
}

Bu shakl ilovalar yozishda eng ko'p uchraydigan shartli mantiq namunasi.

Xulosa

Bu videoda o'rgandik:

  • if shart — shart true bo'lganda elementni ko'rsatish
  • !shart — shart false bo'lganda ko'rsatish
  • if-else — true va false uchun ikki xil ko'rinish
  • else if — bir nechta shartni ketma-ket tekshirish
  • && — ikki shart ham bajarilishi kerak
  • || — kamida bitta shart bajarilsa yetarli
  • ProgressView — iOS-ning o'rnatilgan yuklanish ko'rsatkichi
  • .toggle() — Bool qiymatini teskari qilish

Keyingi videoda yangi mavzu bilan davom etamiz!

Rahmat tomosha qilganingiz uchun! Men — Nick, bu Swiftful Thinking. Keyingi videoda ko'rishamiz!

Buy mea coffee