SwiftUI Academy · درس

‏ViewBuilder والحاويات العامة

اقبل محتوى عشوائيًا باستخدام @ViewBuilder

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

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

Containers That Hold Anything

VStack and List accept whatever views you nest inside them. You can build your own container that holds arbitrary content too. 📦

What @ViewBuilder Does

The @ViewBuilder attribute lets a closure list several views without commas or arrays. It is the magic behind stacks.

VStack {
    Text("One")
    Text("Two")
}

Accept content as a Closure

Make your container take a content closure marked @ViewBuilder. Callers then pass views just like they do for VStack.

struct Card<Content: View>: View {
    @ViewBuilder var content: Content
}

Generic over Content

The container is generic over its content type. That single struct can wrap a Text, an image, or a whole layout.

Render the Content

In your body, place the stored content inside whatever wrapper you want, like padding and a background.

var body: some View {
    content.padding().background(.gray)
}

Use Your Container

Call it with a trailing closure and nest any views inside. Your custom wrapper now feels just like a built-in one.

Card {
    Text("Title")
    Text("Body")
}

Builder on Functions Too

Mark a helper function with @ViewBuilder to return different views from branches without wrapping them in a type.

@ViewBuilder
func footer(show: Bool) -> some View {
    if show { Text("More") } else { EmptyView() }
}

Conditionals in Builders

Inside a builder you can use if and switch freely. SwiftUI assembles the chosen branch into the final view tree.

Multiple Content Slots

A container can take more than one builder, like a header and a footer. Each slot is its own @ViewBuilder closure.

struct Panel<H: View, B: View>: View {
    @ViewBuilder var header: H
    @ViewBuilder var body2: B
}

Reusable Layout Shells

Generic containers capture a layout shell once, like a bordered card, and let every screen fill it with unique content.

Type-Safe and Flexible

Because content is generic, the compiler still checks every view. You get flexibility without losing type safety.

Quick Check

Quick check on generic containers.

Recap: Build Flexible Containers

Combine @ViewBuilder with a generic content type to make containers that wrap any views. Reusable shells, full type safety. 🧠

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

هل درس «‏ViewBuilder والحاويات العامة» مجاني؟

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

ماذا ستتعلم في «‏ViewBuilder والحاويات العامة»؟

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

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

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

كم من الوقت يستغرق درس «‏ViewBuilder والحاويات العامة»؟

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

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

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

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

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

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