SwiftUI online

Pisz, uruchamiaj i udostępniaj fragmenty kodu bez żadnej konfiguracji.

ContentView.swift

PodglądAutomatyczny podgląd

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

Uruchamiaj SwiftUI online i oglądaj aplikację na iPhonie

Darmowy edytor SwiftUI online. Piszesz ContentView, a twoje widoki pojawiają się na ekranie wielkości iPhone'a obok kodu. Przyciski, przełączniki i pola tekstowe reagują na dotknięcia, więc zmiany @State widać tak jak na urządzeniu. Bez Maca, bez Xcode, bez pobierania symulatora.

Twój kod jest kompilowany przez swiftc z własną implementacją SwiftUI od Coddy, tą samą, która napędza podgląd na żywo w lekcjach SwiftUI w Coddy. Obejmuje codzienne API: stosy, Text, Image(systemName:), Button, Toggle, TextField, Slider, Stepper, Picker, List, ForEach, Form, NavigationStack, arkusze i alerty, z @State, @Binding, ObservableObject i @Published. To nie jest framework Apple, więc frameworki dostępne tylko u Apple, takie jak UIKit, MapKit i Core Data, nie są dostępne.

Dlaczego ten edytor SwiftUI online się przydaje

Podgląd iPhone'a na żywo: ekran renderuje się w rozmiarze iPhone'a w ramce urządzenia, z paskiem stanu i Dynamic Island, więc układ wygląda tak jak na telefonie.
Dotykaj aplikacji. Przyciski, przełączniki, steppery i pola tekstowe reagują, a podgląd odtwarza twoje dotknięcia na świeżym stanie, więc @State i @Binding zachowują się jak w prawdziwej aplikacji.
Automatyczny podgląd: ekran przebudowuje się chwilę po tym, jak przestajesz pisać, a przycisk odświeżania uruchamia aplikację od nowa. Błędy kompilatora wskazują linię w twoim pliku.
Podpowiedzi kodu SwiftUI w edytorze: modyfikatory po kropce, wartości, które przyjmuje argument (.font(., .foregroundStyle(.), property wrappery po @ i nazwy SF Symbols.
Zapisz zrzut ekranu telefonu jako PNG i pobierz plik ContentView.swift, żeby otworzyć go później w Xcode. Pliki wklejone z Xcode też się budują: bloki #Preview są ignorowane.

Co możesz zbudować w edytorze SwiftUI online

Listę zadań z List, ForEach($items) i Toggle w każdym wierszu, a do tego TextField i przycisk, który dodaje nowe wiersze.
Ekran ustawień: Form z sekcjami, Picker, Stepper i Slider, wszystko powiązane z @State.
Nawigację: NavigationStack z tytułem i wierszami NavigationLink, które otwierają widok szczegółów.
Eksperymenty z układem: VStack, HStack i ZStack z .padding, .frame, .background i zaokrąglonymi kształtami, żeby zobaczyć, jak nakładają się modyfikatory.

Edytor SwiftUI online: najczęstsze pytania

Czy mogę uruchomić SwiftUI bez Maca?

Tak. Ten edytor działa w każdej nowoczesnej przeglądarce, na Windowsie, Linuksie, Chromebooku czy iPadzie. Twój kod jest kompilowany na serwerach Coddy, a ekran jest rysowany na stronie, więc do wypróbowania SwiftUI nie potrzebujesz Xcode, Maca ani symulatora iOS.

Czy edytor SwiftUI online jest darmowy?

Tak. Jest darmowy i bez rejestracji: otwierasz stronę, edytujesz kod i patrzysz na telefon.

Czy to jest SwiftUI od Apple?

Nie. To własna implementacja widoków, modyfikatorów i property wrapperów SwiftUI od Coddy, kompilowana przez swiftc i rysowana jako ekran iPhone'a. Codzienny kod SwiftUI działa bez zmian, a podgląd jest tym samym, którego używają i którym oceniają lekcje SwiftUI w Coddy. Frameworki dostępne tylko u Apple, takie jak UIKit, MapKit i Core Data, nie są dostępne, a animacje pokazują stan końcowy.

Czy mogę używać @Observable albo #Preview?

Do współdzielonych danych używaj ObservableObject z @Published i @StateObject. Makro @Observable i #Preview wymagają wtyczek makr z Xcode; bloki #Preview są ignorowane, więc plik wklejony z Xcode nadal się zbuduje, a aplikacja pokaże ContentView. Możesz też dodać własną strukturę App z @main.

Jak uczyć się SwiftUI po wypróbowaniu edytora?

Zmieniaj przykładową aplikację i przeklikaj ją w podglądzie. Gdy zechcesz uporządkowanej ścieżki, kurs SwiftUI w Coddy uczy widoków, modyfikatorów, stosów, @State, list, nawigacji, @Binding i obserwowalnych danych w krótkich lekcjach, każda z tym samym podglądem iPhone'a na żywo.

Przydatne narzędzia do SwiftUI

Darmowe narzędzia w przeglądarce, które świetnie działają razem z edytorem SwiftUI online. Wszystkie w Coddy.

Osadź edytor SwiftUI Porównaj platformy do nauki programowania