الأشكال المضمّنة
ارسم Rectangle وCircle وCapsule وRoundedRectangle
الأشكال المضمّنة درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في SwiftUI Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Shapes Are Views
SwiftUI gives you ready-made shapes you can drop in like any view. They draw themselves and fill the space you give them. 🔷
The Rectangle
A Rectangle is the simplest shape: a plain box. It expands to fill whatever frame or container holds it.
Rectangle()
.fill(.blue)
.frame(width: 120, height: 60)The Circle
A Circle always draws a perfect round shape inside its frame. Give it a square frame for a clean, even circle.
Circle()
.fill(.green)
.frame(width: 80, height: 80)The Capsule
A Capsule is a pill shape with fully rounded ends. It is the go-to look for tags, chips, and buttons.
Capsule()
.fill(.orange)
.frame(width: 120, height: 44)RoundedRectangle
A RoundedRectangle is a box with softened corners. Set its corner radius to control how round those corners look.
RoundedRectangle(cornerRadius: 16)
.fill(.purple)Filling a Shape
Use fill to paint a shape with a solid color or even a gradient. Without a fill, a shape draws in the default style.
Circle()
.fill(Color.pink.gradient)Sizing with frame
Shapes have no natural size, so wrap them in a frame to set width and height. The shape grows to fit it.
Rectangle()
.frame(width: 100, height: 100)Ellipse for Ovals
An Ellipse stretches a circle to match its frame. In a wide frame it becomes a smooth oval rather than a round circle.
Ellipse()
.fill(.teal)
.frame(width: 140, height: 70)Shapes as Backgrounds
Place a shape behind content with the background modifier to build cards and badges. Content sits neatly on top.
Text("New")
.padding(8)
.background(Capsule().fill(.red))Clipping to a Shape
Use clipShape to crop an image or view into a shape. A square photo becomes a perfect round avatar.
Image("avatar")
.clipShape(Circle())Shapes Build UI
Combined with fills and frames, these shapes become buttons, cards, badges, and avatars. They are your visual toolkit. ✨
Quick Check
You want a pill-shaped tag with fully rounded ends. Which shape fits best?
Recap: Built-in Shapes
You can now draw Rectangle, Circle, Capsule, RoundedRectangle, and Ellipse, then fill and size them. Great progress!
الأسئلة الشائعة
هل درس «الأشكال المضمّنة» مجاني؟
نعم — نص درس «الأشكال المضمّنة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.
ماذا ستتعلم في «الأشكال المضمّنة»؟
ارسم Rectangle وCircle وCapsule وRoundedRectangle تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟
لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «الأشكال المضمّنة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟
نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.