SwiftUI Playground

Kod parçacıklarını yazın, çalıştırın ve paylaşın. Kurulum gerekmez.

ContentView.swift

ÖnizlemeOtomatik ?nizleme

import SwiftUI

struct TodoItem: Identifiable {
    let id = UUID()
    var title: String
    var done = false
}

struct ContentView: View {
    @State private var items = [
        TodoItem(title: "Run SwiftUI in the browser", done: true),
        TodoItem(title: "Tap a task to check it off"),
        TodoItem(title: "Add a task of your own"),
    ]
    @State private var newTitle = ""

    var remaining: Int {
        items.filter { !$0.done }.count
    }

    var body: some View {
        NavigationStack {
            List {
                Section("\(remaining) left to do") {
                    ForEach($items) { $item in
                        Toggle(item.title, isOn: $item.done)
                    }
                }
                Section {
                    HStack {
                        TextField("New task", text: $newTitle)
                        Button("Add") {
                            items.append(TodoItem(title: newTitle))
                            newTitle = ""
                        }
                        .disabled(newTitle.isEmpty)
                    }
                }
            }
            .navigationTitle("My Tasks")
        }
    }
}

SwiftUI kodunu online çalıştırın, uygulamayı iPhone'da görün

Ücretsiz bir online SwiftUI playground. Bir ContentView yazın; görünümleriniz kodun yanında iPhone boyutunda bir ekranda belirsin. Butonlar, anahtarlar ve metin alanları dokunmalara yanıt verir, böylece @State değişiklikleri bir cihazdaki gibi görünür. Mac, Xcode ya da indirilecek bir simülatör gerekmez.

Kodunuz swiftc ile Coddy'nin kendi SwiftUI uygulamasına karşı derlenir; bu, Coddy'nin SwiftUI derslerindeki canlı önizlemeyi çalıştıran uygulamanın ta kendisidir. Günlük API'yi kapsar: stack'ler, Text, Image(systemName:), Button, Toggle, TextField, Slider, Stepper, Picker, List, ForEach, Form, NavigationStack, sheet'ler ve alert'ler; @State, @Binding, ObservableObject ve @Published ile birlikte. Bu, Apple'ın framework'ü değildir; bu yüzden UIKit, MapKit ve Core Data gibi yalnızca Apple'a özgü framework'ler kullanılamaz.

Bu SwiftUI playground'u neden kullanışlı

Canlı iPhone önizlemesi: ekran, durum çubuğu ve Dynamic Island ile birlikte bir cihaz çerçevesi içinde iPhone boyutunda çizilir, böylece bir düzen telefonda nasıl görünecekse öyle görünür.
Uygulamaya dokunun. Butonlar, anahtarlar, stepper'lar ve metin alanları yanıt verir; önizleme dokunmalarınızı temiz bir durum üzerinde yeniden oynatır, böylece @State ve @Binding gerçek bir uygulamadaki gibi davranır.
Otomatik önizleme: ekran, yazmayı bıraktıktan kısa bir süre sonra yeniden oluşturulur ve yenile butonu uygulamayı baştan başlatır. Derleyici hataları dosyanızdaki satırı gösterir.
Editörde SwiftUI kod önerileri: noktadan sonra modifier'lar, bir argümanın aldığı değerler (.font(., .foregroundStyle(.), @ sonrasında property wrapper'lar ve SF Symbol adları.
Telefonun ekran görüntüsünü PNG olarak kaydedin ve ContentView.swift dosyanızı daha sonra Xcode'da açmak üzere indirin. Xcode'dan yapıştırılan dosyalar da derlenir: #Preview blokları yok sayılır.

SwiftUI playground'da neler yapabilirsiniz

List, ForEach($items) ve her satırda bir Toggle ile bir yapılacaklar listesi; ayrıca yeni satır ekleyen bir TextField ve buton.
Bir ayarlar ekranı: bölümlere ayrılmış bir Form, bir Picker, bir Stepper ve bir Slider, hepsi @State'e bağlı.
Gezinme: başlıklı bir NavigationStack ve bir detay görünümü açan NavigationLink satırları.
Düzen denemeleri: modifier'ların nasıl üst üste bindiğini görmek için .padding, .frame, .background ve yuvarlatılmış şekillerle VStack, HStack ve ZStack.

Online SwiftUI playground SSS

SwiftUI'ı Mac olmadan çalıştırabilir miyim?

Evet. Bu playground her modern tarayıcıda, Windows'ta, Linux'ta, bir Chromebook'ta ya da iPad'de çalışır. Kodunuz Coddy'nin sunucularında derlenir ve ekran sayfanın içinde çizilir; bu yüzden SwiftUI'ı denemek için Xcode'a, bir Mac'e ya da iOS simülatörüne ihtiyacınız yoktur.

Online SwiftUI playground ücretsiz mi?

Evet. Ücretsizdir ve kayıt gerektirmez: sayfayı açın, kodu düzenleyin ve telefonu izleyin.

Bu, Apple'ın SwiftUI'ı mı?

Hayır. SwiftUI'ın görünümlerinin, modifier'larının ve property wrapper'larının Coddy'ye ait bir uygulamasıdır; swiftc ile derlenir ve bir iPhone ekranı olarak çizilir. Günlük SwiftUI kodu değişmeden çalışır ve önizleme, Coddy'nin SwiftUI derslerinin kullandığı ve değerlendirmede baz aldığı önizlemenin aynısıdır. UIKit, MapKit ve Core Data gibi yalnızca Apple'a özgü framework'ler kullanılamaz ve animasyonlar son hallerini gösterir.

@Observable veya #Preview kullanabilir miyim?

Paylaşılan veriler için @Published ve @StateObject ile birlikte ObservableObject kullanın. @Observable makrosu ve #Preview, Xcode'un makro eklentilerine ihtiyaç duyar; #Preview blokları yok sayılır, böylece Xcode'dan yapıştırılan bir dosya yine derlenir ve uygulama ContentView'ı gösterir. Kendi @main App struct'ınızı da ekleyebilirsiniz.

Playground'u denedikten sonra SwiftUI'ı nasıl öğrenirim?

Örnek uygulamayı değiştirin ve önizlemede dokunarak gezinin. Düzenli bir yol istediğinizde, Coddy'nin SwiftUI kursu görünümleri, modifier'ları, stack'leri, @State'i, listeleri, gezinmeyi, @Binding'i ve gözlemlenebilir verileri kısa derslerle öğretir; her dersin aynı canlı iPhone önizlemesi vardır.

SwiftUI için faydalı araçlar

SwiftUI Playground ile iyi çalışan, tarayıcı tabanlı ücretsiz araçlar. Hepsi Coddy'nin bir parçası.

SwiftUI düzenleyicisini göm Kodlama platformlarını karşılaştır