Playground de SwiftUI

Escreva, execute e compartilhe trechos de código - sem instalação.

ContentView.swift

Pré-visualizaçãoPr?via autom?tica

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

Execute SwiftUI online e veja o app em um iPhone

Um playground de SwiftUI online e grátis. Escreva um ContentView e suas views aparecem em uma tela do tamanho de um iPhone ao lado do código. Botões, toggles e campos de texto respondem aos toques, então as mudanças de @State aparecem como em um aparelho. Sem Mac, sem Xcode e sem simulador para baixar.

Seu código é compilado com swiftc contra a implementação própria de SwiftUI da Coddy, a mesma que faz funcionar a prévia ao vivo das aulas de SwiftUI da Coddy. Ela cobre a API do dia a dia: stacks, Text, Image(systemName:), Button, Toggle, TextField, Slider, Stepper, Picker, List, ForEach, Form, NavigationStack, sheets e alerts, com @State, @Binding, ObservableObject e @Published. Não é o framework da Apple, então frameworks exclusivos da Apple como UIKit, MapKit e Core Data não estão disponíveis.

O que torna este playground de SwiftUI útil

Uma prévia de iPhone ao vivo: a tela é desenhada no tamanho de um iPhone dentro de uma moldura de aparelho, com barra de status e Dynamic Island, para o layout ficar como ficaria em um celular.
Toque no app. Botões, toggles, steppers e campos de texto respondem, e a prévia repete seus toques sobre um estado novo, então @State e @Binding se comportam como em um app de verdade.
Prévia automática: a tela é reconstruída um instante depois que você para de digitar, e o botão de atualizar reinicia o app. Os erros do compilador apontam a linha do seu arquivo.
Sugestões de código SwiftUI no editor: modificadores depois de um ponto, os valores que um argumento aceita (.font(., .foregroundStyle(.), property wrappers depois de @ e nomes de SF Symbols.
Salve uma captura de tela do celular em PNG e baixe seu ContentView.swift para abrir no Xcode depois. Arquivos colados do Xcode também compilam: blocos #Preview são ignorados.

O que você pode criar no playground de SwiftUI

Uma lista de tarefas com List, ForEach($items) e um Toggle por linha, mais um TextField e um botão que adiciona novas linhas.
Uma tela de configurações: um Form com seções, um Picker, um Stepper e um Slider, todos ligados a @State.
Navegação: um NavigationStack com título e linhas NavigationLink que abrem uma tela de detalhes.
Experimentos de layout: VStack, HStack e ZStack com .padding, .frame, .background e formas arredondadas, para ver como os modificadores se empilham.

Perguntas frequentes sobre o playground de SwiftUI online

Posso rodar SwiftUI sem um Mac?

Sim. Este playground funciona em qualquer navegador moderno, no Windows, no Linux, em um Chromebook ou em um iPad. Seu código é compilado nos servidores da Coddy e a tela é desenhada na página, então você não precisa de Xcode, de um Mac nem do simulador do iOS para experimentar SwiftUI.

O playground de SwiftUI online é grátis?

Sim. É grátis e sem cadastro: abra a página, edite o código e veja o celular.

Este é o SwiftUI da Apple?

Não. É a implementação própria da Coddy das views, modificadores e property wrappers do SwiftUI, compilada com swiftc e desenhada como uma tela de iPhone. O código SwiftUI do dia a dia roda sem mudanças, e a prévia é a mesma que as aulas de SwiftUI da Coddy usam e com a qual são corrigidas. Frameworks exclusivos da Apple como UIKit, MapKit e Core Data não estão disponíveis, e as animações mostram o estado final.

Posso usar @Observable ou #Preview?

Use ObservableObject com @Published e @StateObject para dados compartilhados. A macro @Observable e o #Preview precisam dos plugins de macro do Xcode; blocos #Preview são ignorados, então um arquivo colado do Xcode ainda compila e o app mostra o ContentView. Você também pode adicionar seu próprio struct App com @main.

Como aprendo SwiftUI depois de testar o playground?

Mude o app de exemplo e navegue por ele com toques na prévia. Quando quiser um caminho estruturado, o curso de SwiftUI da Coddy ensina views, modificadores, stacks, @State, listas, navegação, @Binding e dados observáveis em aulas curtas, cada uma com a mesma prévia de iPhone ao vivo.

Ferramentas úteis para SwiftUI

Ferramentas gratuitas baseadas no navegador que combinam bem com o Playground de SwiftUI - tudo faz parte do Coddy.

Incorpore o editor de SwiftUI Compare plataformas de programação