الـ Text في SwiftUI 📝

الأساسي:

swift

Text("Hello, world!")

التعديلات (Modifiers):

🔤 الخط:

swift

Text("Hello")
    .font(.title)        // حجم العنوان
    .font(.headline)     // عنوان فرعي
    .font(.body)         // النص العادي
    .font(.caption)      // نص صغير

🎨 اللون:

swift

Text("Hello")
    .foregroundStyle(.red)    // أحمر
    .foregroundStyle(.blue)   // أزرق
    .foregroundStyle(.green)  // أخضر

✏️ الستايل:

swift

Text("Hello")
    .bold()          // عريض
    .italic()        // مائل
    .underline()     // تحته خط
    .strikethrough() // عليه خط

📐 المحاذاة:

swift

Text("Hello")
    .multilineTextAlignment(.center)  // وسط
    .multilineTextAlignment(.leading) // يسار
    .multilineTextAlignment(.trailing)// يمين

📏 الحجم:

swift

Text("Hello")
    .frame(width: 200, height: 50) // عرض وارتفاع
    .padding()                      // مسافة
    .padding(.top, 20)             // مسافة فوق بس

لأ! ❌

`.padding()` بيحط المسافة من برا العنصر

swift

Text("Hello")
    .padding()

code

        ↕️ padding
   ←→ Hello ←→
        ↕️ padding

الفرق:

padding = من برا 📦

code

┌─────────────────┐
│                 │  ← padding
│   ┌─────────┐   │
│   │  Hello  │   │
│   └─────────┘   │
│                 │  ← padding
└─────────────────┘

اللي بيحط المسافة من جوا = `.frame` 📐

swift

Text("Hello")
    .frame(width: 200, height: 100)

ببساطة:

	المسافة
`.padding()`	من برا العنصر
`.frame()`	بيحدد الحجم من جوا

الـ padding زي الهامش حوالين العنصر من برا 🎯

🔢 عدد الأسطر:

swift

Text("Hello")
    .lineLimit(1)  // سطر واحد بس
    .lineLimit(3)  // 3 أسطر بس
    .lineLimit(nil)// بلا حد

`.lineLimit` 📏

هو الحد الأقصى فقط ✅

يعني:

swift

Text("Hello, World, this is a very long text!")
    .lineLimit(1) // أقصى سطر واحد بس

code

// النتيجة:
Hello, World, this is a very...  ← Truncated بعد سطر واحد

أمثلة:

swift

.lineLimit(1)  // سطر واحد بس
.lineLimit(3)  // أقصى 3 أسطر
.lineLimit(nil) // بلا حد ✅ (افتراضي)

مفيش حد أدنى؟

لأ، النص بيأخذ بس ما يحتاجه

swift

// لو النص قصير
Text("Hi")
    .lineLimit(3) // مش هياخد 3 أسطر، هياخد سطر واحد بس

ببساطة: lineLimit = أقصى عدد أسطر مسموح بيه 🎯

مثال كامل:

swift

Text("Hello, world!")
    .font(.title)
    .bold()
    .foregroundStyle(.blue)
    .padding()

كل سطر بيبدأ بـ . اسمه Modifier 🎯

`.baselineOffset` 📐

إيه هو؟

بيحرك النص لفوق أو لتحت من خط الكتابة الأساسي.

الاستخدام:

swift

Text("Hello")
    .baselineOffset(10)  // لفوق ⬆️
    
Text("Hello")
    .baselineOffset(-10) // لتحت ⬇️

توضيح:

code

بدون baselineOffset:
___H_e_l_l_o___  ← خط الكتابة

baselineOffset(10):
   H e l l o
_______________  ← خط الكتابة

baselineOffset(-10):
_______________  ← خط الكتابة
   H e l l o

مثال عملي:

swift

HStack(alignment: .bottom) {
    Text("Hello")
    Text("world")
        .baselineOffset(10) // "world" أعلى من "Hello"
}

بيتستخدم إزاي في الحياة؟

الاستخدام	المثال
Superscript	X²
Subscript	H₂O
ضبط نصوص جنب بعض	كلمتين بمستويات مختلفة

ببساطة: بيرفع أو بينزل النص عن خط الكتابة 🎯

`.kerning` 📐

إيه هو?

بيتحكم في المسافة بين الحروف.

الاستخدام:

swift

Text("Hello")
    .kerning(5)   // مسافة أكبر ⬅️➡️

Text("Hello")
    .kerning(-2)  // مسافة أصغر

توضيح:

code

بدون kerning:
Hello

kerning(5):
H e l l o

kerning(-2):
Helo

مثال عملي:

swift

VStack {
    Text("Hello")
        .kerning(0)   // عادي
    
    Text("Hello")
        .kerning(5)   // واسع
    
    Text("Hello")
        .kerning(-2)  // ضيق
}

الفرق بين kerning و tracking:

	`.kerning`	`.tracking`
بيأثر على	المسافة بين كل حرفين	المسافة بعد كل حرف
الدقة	أدق	أبسط

الفرق بين `.kerning` و `.tracking` 🔍

تخيل الجملة دي: `Hello`

`.kerning`

