SwiftUI: görünümler ve yerleşim

iPhone'da Ayarlar uygulamasını aç: bölümler, anahtarlar, simgeli satırlar. Ya da herhangi bir haber uygulamasını: kartlar, görseller, başlıklar. Bu ekranların hepsi aynı tuğlalardan kurulmuştur. SwiftUI'de her öğe (bir metin, bir simge, bir düğme, bütün bir kart) View protokolüne uyan küçük bir yapıdır. Onları yan yana ya da üst üste koyar ve değiştiricilerle (modifier) süsleriz. Bu derste Educora için bir ders kartı, bir ders listesi ve bir ayarlar ekranı kuracaksın.

Bildirimsel yaklaşım: UIKit ve SwiftUI

SwiftUI'den önce iOS ekranları UIKit ile kurulurdu: nesneler oluşturulur, birbirine eklenir, veri değişince de her etiket elle güncellenirdi. SwiftUI'de ekranın geçerli duruma göre nasıl görünmesi gerektiğini tarif edersin, gerisini çatı kendisi yapar. Aynı sayaç iki üslupta:

final class CounterViewController: UIViewController {
    private let label = UILabel()
    private var count = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        label.text = "Taps: 0"
        let button = UIButton(type: .system)
        button.setTitle("Tap", for: .normal)
        button.addTarget(self, action: #selector(tapped), for: .touchUpInside)
        let stack = UIStackView(arrangedSubviews: [label, button])
        stack.axis = .vertical
        stack.frame = view.bounds
        view.addSubview(stack)
    }

    @objc private func tapped() {
        count += 1
        label.text = "Taps: \(count)"
    }
}

struct CounterView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Taps: \(count)")
            Button("Tap") {
                count += 1
            }
        }
    }
}

Değiştiriciler ve sıraları

Değiştirici (modifier), bir görünümü değiştiren bir metottur: .font, .padding, .background, .foregroundStyle, .frame, .clipShape. Değiştirici eski görünümü değiştirmez, onu yeni bir görünüme sarar. Bu yüzden sıra önemlidir: aşağıdaki örnekte sarı arka plan boşluğu da kapsar, çünkü .background, .padding'den sonra gelir.

Text("Swift")
    .font(.title)
    .padding()
    .background(.yellow)
    .clipShape(RoundedRectangle(cornerRadius: 12))

Yığınlar: VStack, HStack, ZStack

struct LessonCard: View {
    let title: String
    let minutes: Int

    var body: some View {
        HStack(spacing: 16) {
            ZStack {
                Circle()
                    .fill(.blue.opacity(0.15))
                    .frame(width: 48, height: 48)
                Text(String(title.prefix(1)))
                    .font(.headline)
            }
            VStack(alignment: .leading, spacing: 4) {
                Text(title)
                    .font(.headline)
                Text("\(minutes) min")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }
            Spacer()
            Image(systemName: "chevron.right")
                .foregroundStyle(.tertiary)
        }
        .padding()
        .background(.gray.opacity(0.1), in: RoundedRectangle(cornerRadius: 16))
    }
}

VStack(alignment: .leading, spacing: 4) metinleri sola hizalar ve aralarına 4 punto boşluk koyar. Spacer() oku sağ kenara iter. Kart verisini (title, minutes) dışarıdan alır; bu yüzden onu istediğin kadar yeniden kullanabilirsin: LessonCard(title: "Loops", minutes: 12).

Boyut nasıl belirlenir? Varsayılan olarak bir görünüm, içeriği kadar yer kaplar. .frame(width: 48, height: 48) sabit bir boyut verir; .frame(maxWidth: .infinity) ise görünümü tüm boş genişliği kaplamaya zorlar, örneğin ekran genişliğinde bir düğme için. Kart çok olduğunda onları bir ScrollView içindeki LazyVStack'e koy: ekran kayar, kartlar da yalnızca göründüklerinde oluşturulur; bu da bellekten tasarruf sağlar.

ScrollView {
    LazyVStack(spacing: 12) {
        LessonCard(title: "Variables", minutes: 10)
        LessonCard(title: "Loops", minutes: 12)
        LessonCard(title: "Functions", minutes: 15)
    }
    .padding()
}

SF Symbols simgeleri

SF Symbols, Apple'ın binlerce simgeden oluşan ücretsiz kütüphanesidir; simgeler sistem yazı tipiyle uyumludur ve metin boyutuyla birlikte büyür. Onları adıyla çağırırsın: Image(systemName: "star.fill"). Label("Lessons", systemImage: "book") bir simgeyi ve metni birlikte gösterir. Adları Apple'ın ücretsiz SF Symbols uygulamasında ya da Xcode'un kütüphanesinde (Cmd+Shift+L) ara. Semboller bir yazı tipi gibi davrandığı için renklerini .foregroundStyle(.orange), boyutlarını da .font(.title) ile değiştirebilirsin.

List ve Form

struct LessonsView: View {
    let lessons = ["Variables", "Loops", "Functions"]

    var body: some View {
        List {
            Section("Swift basics") {
                ForEach(lessons, id: \.self) { lesson in
                    Label(lesson, systemImage: "book")
                }
            }
        }
    }
}

struct SettingsView: View {
    @State private var name = ""
    @State private var reminders = true
    @State private var dailyGoal = 15

    var body: some View {
        Form {
            Section("Profile") {
                TextField("Name", text: $name)
            }
            Section("Learning") {
                Toggle("Daily reminders", isOn: $reminders)
                Stepper("Goal: \(dailyGoal) min", value: $dailyGoal, in: 5...60, step: 5)
            }
        }
    }
}

List kaydırılabilir satırlar gösterir; Form ise aynı görünümü ayarlar ve veri girişi için uyarlar. $name yazımı bir bağlamadır (binding): TextField değeri hem okur hem değiştirir. @State ve bağlamalardan bir sonraki derste ayrıntılı söz edeceğiz.

1. 1
   Kütüphaneyi aç

   İmleci body içinde uygun yere koy ve Cmd+Shift+L'ye bas (ya da pencerenin üstündeki + düğmesine).

2. 2
   Bir görünüm bul

   Arama alanına Toggle yaz ve öğeyi koda ya da tuvale sürükle; Xcode gereken kodu kendisi yazar.

3. 3
   Bir simge seç

   Kütüphanede semboller bölümüne geç, örneğin book'u ara ve adı Image(systemName:) içine kopyala.