Circle

آخر تحديث: منذ 0 ثانية · 12 مشاهدة
📜 الإصدارات 📥 تصدير ✏️ تعديل

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:

code
        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()
    }

النتيجة:

code
      ╭─────╮
     /   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:

code
.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:

code
0                    1
|____________________|
start               end

0.25        =    ربع    25%
0.5         =    نص     50%
0.75        =    ثلاثة أرباع 75%
1           =    كامل   100%

.trim أقوى مع Animation عشان تعمل Loading أو Progress indicators 🎯