بيضيف مسافة بين كل حرفين بس مش بعد الحرف الأخير

code

H  e  l  l  o|
         ↑
      مفيش مسافة بعد الـ o

`.tracking`

بيضيف مسافة بعد كل حرف حتى الأخير

code

H  e  l  l  o  |
               ↑
          في مسافة بعد الـ o

مثال عملي:

swift

// kerning
HStack {
    Text("Hello")
        .kerning(10)
    Text("World") // هيلتصق بالـ o
}
// H  e  l  l  oWorld

// tracking
HStack {
    Text("Hello")
        .tracking(10)
    Text("World") // هيبعد عن الـ o
}
// H  e  l  l  o  World

ببساطة:

	`.kerning`	`.tracking`
المسافة	بين الحروف	بعد كل حرف
الحرف الأخير	❌ مسافة بعده	✅ مسافة بعده
التأثير على الكلمة التالية	❌	✅

الفرق بيظهر وضوح لما يكون في كلمة تانية بعدها 🎯

ببساطة: بيتحكم في المسافات بين الحروف 🎯

`.frame` 📐

إيه هو?

بيتحكم في حجم ومكان العنصر.

الاستخدام الأساسي:

swift

Text("Hello")
    .frame(width: 200, height: 50)

كل الخيارات:

📏 الحجم:

swift

Text("Hello")
    .frame(width: 200)          // عرض بس
    .frame(height: 50)          // ارتفاع بس
    .frame(width: 200, height: 50) // الاتنين

📐 الحد الأقصى والأدنى:

swift

Text("Hello")
    .frame(minWidth: 100)    // أقل عرض
    .frame(maxWidth: 300)    // أكبر عرض
    .frame(minHeight: 50)    // أقل ارتفاع
    .frame(maxHeight: 200)   // أكبر ارتفاع

🔲 ملء الشاشة كلها:

swift

Text("Hello")
    .frame(maxWidth: .infinity)  // عرض كامل
    .frame(maxHeight: .infinity) // ارتفاع كامل

// الاتنين مع بعض
Text("Hello")
    .frame(maxWidth: .infinity, maxHeight: .infinity)

📍 المحاذاة:

swift

Text("Hello")
    .frame(width: 200, height: 100, alignment: .topLeading)  // فوق يسار
    .frame(width: 200, height: 100, alignment: .center)      // وسط
    .frame(width: 200, height: 100, alignment: .bottomTrailing) // تحت يمين

مثال عملي:

swift

Text("Hello")
    .frame(maxWidth: .infinity)
    .background(.blue)
    .foregroundStyle(.white)

النتيجة = نص على خلفية زرقاء بعرض الشاشة كلها

توضيح الـ alignment:

code

topLeading    top    topTrailing
    ┌─────────────────────┐
    │                     │
leading     center    trailing
    │                     │
    └─────────────────────┘
bottomLeading bottom bottomTrailing

ببساطة: بيتحكم في الحجم والمكان والمحاذاة 🎯

swift

Text("Hello, World, this is designed for beginners who want to learn SwiftUl, i hope it will be enjoyable for you.")
                .font(.system(size: 16, weight:.bold ,design:.default))
                .foregroundStyle(.blue)
                .frame(width: 200, height: 200, alignment: .center)
                .multilineTextAlignment(.center)
                .minimumScaleFactor(1)

شرح الكود ده 🎯

النص:

swift

Text("Hello, World, this is designed for beginners...")

مجرد نص طويل هيتعرض على الشاشة.

شرح كل Modifier:

1️⃣ `.font(.system(size: 16, weight: .bold, design: .default))`

swift

.font(.system(size: 16, weight: .bold, design: .default))

الجزء	المعنى
`size: 16`	حجم الخط 16
`weight: .bold`	عريض
`design: .default`	الخط الافتراضي

الـ design عنده خيارات:

.default = خط عادي
.rounded = خط مدور
.monospaced = كل الحروف نفس العرض
.serif = خط كلاسيكي

2️⃣ `.foregroundStyle(.blue)`

swift

.foregroundStyle(.blue)

لون النص أزرق.

3️⃣ `.frame(width: 200, height: 200, alignment: .center)`

swift

.frame(width: 200, height: 200, alignment: .center)

العرض = 200
الارتفاع = 200
المحاذاة = وسط

4️⃣ `.multilineTextAlignment(.center)`

swift

.multilineTextAlignment(.center)

النص الطويل كل أسطره في الوسط.

5️⃣ `.minimumScaleFactor(1)`

swift

.minimumScaleFactor(1)

⚠️ هنا في مشكلة!

القيمة	المعنى
`1`	مش هيصغر الخط خالص
`0.5`	يصغر لحد 50% من الحجم
`0.1`	يصغر لحد 10%

لو النص طويل ومش بيتناسب مع الـ frame:

1 = هيتقطع ❌
0.5 = هيصغر عشان يتناسب ✅

الحل الصح:

swift

Text("Hello, World...")
    .font(.system(size: 16, weight: .bold, design: .default))
    .foregroundStyle(.blue)
    .frame(width: 200, height: 200, alignment: .center)
    .multilineTextAlignment(.center)
    .minimumScaleFactor(0.5) // ✅ بدل 1

