✏️ تعديل: تقسيمة الفايلات
تعديل محتوى الموضوع
→ رجوع للموضوع
عنوان الموضوع
التصنيف
التاقات (مفصولة بفاصلة)
ملاحظة التعديل (اختياري)
المحتوى
xcodeproj بعدين بيكون في فولدر باسم البروجيكت فيه بعض الفايلات فايل فيه اسم البروجيكت + كلمة app بيكون فيه ```swift import SwiftUI @main struct firstswiftuiApp: App { var body: some Scene { WindowGroup { ContentView() } } } ``` دي ال entry point # نعم! ✅ صح تماماً --- ## هيكل المشروع: ``` firstswiftui.xcodeproj ← ملف المشروع الرئيسي 📂 firstswiftui/ ├── firstswiftuiApp.swift ← Entry Point 🚀 ├── ContentView.swift ← الشاشة الرئيسية └── Assets ``` --- ## شرح الـ Entry Point: ### `@main` - بيقول لـ Swift **"ابدأ من هنا"** - في المشروع كله مفيش غيره --- ### `struct firstswiftuiApp: App` - الـ struct الرئيسي للتطبيق - بيورث من **`App`** مش من `View` --- ### `var body: some Scene` - مش `View` هنا، ده **`Scene`** - لأن التطبيق كله هو Scene، والشاشات هي Views # الفرق بين App, Scene, و View 🎯 --- ## تخيل الموضوع زي مسرح 🎭 ``` 🏛️ App = المسرح كله 🎬 Scene = الخشبة (منطقة العرض) 🎭 View = الممثلين والديكور ``` --- ## بالتفصيل: ### 🏛️ App - التطبيق **بالكامل** - بيشتغل من أول ما تفتح للتطبيق لحد ما تقفله --- ### 🎬 Scene - **النافذة** اللي بيظهر فيها المحتوى - على **iPhone** = نافذة واحدة بس - على **iPad/Mac** = ممكن تفتح **أكتر من نافذة** في نفس الوقت ``` iPad مثلاً: ┌──────────┐ ┌──────────┐ │ Scene 1 │ │ Scene 2 │ │ (نافذة) │ │ (نافذة) │ └──────────┘ └──────────┘ ``` --- ### 🎭 View - المحتوى **داخل** النافذة - الأزرار، النصوص، الصور... - بتتغير وبتتبدل جوه الـ Scene --- ## عملياً في الكود: ```swift // App = المسرح كله struct firstswiftuiApp: App { // Scene = الخشبة (النافذة) var body: some Scene { WindowGroup { // View = الممثلين (المحتوى) ContentView() } } } ``` --- ## ببساطة شديدة: ``` App 🏛️ = التطبيق Scene 🎬 = النافذة View 🎭 = المحتوى جوه النافذة ``` > الـ Scene هي **الوسيط** بين التطبيق والشاشات 🎯 --- ### `WindowGroup` - بيقول **"افتح نافذة"** - على iPhone = شاشة واحدة - على iPad/Mac = ممكن نوافذ متعددة --- ### `ContentView()` - ده اللي بيقول **"أول شاشة تظهر هي ContentView"** - لو عايز تغير الشاشة الأولى، بتغيرها هنا --- ## ببساطة رحلة التطبيق: ``` @main ↓ firstswiftuiApp ← "ابدأ هنا" ↓ WindowGroup ← "افتح نافذة" ↓ ContentView() ← "أول شاشة" ``` > ده أول كود بيشتغل في أي تطبيق SwiftUI 🎯 ```swift import SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundStyle(.tint) Text("Hello, world!") } .padding() } } #Preview { ContentView() } ``` # شرح الكود بالتفصيل 🎯 --- ## 1️⃣ `import SwiftUI` ```swift import SwiftUI ``` استيراد مكتبة Apple لبناء الواجهات، **لازم تكون في أول كل ملف**. --- ## 2️⃣ `struct ContentView: View` ```swift struct ContentView: View { ``` - **struct** = تعريف نوع جديد - **ContentView** = اسم الشاشة - **: View** = هذا الـ struct هو شاشة قابلة للعرض --- ## 3️⃣ `var body: some View` ```swift var body: some View { ``` - **var** = متغير - **body** = المحتوى البصري للشاشة - **some View** = بيرجع View ما مش محدد النوع --- ## 4️⃣ `VStack` ```swift VStack { ``` يرتب العناصر **عمودياً** فوق بعض ⬇️ ``` ┌─────────┐ │ 🌐 │ ← Image │Hello! │ ← Text └─────────┘ ``` --- ## 5️⃣ الـ Image ```swift Image(systemName: "globe") .imageScale(.large) .foregroundStyle(.tint) ``` | السطر | المعنى | |-------|---------| | `Image(systemName:)` | أيقونة من مكتبة Apple | | `.imageScale(.large)` | حجم كبير | | `.foregroundStyle(.tint)` | لون أزرق تلقائي | --- ## 6️⃣ الـ Text ```swift Text("Hello, world!") ``` عرض نص على الشاشة. --- ## 7️⃣ الـ `.padding()` ```swift .padding() ``` مسافة حول الـ VStack من كل الجهات. --- ## 8️⃣ الـ `#Preview` ```swift #Preview { ContentView() } ``` معاينة حية داخل Xcode فقط، **مش بيظهر للمستخدم**. --- ## الصورة الكاملة: ``` import → استيراد المكتبة struct → تعريف الشاشة body → محتوى الشاشة VStack → ترتيب عمودي Image + Text → العناصر padding → مسافات #Preview → معاينة Xcode ``` # VStack اختصار لـ 📐 ## **Vertical Stack** --- | الكلمة | المعنى | |--------|---------| | **V** | Vertical = عمودي | | **Stack** | تكديس = عناصر فوق بعض | --- ## وفيه كمان: | الاسم | الاختصار | الاتجاه | |-------|----------|---------| | **VStack** | Vertical Stack | ⬇️ عمودي | | **HStack** | Horizontal Stack | ➡️ أفقي | | **ZStack** | Z-axis Stack | 📚 فوق بعض (طبقات) | --- ## مثال بسيط: ```swift // VStack ⬇️ VStack { Text("فوق") Text("تحت") } // HStack ➡️ HStack { Text("يسار") Text("يمين") } // ZStack 📚 ZStack { Text("الخلفية") Text("قدام") // فوق الأول } ``` > ببساطة: **V = Vertical = عمودي** 🎯
👁️ معاينة فورية
💡 كل بلوك قابل للسحب والترتيب. يدعم
Markdown
:
## عنوان
·
**bold**
·
- قائمة
·
```dart code```
·
[[اسم الموضوع]]
💾 حفظ التعديلات