التدرجات الخطية والشعاعية والزاوية
املأ View بانتقالات لونية سلسة
التدرجات الخطية والشعاعية والزاوية درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في SwiftUI Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
What Is a Gradient?
A gradient blends smoothly between two or more colors. It adds depth and polish that a flat fill cannot. 🌈
Gradients Are Views Too
Just like Color, a LinearGradient is a view. You can place it directly or use it to fill a shape or background.
Your First LinearGradient
A LinearGradient flows colors along a straight line. Give it colors plus a start and end point to set the direction.
LinearGradient(
colors: [.blue, .purple],
startPoint: .top,
endPoint: .bottom
)Choosing Start & End Points
Points like .topLeading and .bottomTrailing aim the gradient diagonally. Swap them to change the angle of the blend.
startPoint: .topLeading
endPoint: .bottomTrailingMore Than Two Colors
Pass several colors and the gradient spreads them evenly across its length. Great for sunset-style backgrounds.
LinearGradient(
colors: [.orange, .pink, .purple],
startPoint: .leading,
endPoint: .trailing
)RadialGradient Glows Outward
A RadialGradient radiates from a center point outward in a circle. It is perfect for spotlights and soft glows.
RadialGradient(
colors: [.yellow, .red],
center: .center,
startRadius: 5,
endRadius: 120
)Tuning the Radius
The startRadius and endRadius control how tight or wide the glow spreads. Bigger gaps mean smoother, slower fades.
AngularGradient Sweeps Around
An AngularGradient wraps colors around a center, like a color wheel. It creates a cool conical, swirling effect.
AngularGradient(
colors: [.red, .green, .blue, .red],
center: .center
)Gradient as a Background
Attach a gradient with the background modifier to brighten any view behind your content. Instant visual lift.
Text("Hi")
.padding()
.background(LinearGradient(
colors: [.blue, .cyan],
startPoint: .top, endPoint: .bottom))Shorthand Gradients
For a quick blend, call .gradient on any color. SwiftUI builds a subtle top-to-bottom gradient for you instantly.
Circle()
.fill(Color.blue.gradient)Pick the Right Gradient
Use linear for directional fades, radial for glows, and angular for wheels. Each gives a different mood to your UI. 🎨
Quick Check
Which gradient sweeps its colors around a center point?
Recap: Gradients
You now blend colors three ways: linear along a line, radial from a center, and angular around a wheel. Beautiful work!
الأسئلة الشائعة
هل درس «التدرجات الخطية والشعاعية والزاوية» مجاني؟
نعم — نص درس «التدرجات الخطية والشعاعية والزاوية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.
ماذا ستتعلم في «التدرجات الخطية والشعاعية والزاوية»؟
املأ View بانتقالات لونية سلسة تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟
لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «التدرجات الخطية والشعاعية والزاوية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟
نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- نوع Color وألوان الأصول
- التدرجات الخطية والشعاعية والزاوية
- الأشكال المضمّنة
- Stroke وFill وoverlay