Uygulamaya özel: ilk iPhone ekranın

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

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.

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.

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.

İlk örneği oku ve dene

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Merhaba Dünya! 👋")
                .font(.largeTitle)
            Button("Bana dokun") {
                print("Butona dokunuldu!")
            }
        }
    }
}

iPhone ekranında büyük bir "Merhaba Dünya! 👋" yazısı ve altında "Bana dokun" butonu görünür.

Adım adım neden böyle çalışıyor?

1. @State sayacın değişen yerel durumunu saklar.
2. body mevcut durumdan arayüz tanımlar.
3. Text sayıyı metne yerleştirir.
4. Button olayı durumu artırır; görünüm kendini yeni değerle günceller.

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()
    }
}

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

Kolaydan zora sen dene

1. Xcode’da yeni SwiftUI iOS App projesinde örneği ContentView içine koy.
2. Artır düğmesini dene; konsol ile ekrandaki metnin farkını açıkla.
3. Sıfırla düğmesi ekle; sayacı 0 yaptığında görünümün güncellendiğini doğrula.

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()
    }
}

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

Yaygın hata ve çözümü

1. SwiftUI kodunu yalnızca Swift konsol yorumlayıcısında çalıştırmak UI çatısı bulunamadı hatası verebilir; Xcode App hedefini kullan.
2. Durumu sıradan sabitle karıştırmak değişimi görünür yapmaz; bu örnekte değişen sayaç için @State var gerekir.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

@State sayacı değiştiğinde Text neden yeni sayıyı gösterir?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.