SwiftUI Academy · درس

معدّلات View المخصصة

اجمع سلاسل المعدّلات في معدّل واحد

معدّلات View المخصصة درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في SwiftUI Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Modifiers You Apply Often

You keep chaining the same padding, background, and corner radius. A custom ViewModifier bundles that chain into one reusable step. ✨

The ViewModifier Protocol

A custom modifier is a struct conforming to ViewModifier. Its body wraps the incoming content with whatever styling you want.

struct CardStyle: ViewModifier {
    func body(content: Content) -> some View {
        content.padding()
    }
}

The content Parameter

Inside body you receive the original view as content. You return a new view that decorates it, never replacing what it shows.

Apply with .modifier

Attach your modifier to any view with the .modifier method. The same look now applies in a single, readable call.

Text("Hi").modifier(CardStyle())

Wrap It in an Extension

Calling .modifier(CardStyle()) is clunky. Add a View extension so the styling reads like a built-in modifier.

extension View {
    func cardStyle() -> some View {
        modifier(CardStyle())
    }
}

Now It Reads Cleanly

With the extension, usage feels native. One method name carries the whole styling chain.

Text("Hi").cardStyle()

Add Parameters

Give the modifier stored properties so callers can tune it. Pass them through your extension method too.

struct CardStyle: ViewModifier {
    var color: Color
    func body(content: Content) -> some View {
        content.background(color)
    }
}

Combine Many Modifiers

A custom modifier can chain several built-in ones. You capture a whole design recipe behind a single name.

content.padding().background(.gray).cornerRadius(12)

Consistency Across the App

When every card uses the same modifier, your UI stays consistent. Update the modifier once and the whole app follows.

Modifier vs Extracted View

Use a modifier to restyle any content; use an extracted view for a fixed layout. Modifiers decorate, views define structure.

Order Still Matters

Inside body, modifier order works as usual. Background before padding differs from padding before background, so arrange carefully.

Quick Check

Quick check on custom modifiers.

Recap: Bundle Your Style

A ViewModifier packs a styling chain into one reusable step, and a View extension gives it clean dot syntax. Style once, apply anywhere. 🧠

الأسئلة الشائعة

هل درس «معدّلات View المخصصة» مجاني؟

نعم — نص درس «معدّلات View المخصصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

ماذا ستتعلم في «معدّلات View المخصصة»؟

اجمع سلاسل المعدّلات في معدّل واحد تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟

لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «معدّلات View المخصصة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟

نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

استخراج الواجهات القابلة لإعادة الاستخدام
معدّلات View المخصصة
‏ButtonStyle وLabelStyle
‏ViewBuilder والحاويات العامة

← العودة إلى SwiftUI Academy