SwiftUI Playground

Пишите, запускайте и делитесь фрагментами кода - без установки.

ContentView.swift

ПредпросмотрАвтопредпросмотр

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 онлайн и смотрите приложение на iPhone

Бесплатный онлайн playground для SwiftUI. Напишите ContentView, и ваши представления появятся рядом с кодом на экране размером с iPhone. Кнопки, переключатели и текстовые поля реагируют на нажатия, поэтому изменения @State видны так же, как на устройстве. Не нужны ни Mac, ни Xcode, ни симулятор.

Ваш код компилируется swiftc с собственной реализацией SwiftUI от Coddy, той же, на которой работает живое превью в уроках SwiftUI на Coddy. Она покрывает повседневный API: стеки, Text, Image(systemName:), Button, Toggle, TextField, Slider, Stepper, Picker, List, ForEach, Form, NavigationStack, sheet и alert, а также @State, @Binding, ObservableObject и @Published. Это не фреймворк Apple, поэтому фреймворки, доступные только на платформах Apple, такие как UIKit, MapKit и Core Data, здесь недоступны.

Чем полезен этот SwiftUI playground

Живое превью iPhone: экран рисуется в размере iPhone внутри рамки устройства, со строкой состояния и Dynamic Island, поэтому макет выглядит так же, как на телефоне.
Нажимайте на приложение. Кнопки, переключатели, степперы и текстовые поля отвечают, а превью повторяет ваши нажатия на свежем состоянии, поэтому @State и @Binding ведут себя как в настоящем приложении.
Автопревью: экран пересобирается вскоре после того, как вы перестаёте печатать, а кнопка обновления перезапускает приложение. Ошибки компилятора указывают на строку в вашем файле.
Подсказки кода SwiftUI в редакторе: модификаторы после точки, значения, которые принимает аргумент (.font(., .foregroundStyle(.), property wrappers после @ и имена SF Symbols.
Сохраните снимок экрана телефона в PNG и скачайте свой ContentView.swift, чтобы потом открыть его в Xcode. Файлы, вставленные из Xcode, тоже собираются: блоки #Preview игнорируются.

Что можно сделать в SwiftUI playground

Список дел с List, ForEach($items) и Toggle в каждой строке, плюс TextField и кнопка, которая добавляет новые строки.
Экран настроек: Form с разделами, Picker, Stepper и Slider, все привязаны к @State.
Навигация: NavigationStack с заголовком и строками NavigationLink, которые открывают экран с подробностями.
Эксперименты с вёрсткой: VStack, HStack и ZStack с .padding, .frame, .background и скруглёнными фигурами, чтобы увидеть, как складываются модификаторы.

Часто задаваемые вопросы про онлайн SwiftUI playground

Можно ли запускать SwiftUI без Mac?

Да. Этот playground работает в любом современном браузере: на Windows, Linux, Chromebook или iPad. Ваш код компилируется на серверах Coddy, а экран рисуется прямо на странице, поэтому, чтобы попробовать SwiftUI, не нужны ни Xcode, ни Mac, ни симулятор iOS.

Онлайн SwiftUI playground бесплатный?

Да. Он бесплатный и без регистрации: откройте страницу, меняйте код и смотрите на телефон.

Это SwiftUI от Apple?

Нет. Это собственная реализация представлений, модификаторов и property wrappers SwiftUI от Coddy, скомпилированная swiftc и нарисованная как экран iPhone. Повседневный код на SwiftUI работает без изменений, а превью то же, что используют и по которому проверяются уроки SwiftUI на Coddy. Фреймворки, доступные только на платформах Apple, такие как UIKit, MapKit и Core Data, недоступны, а анимации показывают конечное состояние.

Можно ли использовать @Observable или #Preview?

Для общих данных используйте ObservableObject с @Published и @StateObject. Макросу @Observable и #Preview нужны плагины макросов Xcode; блоки #Preview игнорируются, поэтому файл, вставленный из Xcode, всё равно собирается, а приложение показывает ContentView. Можно добавить и собственную структуру App с @main.

Как выучить SwiftUI после знакомства с playground?

Измените пример приложения и пройдитесь по нему нажатиями в превью. Когда захотите учиться по плану, курс SwiftUI на Coddy научит представлениям, модификаторам, стекам, @State, спискам, навигации, @Binding и наблюдаемым данным в коротких уроках, и в каждом есть то же живое превью iPhone.

Полезные инструменты для SwiftUI

Бесплатные браузерные инструменты, которые отлично работают с Playground SwiftUI - всё это часть Coddy.

Встроить редактор SwiftUI Сравнить платформы для программирования