# تقسيمة الفايلات

---

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 = عمودي** 🎯