Playground SwiftUI online

Viết, chạy và chia sẻ đoạn code. Không cần thiết lập.

ContentView.swift

Xem trướcTự động xem trước

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

Chạy SwiftUI online và xem ứng dụng trên iPhone

Playground SwiftUI online miễn phí. Viết một ContentView và các view hiện ra trên màn hình cỡ iPhone ngay cạnh code. Nút, công tắc và ô nhập chữ phản hồi khi bạn chạm, nên thay đổi của @State hiện ra giống như trên thiết bị thật. Không cần Mac, không cần Xcode, không phải tải trình giả lập.

Code được biên dịch bằng swiftc trên bản cài đặt SwiftUI do Coddy tự xây dựng, cũng là bản chạy khung xem trước trực tiếp trong các bài học SwiftUI của Coddy. Bản này bao gồm API dùng hằng ngày: stack, Text, Image(systemName:), Button, Toggle, TextField, Slider, Stepper, Picker, List, ForEach, Form, NavigationStack, sheet và alert, cùng @State, @Binding, ObservableObject và @Published. Đây không phải framework của Apple, nên các framework chỉ có trên Apple như UIKit, MapKit và Core Data không dùng được.

Điều gì làm playground SwiftUI này hữu ích

Xem trước trực tiếp trên iPhone: màn hình hiển thị đúng cỡ iPhone trong khung thiết bị, có thanh trạng thái và Dynamic Island, nên bố cục trông giống hệt trên điện thoại.
Chạm vào ứng dụng. Nút, công tắc, stepper và ô nhập chữ đều phản hồi, và khung xem trước phát lại các lần chạm trên trạng thái mới, nên @State và @Binding hoạt động như trong ứng dụng thật.
Tự động xem trước: màn hình build lại ngay khi bạn ngừng gõ, còn nút làm mới khởi động lại ứng dụng từ đầu. Lỗi biên dịch chỉ đúng dòng trong tệp của bạn.
Gợi ý code SwiftUI trong trình soạn thảo: modifier sau dấu chấm, các giá trị một đối số nhận (.font(., .foregroundStyle(.), property wrapper sau @ và tên SF Symbol.
Lưu ảnh chụp màn hình điện thoại dưới dạng PNG, và tải ContentView.swift về để mở bằng Xcode sau. Tệp dán từ Xcode cũng build được: các khối #Preview được bỏ qua.

Bạn có thể làm gì trong playground SwiftUI

Danh sách việc cần làm với List, ForEach($items) và một Toggle cho mỗi hàng, cùng một TextField và nút thêm hàng mới.
Màn hình cài đặt: một Form có nhiều phần, một Picker, một Stepper và một Slider, tất cả gắn với @State.
Điều hướng: một NavigationStack có tiêu đề và các hàng NavigationLink mở ra màn hình chi tiết.
Thử nghiệm bố cục: VStack, HStack và ZStack với .padding, .frame, .background và các hình bo góc, để xem modifier chồng lên nhau thế nào.

Câu hỏi thường gặp về SwiftUI playground online

Tôi có chạy được SwiftUI mà không cần Mac không?

Được. Playground này chạy trên mọi trình duyệt hiện đại, trên Windows, Linux, Chromebook hay iPad. Code được biên dịch trên máy chủ của Coddy và màn hình được vẽ ngay trong trang, nên bạn không cần Xcode, Mac hay trình giả lập iOS để thử SwiftUI.

SwiftUI playground online có miễn phí không?

Có. Hoàn toàn miễn phí, không cần đăng ký: mở trang, sửa code và xem điện thoại thay đổi.

Đây có phải SwiftUI của Apple không?

Không. Đây là bản cài đặt riêng của Coddy cho các view, modifier và property wrapper của SwiftUI, biên dịch bằng swiftc và vẽ thành màn hình iPhone. Code SwiftUI thường ngày chạy được mà không cần sửa, và khung xem trước chính là khung mà các bài học SwiftUI của Coddy dùng để chạy và chấm bài. Các framework chỉ có trên Apple như UIKit, MapKit và Core Data không dùng được, còn animation chỉ hiện trạng thái cuối.

Tôi có dùng được @Observable hay #Preview không?

Dùng ObservableObject cùng @Published và @StateObject cho dữ liệu dùng chung. Macro @Observable và #Preview cần plugin macro của Xcode; các khối #Preview được bỏ qua, nên tệp dán từ Xcode vẫn build được, và ứng dụng hiển thị ContentView. Bạn cũng có thể tự thêm struct App có @main.

Thử playground xong thì học SwiftUI tiếp như thế nào?

Sửa ứng dụng mẫu và chạm thử trong khung xem trước. Khi muốn học theo lộ trình, khóa học SwiftUI của Coddy dạy view, modifier, stack, @State, danh sách, điều hướng, @Binding và dữ liệu observable qua các bài học ngắn, mỗi bài đều có cùng khung xem trước iPhone trực tiếp.

Công cụ hữu ích cho SwiftUI

Các công cụ miễn phí chạy trên trình duyệt, dùng tốt cùng Playground SwiftUI, tất cả đều thuộc Coddy.

Nhúng trình soạn thảo SwiftUI So sánh các nền tảng học lập trình