ViewBuilder และคอนเทนเนอร์แบบทั่วไป
รับเนื้อหาใด ๆ ด้วย @ViewBuilder
ViewBuilder และคอนเทนเนอร์แบบทั่วไป เป็นบทเรียน SwiftUI Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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. 🧠
เรียนรู้ Swift ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “ViewBuilder และคอนเทนเนอร์แบบทั่วไป” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ViewBuilder และคอนเทนเนอร์แบบทั่วไป” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส SwiftUI Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ViewBuilder และคอนเทนเนอร์แบบทั่วไป”
รับเนื้อหาใด ๆ ด้วย @ViewBuilder คุณปฏิบัติ SwiftUI Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน SwiftUI Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน SwiftUI Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ViewBuilder และคอนเทนเนอร์แบบทั่วไป” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน SwiftUI Academy นี้ได้ไหม
ได้ บทเรียน SwiftUI Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แยกมุมมองที่นำกลับมาใช้ใหม่ได้
- ViewModifiers แบบกำหนดเอง
- ButtonStyle และ LabelStyle
- ViewBuilder และคอนเทนเนอร์แบบทั่วไป