ساحة SwiftUI

اكتب الأكواد البرمجية، شغّلها وشاركها - بدون أي إعداد.

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

ساحة SwiftUI مجانية على الإنترنت. اكتب ContentView فتظهر واجهاتك على شاشة بحجم iPhone بجانب الكود. تستجيب الأزرار والمفاتيح وحقول النص للمس، فتظهر تغييرات @State كما تظهر على الجهاز. لا حاجة إلى Mac ولا Xcode ولا إلى تنزيل محاكٍ.

يُترجم كودك باستخدام swiftc مقابل تنفيذ Coddy الخاص لـ SwiftUI، وهو نفسه الذي يشغّل المعاينة الحية في دروس SwiftUI على Coddy. يغطي الواجهة البرمجية اليومية: الـ stacks وText وImage(systemName:) وButton وToggle وTextField وSlider وStepper وPicker وList وForEach وForm وNavigationStack والنوافذ المنبثقة والتنبيهات، مع @State و@Binding وObservableObject و@Published. إنه ليس إطار عمل Apple نفسه، لذلك لا تتوفر أطر العمل الخاصة بـ Apple مثل UIKit وMapKit وCore Data.

ما الذي يجعل ساحة SwiftUI هذه مفيدة

معاينة iPhone حية: تُرسم الشاشة بحجم iPhone داخل إطار جهاز، مع شريط الحالة وDynamic Island، فيبدو التصميم كما سيبدو على الهاتف.
المس التطبيق. تستجيب الأزرار والمفاتيح وعناصر Stepper وحقول النص، وتعيد المعاينة تشغيل لمساتك على حالة جديدة، فيتصرف @State و@Binding كما في تطبيق حقيقي.
معاينة تلقائية: تُعاد بناء الشاشة بعد لحظة من توقفك عن الكتابة، وزر التحديث يعيد تشغيل التطبيق من البداية. وتشير أخطاء المترجم إلى السطر في ملفك.
اقتراحات كود SwiftUI في المحرر: المُعدِّلات بعد النقطة، والقيم التي يقبلها الوسيط (.font(. و.foregroundStyle(.)، وproperty wrappers بعد @، وأسماء SF Symbols.
احفظ لقطة شاشة للهاتف بصيغة PNG، ونزّل ملف ContentView.swift لتفتحه لاحقًا في Xcode. الملفات الملصقة من Xcode تُبنى أيضًا: تُتجاهل كتل #Preview.

ما يمكنك بناؤه في ساحة SwiftUI

قائمة مهام باستخدام List وForEach($items) وToggle في كل صف، مع TextField وزر يضيف صفوفًا جديدة.
شاشة إعدادات: Form مقسّم إلى أقسام فيه Picker وStepper وSlider، وكلها مرتبطة بـ @State.
التنقل: NavigationStack بعنوان وصفوف NavigationLink تفتح شاشة التفاصيل.
تجارب التخطيط: VStack وHStack وZStack مع .padding و.frame و.background وأشكال مستديرة، لترى كيف تتراكب المُعدِّلات.

الأسئلة الشائعة حول ساحة SwiftUI اون لاين

هل يمكنني تشغيل SwiftUI بدون Mac؟

نعم. تعمل هذه الساحة في أي متصفح حديث، على Windows أو Linux أو Chromebook أو iPad. يُترجم كودك على خوادم Coddy وتُرسم الشاشة داخل الصفحة، لذلك لا تحتاج إلى Xcode ولا إلى Mac ولا إلى محاكي iOS لتجربة SwiftUI.

هل ساحة SwiftUI اون لاين مجانية؟

نعم. إنها مجانية ولا تحتاج إلى تسجيل: افتح الصفحة وعدّل الكود وشاهد الهاتف.

هل هذا هو SwiftUI من Apple؟

لا. إنه تنفيذ Coddy الخاص لواجهات SwiftUI ومُعدِّلاته وproperty wrappers، يُترجم باستخدام swiftc ويُرسم كشاشة iPhone. يعمل كود SwiftUI اليومي دون تغيير، والمعاينة هي نفسها التي تستخدمها دروس SwiftUI على Coddy ويُصحَّح بها. لا تتوفر أطر العمل الخاصة بـ Apple مثل UIKit وMapKit وCore Data، وتظهر الحركات في حالتها النهائية.

هل يمكنني استخدام @Observable أو #Preview؟

استخدم ObservableObject مع @Published و@StateObject للبيانات المشتركة. يحتاج الماكرو @Observable و#Preview إلى إضافات الماكرو في Xcode؛ تُتجاهل كتل #Preview، لذلك يُبنى الملف الملصق من Xcode رغم ذلك ويعرض التطبيق ContentView. ويمكنك أيضًا إضافة بنية App خاصة بك مع @main.

كيف أتعلم SwiftUI بعد تجربة الساحة؟

غيّر التطبيق التجريبي وتنقّل فيه باللمس في المعاينة. وعندما تريد مسارًا منظمًا، تعلّمك دورة SwiftUI على Coddy الواجهات والمُعدِّلات والـ stacks و@State والقوائم والتنقل و@Binding والبيانات القابلة للمراقبة في دروس قصيرة، وفي كل درس المعاينة الحية نفسها على iPhone.

أدوات مفيدة لـ SwiftUI

أدوات مجانية تعمل في المتصفح تتكامل بشكل رائع مع ملعب SwiftUI البرمجي - جميعها جزء من Coddy.

ضمّن محرر SwiftUI قارن منصات البرمجة