✏️ تعديل: Circle
تعديل محتوى الموضوع
→ رجوع للموضوع
عنوان الموضوع
التصنيف
التاقات (مفصولة بفاصلة)
ملاحظة التعديل (اختياري)
المحتوى
# Circle() في SwiftUI ⭕ --- ## الأساسي: ```swift Circle() ``` --- ## كل الـ Modifiers: ### 🎨 اللون: ```swift Circle() .fill(.blue) // لون جوا .stroke(.red) // حدود بس .stroke(.red, lineWidth: 5) // حدود بسماكة ``` ```swift Circle() .foregroundStyle(.blue) ``` ```swift Circle() .stroke(.red, style: StrokeStyle(lineWidth: 20, lineCap: .butt, dash: [5])) .frame(width: 200, height: 200) ``` ```swift Circle() .stroke(.red, style: StrokeStyle(lineWidth: 10, lineCap: .round, dash: [20])) .frame(width: 200, height: 200) ``` ```swift Circle() .stroke(.red, style: StrokeStyle(lineWidth: 10, lineCap: .square, dash: [20])) .frame(width: 200, height: 200) ``` --- ```swift Circle() .stroke(.red, style: StrokeStyle(lineWidth: 20, lineCap: .butt, dash: [10])) .fill(.red) .frame(width: 200, height: 200) .background { Text("loading...") .font(.headline) .foregroundColor(.black) } .overlay { Text("loading...") .font(.footnote) .foregroundColor(.green) .bold() } ``` # شرح `.overlay` و `.fill` 🎯 --- ## `.fill(.red)` بيملي **جوه** الشكل بلون ```swift Circle() .fill(.red) // الدايرة كلها حمرا من جوا ``` --- ## `.overlay` بيحط عنصر **فوق** الشكل ```swift Circle() .fill(.red) .overlay { Text("loading...") // فوق الدايرة } ``` --- ## الفرق بين `.overlay` و `.background`: ``` Text "loading..." (overlay) ← فوق ╭───────────╮ / 🔴 Circle \ ╰───────────╯ Text "loading..." (background) ← تحت ``` --- ## لو عملت `.hidden()`: ### على الـ overlay: ```swift Circle() .fill(.red) .overlay { Text("loading...") .hidden() // ✅ النص اختفى بس المساحة لسه موجودة } ``` ### على الـ Circle كله: ```swift Circle() .fill(.red) .hidden() // ❌ كل حاجة اختفت (Circle + overlay + background) // بس المساحة لسه موجودة! ``` --- ## ⚠️ مشكلة في الكود بتاعك: ```swift Circle() .stroke(...) // حدود .fill(.red) // ❌ لازم fill قبل stroke ``` ### الترتيب الصح: ```swift Circle() .fill(.red) // ✅ الأول .stroke(...) // ✅ التاني ``` # سؤال ممتاز! 🎯 ليه لازم يكون ال fill قبل ال strok مع انها اشتغلت عادي --- ## الحقيقة: في SwiftUI الجديد **(iOS 17+)** اشتغلت عادي ✅ --- ## السبب: Apple غيرت الـ behavior في الإصدارات الجديدة ```swift // الاتنين شغالين في iOS 17+ Circle() .stroke(.red, lineWidth: 5) .fill(.blue) Circle() .fill(.blue) .stroke(.red, lineWidth: 5) ``` --- ## بس في iOS القديم: ```swift // ❌ كان بيمسح الـ stroke Circle() .stroke(.red, lineWidth: 5) .fill(.blue) // كان بيغطي الـ stroke ``` --- ## الخلاصة: | الإصدار | الترتيب مهم؟ | |---------|-------------| | iOS 17+ | ❌ مش مهم | | iOS القديم | ✅ مهم | --- > أنا غلطت لما قلت لازم، في إصدارك **مش مهم الترتيب** بينهم 😄🎯 --- > `.hidden()` بتخفي العنصر بس **بتفضل المساحة موجودة** 🎯 ### 📏 الحجم: ```swift Circle() .frame(width: 100, height: 100) ``` --- ### 🖼️ الحدود: ```swift Circle() .strokeBorder(.blue, lineWidth: 10) // حدود من جوا .stroke(.blue, lineWidth: 10) // حدود من برا ``` --- ### 🌫️ الظل: ```swift Circle() .shadow(radius: 10) .shadow(color: .blue, radius: 10, x: 5, y: 5) ``` --- ### 🎭 الشفافية: ```swift Circle() .opacity(0.5) // 50% شفاف ``` --- ### 🔄 التدرج اللوني: ```swift Circle() .fill(LinearGradient( colors: [.blue, .red], startPoint: .top, endPoint: .bottom )) ``` --- ## مثال كامل: ```swift Circle() .fill(.blue) .frame(width: 100, height: 100) .shadow(color: .blue, radius: 10) .opacity(0.8) .overlay { Text("Hi") .foregroundStyle(.white) .bold() } ``` --- ## النتيجة: ``` ╭─────╮ / Hi \ │ 🔵 │ \ / ╰─────╯ (ظل ازرق تحته) ``` --- ### `.overlay` vs `.background`: ```swift Circle() .fill(.blue) .overlay { Text("فوق الدايرة") // ✅ } .background { Color.red // تحت الدايرة ✅ } ``` --- > ببساطة: Circle بتاخد نفس Modifiers أي Shape تاني 🎯 # `.trim` في SwiftUI ✂️ --- ## إيه هو? بيقطع جزء من الـ Shape ويعرض **جزء منها بس**. --- ## الأساسي: ```swift Circle() .trim(from: 0, to: 1) // الدايرة كاملة ``` --- ## القيم: ```swift // من 0 لـ 1 = الشكل كامل .trim(from: 0, to: 1) // من 0 لـ 0.5 = نص الشكل بس .trim(from: 0, to: 0.5) // من 0.25 لـ 0.75 = ربع لـ ثلاثة أرباع .trim(from: 0.25, to: 0.75) ``` --- ## توضيح على Circle: ``` .trim(from: 0, to: 1) ╭───╮ / \ │ │ // كاملة \ / ╰───╯ .trim(from: 0, to: 0.5) ╭───╮ / \ // نص بس .trim(from: 0, to: 0.25) ╭── // ربع بس ``` --- ## ⚠️ مهم جداً: لازم تستخدمه مع `.stroke` مش `.fill` ```swift // ✅ الصح Circle() .trim(from: 0, to: 0.7) .stroke(.blue, lineWidth: 10) // ❌ مش هيظهر صح Circle() .trim(from: 0, to: 0.7) .fill(.blue) ``` --- ## حالات الاستخدام: ### 1️⃣ Progress Circle: ```swift Circle() .trim(from: 0, to: 0.7) // 70% .stroke(.blue, lineWidth: 15) .frame(width: 100, height: 100) .rotationEffect(.degrees(-90)) // يبدأ من فوق ``` ### 2️⃣ نص دايرة: ```swift Circle() .trim(from: 0, to: 0.5) // نص دايرة بس .stroke(.red, lineWidth: 5) .frame(width: 200, height: 200) ``` ### 3️⃣ على Rectangle: ```swift Rectangle() .trim(from: 0, to: 0.5) .stroke(.green, lineWidth: 5) .frame(width: 200, height: 100) ``` ### 4️⃣ على Capsule: ```swift Capsule() .trim(from: 0, to: 0.7) .stroke(.orange, lineWidth: 8) .frame(width: 200, height: 60) ``` --- ## مع Animation: ```swift @State var progress: CGFloat = 0 Circle() .trim(from: 0, to: progress) .stroke(.blue, lineWidth: 10) .frame(width: 100, height: 100) .rotationEffect(.degrees(-90)) .onAppear { withAnimation(.easeInOut(duration: 1)) { progress = 0.8 // يتحرك لـ 80% } } ``` --- ## القيم من 0 لـ 1: ``` 0 1 |____________________| start end 0.25 = ربع 25% 0.5 = نص 50% 0.75 = ثلاثة أرباع 75% 1 = كامل 100% ``` --- > `.trim` أقوى مع **Animation** عشان تعمل Loading أو Progress indicators 🎯
👁️ معاينة فورية
💡 كل بلوك قابل للسحب والترتيب. يدعم
Markdown
:
## عنوان
·
**bold**
·
- قائمة
·
```dart code```
·
[[اسم الموضوع]]
💾 حفظ التعديلات