SwiftUI-da ternary operatorlar

Bu videoda ternary operatorlarni o'rganamiz. Ternary operator — if-else ni bitta qatorga siqgan qisqa yozuv usulidir. SwiftUI-da u modifier-larni shartli o'zgartirish va animatsiyalar uchun juda ko'p ishlatiladi.

Bu videoga o'tishdan oldin oldingi videodagi if-else shartli operatorlarini tushunib olish tavsiya etiladi.

Yangi fayl yaratish

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

Muammo: if-else bilan ikki xil element

Avval oddiy if-else yondashuvi ko'ramiz:

struct TernaryBootcamp: View {

    @State var isStartingState: Bool = false

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

            if isStartingState {
                RoundedRectangle(cornerRadius: 25)
                    .fill(Color.red)
                    .frame(width: 200, height: 100)
            } else {
                RoundedRectangle(cornerRadius: 25)
                    .fill(Color.blue)
                    .frame(width: 200, height: 100)
            }

            Spacer()
        }
    }
}

Bu kod ishlaydi, lekin ikki muammosi bor:

• Samarasiz UI — har safar yangi element chiziladi va o'chiriladi
• Takroriy kod — faqat rang farq qilsa-da, butun RoundedRectangle ikki marta yozilgan

Yechim: ternary operator

Ternary operator yozilishi:

shart ? true_qiymat : false_qiymat

• ? — "agar true bo'lsa" degan ma'noni bildiradi
• : — "agar false bo'lsa" degan ma'noni bildiradi

Bitta element saqlab, faqat rangini shartli o'zgartiramiz:

struct TernaryBootcamp: View {

    @State var isStartingState: Bool = false

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

            RoundedRectangle(cornerRadius: 25)
                .fill(isStartingState ? Color.red : Color.blue)
                .frame(width: 200, height: 100)

            Spacer()
        }
    }
}

Endi bitta RoundedRectangle bor, faqat uning rangi o'zgaradi. Bu ham samaraliroq, ham kodi qisqaroq.

Bir nechta modifier-ni shartli o'zgartirish

Ternary operator istalgan modifier-ga qo'llanishi mumkin — burchak radiusi, o'lcham, matn va hokazo:

struct TernaryBootcamp: View {

    @State var isStartingState: Bool = false

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

            // Matn ham ternary bilan o'zgaradi
            Text(isStartingState ? "Boshlang'ich holat" : "Tugash holati")

            RoundedRectangle(cornerRadius: isStartingState ? 25 : 0)
                .fill(isStartingState ? Color.red : Color.blue)
                .frame(
                    width: isStartingState ? 200 : 50,
                    height: isStartingState ? 400 : 50
                )

            Spacer()
        }
    }
}

Tugma bosilganda bir vaqtda to'rtta narsa o'zgaradi:

• Matn matni
• Burchak radiusi (yumaloq ↔ o'tkir)
• Kengligi va balandligi
• Rangi

Hammasi bitta @State o'zgaruvchisi orqali boshqarilmoqda.

if-else va ternary operator — taqqoslash

Qoida: elementni to'liq ko'rsatish yoki yashirish kerak bo'lsa — if-else. Bitta elementning xususiyatini o'zgartirish kerak bo'lsa — ternary operator.

Xulosa

Bu videoda o'rgandik:

• Ternary operator — shart ? true_qiymat : false_qiymat shaklidagi qisqa if-else
• ? — true bo'lgandagi qiymat
• : — false bo'lgandagi qiymat
• Ternary operator .fill(), .frame(), .cornerRadius() va boshqa istalgan modifier-ga qo'llanadi
• if-else yangi element yaratadi, ternary esa mavjud elementning xususiyatini o'zgartiradi — bu animatsiyalar uchun muhim

Keyingi videolarda animatsiyalar bilan ishlashda ternary operatordan ko'p foydalanamiz!

Rahmat tomosha qilganingiz uchun! Keyingi videoda ko'rishamiz!