Swift · Uygulamaya özel: ilk iPhone ekranın — videolu atölye

Uygulamaya özel: ilk iPhone ekranın

SwiftUI içinde durumdan üretilen küçük bir ekran kurmak.

Kavramı kur

Swift dili ile SwiftUI çatısı aynı şey değildir. print konsola yazarken Text bir arayüz görünümüdür. Bu ders Xcode’da SwiftUI kullanan bir iOS App projesi gerektirir; sayfadaki konsol derleyicisinde iPhone ekranı açılmaz. Önce projeyi ve hedef simülatörü seç, sonra ContentView dosyasını düzenle.

Neden böyle çalışıyor?

SwiftUI arayüzünü mevcut duruma göre tanımlarsın. @State bir görünümün yerel değişen durumunu saklar. Düğme sayacı artırınca Text içindeki gösterim yeni değerle yeniden değerlendirilir. Ekran yazısını elle arayıp değiştirmek yerine durumun değişmesi görünümü günceller.

Çalışma sırası

VStack alt görünümleri dikey yerleştirir. spacing aralarındaki mesafeyi, padding dıştaki iç boşluğu düzenler. Başlangıçta yalnızca sayaç ve düğme kur; sonra sıfırlama gibi ikinci bir etkileşim ekle. Fiziksel telefona yükleme, imzalama ve yayınlama bu küçük konsol örneklerinden farklı süreçlerdir.

İkinci örnek · 1

@State sayacın değişen yerel durumunu saklar. Kodun tamamı yazılı derste bulunur.

import SwiftUI

struct ContentView: View {
    @State private var sayi = 0
    var body: some View {
        VStack(spacing: 16) {
            Text("Sayaç: \(sayi)")
            Button("Artır") { sayi += 1 }
        }
        .padding()
    }
}

Beklenen sonucu oku

Button olayı durumu artırır; görünüm kendini yeni değerle günceller.

Beklenen: Xcode simülatöründe Sayaç: 0 yazısı ve Artır düğmesi; dokundukça değer artar.

Bir değeri sen değiştir

Xcode’da yeni SwiftUI iOS App projesinde örneği ContentView içine koy. Artır düğmesini dene; konsol ile ekrandaki metnin farkını açıkla.

Hata nereden gelir?

SwiftUI kodunu yalnızca Swift konsol yorumlayıcısında çalıştırmak UI çatısı bulunamadı hatası verebilir; Xcode App hedefini kullan.

Kendi çözümünü kur

Sıfırla düğmesi ekle; sayacı 0 yaptığında görünümün güncellendiğini doğrula. Button("Sıfırla") { sayi = 0 } ifadesini VStack içindeki ilk düğmenin altına ekle.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

import SwiftUI

struct ContentView: View {
    @State private var sayi = 0
    var body: some View {
        VStack(spacing: 16) {
            Text("Sayaç: \(sayi)")
            Button("Artır") { sayi += 1 }
            Button("Sıfırla") { sayi = 0 }
        }
        .padding()
    }

Çözüm varyasyonu · 2

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

}

Kendini kontrol et

@State sayacı değiştiğinde Text neden yeni sayıyı gösterir? Yanıt: SwiftUI görünümü mevcut duruma göre yeniden değerlendirir; arayüz o durumdan üretilir.

Beklenen: Artır ve Sıfırla düğmeleri aynı @State değerini değiştirir.