ببساطة: نص أزرق عريض في مربع 200x200 في الوسط 🎯

التصحيح ✅

بدل "هيتقطع" المصطلح الصح هو:

Truncated ✂️

code

Hello, World, this is designed for beg...

يعني النص بيتقطع وبيظهر ... في الآخر

وفيه كمان:

المصطلح	المعنى
Truncated	النص اتقطع وظهر `...`
Clipped	النص اتقطع من غير `...`
Wrapped	النص لف لسطر جديد
Scaled	النص اتصغر عشان يتناسب

فـ .minimumScaleFactor(1) = النص هيكون Truncated ❌

`.minimumScaleFactor` 📐

إيه هو?

بيحدد أقل حجم ممكن يصغر له النص عشان يتناسب مع المساحة.

الاستخدام:

swift

Text("Hello, World!")
    .minimumScaleFactor(0.5)

القيم:

القيمة	المعنى
`1`	مش هيصغر خالص = Truncated
`0.5`	يصغر لحد 50% من الحجم
`0.1`	يصغر لحد 10% من الحجم

توضيح:

code

font size = 16

minimumScaleFactor(1)
= مش هيصغر
= Hello, World, this is...  ← Truncated

minimumScaleFactor(0.5)
= يصغر لحد 8 (50% من 16)
= Hello, World, this is designed for beginners ✅

مثال عملي:

swift

Text("Hello, World, this is a very long text!")
    .font(.system(size: 16))
    .frame(width: 150)
    .minimumScaleFactor(0.5) // يصغر لحد size 8

صح! ✅ شكراً على التصحيح

التوضيح الصح:

minimumScaleFactor بيشتغل صح بدون lineLimit(1)

لأن:

swift

// لو حطيت lineLimit(1)
Text("Hello, World, this is a very long text!")
    .lineLimit(1)           // سطر واحد بس
    .minimumScaleFactor(0.5) // هيصغر بس لو فضل Truncated ❌

swift

// الصح بدون lineLimit
Text("Hello, World, this is a very long text!")
    .minimumScaleFactor(0.5) // هيصغر ويلف على أسطر ✅

ببساطة:

lineLimit(1) = يجبر النص على سطر واحد فبيتعمله Truncated
بدونه = النص يصغر ويلف على أسطر كتير ✅

أنا غلطت، شكراً إنك نبّهتني! 🎯

Text

الـ Text في SwiftUI 📝

الأساسي:

التعديلات (Modifiers):

🔤 الخط:

🎨 اللون:

✏️ الستايل:

📐 المحاذاة:

📏 الحجم:

لأ! ❌

.padding() بيحط المسافة من برا العنصر

الفرق:

padding = من برا 📦

اللي بيحط المسافة من جوا = .frame 📐

ببساطة:

🔢 عدد الأسطر:

.lineLimit 📏

هو الحد الأقصى فقط ✅

يعني:

أمثلة:

مفيش حد أدنى؟

مثال كامل:

.baselineOffset 📐

إيه هو؟

الاستخدام:

توضيح:

مثال عملي:

بيتستخدم إزاي في الحياة؟

.kerning 📐

إيه هو?

الاستخدام:

توضيح:

مثال عملي:

الفرق بين kerning و tracking:

الفرق بين .kerning و .tracking 🔍

تخيل الجملة دي: Hello

.kerning

.tracking

مثال عملي:

ببساطة:

.frame 📐

إيه هو?

الاستخدام الأساسي:

كل الخيارات:

📏 الحجم:

📐 الحد الأقصى والأدنى:

🔲 ملء الشاشة كلها:

📍 المحاذاة:

مثال عملي:

توضيح الـ alignment:

شرح الكود ده 🎯

النص:

شرح كل Modifier:

1️⃣ .font(.system(size: 16, weight: .bold, design: .default))

2️⃣ .foregroundStyle(.blue)

3️⃣ .frame(width: 200, height: 200, alignment: .center)

4️⃣ .multilineTextAlignment(.center)

5️⃣ .minimumScaleFactor(1)

الحل الصح:

التصحيح ✅

Truncated ✂️

وفيه كمان:

.minimumScaleFactor 📐

إيه هو?

الاستخدام:

القيم:

توضيح:

مثال عملي:

صح! ✅ شكراً على التصحيح

التوضيح الصح:

ببساطة:

`.padding()` بيحط المسافة من برا العنصر

اللي بيحط المسافة من جوا = `.frame` 📐

`.lineLimit` 📏

`.baselineOffset` 📐

`.kerning` 📐

الفرق بين `.kerning` و `.tracking` 🔍

تخيل الجملة دي: `Hello`

`.kerning`

`.tracking`

`.frame` 📐

1️⃣ `.font(.system(size: 16, weight: .bold, design: .default))`

2️⃣ `.foregroundStyle(.blue)`

3️⃣ `.frame(width: 200, height: 200, alignment: .center)`

4️⃣ `.multilineTextAlignment(.center)`

5️⃣ `.minimumScaleFactor(1)`

`.minimumScaleFactor` 📐