✏️ تعديل: Text
تعديل محتوى الموضوع
→ رجوع للموضوع
عنوان الموضوع
التصنيف
التاقات (مفصولة بفاصلة)
ملاحظة التعديل (اختياري)
المحتوى
# الـ 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() ``` ``` ↕️ padding ←→ Hello ←→ ↕️ padding ``` --- ## الفرق: ### padding = من برا 📦 ``` ┌─────────────────┐ │ │ ← 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) // أقصى سطر واحد بس ``` ``` // النتيجة: 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) // لتحت ⬇️ ``` --- ## توضيح: ``` بدون 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) // مسافة أصغر ``` --- ## توضيح: ``` بدون 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` بيضيف مسافة **بين كل حرفين** بس مش بعد الحرف الأخير ``` H e l l o| ↑ مفيش مسافة بعد الـ o ``` --- ### `.tracking` بيضيف مسافة **بعد كل حرف** حتى الأخير ``` 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: ``` 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** ✂️ ``` 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%** من الحجم | --- ## توضيح: ``` 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 - بدونه = النص **يصغر ويلف** على أسطر كتير ✅ --- > أنا غلطت، شكراً إنك نبّهتني! 🎯
👁️ معاينة فورية
💡 كل بلوك قابل للسحب والترتيب. يدعم
Markdown
:
## عنوان
·
**bold**
·
- قائمة
·
```dart code```
·
[[اسم الموضوع]]
💾 حفظ التعديلات