การกำหนดขนาด View ด้วย frame
กำหนดข้อจำกัดด้านความกว้าง ความสูง และค่าต่ำสุด/สูงสุด
การกำหนดขนาด View ด้วย frame เป็นบทเรียน SwiftUI Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน SwiftUI Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
Views Size Themselves
By default a SwiftUI view is exactly as big as its content needs. When you want a specific size, you reach for the frame modifier to ask for one.
A Fixed Width and Height
The frame modifier lets you request an exact size. Here the text is placed inside a box that is 200 points wide and 80 points tall.
Text("Card")
.frame(width: 200, height: 80)Width Only
You do not have to set both dimensions. Give only a width and the height stays natural, sized to fit the content as usual.
Text("Wide")
.frame(width: 250)Filling Available Space
Set maxWidth to infinity to let a view stretch across all the space its parent offers. This is great for full-width buttons and rows.
Text("Stretch")
.frame(maxWidth: .infinity)Aligning Inside the Frame
A roomy frame centers its content by default. The alignment argument moves that content, like pinning text to the leading edge.
Text("Left")
.frame(maxWidth: .infinity, alignment: .leading)Minimum Sizes
Use minWidth or minHeight to guarantee a view never shrinks below a floor, even when content is tiny. Handy for consistent tap targets.
Text("OK")
.frame(minWidth: 120)Maximum Sizes
The maxWidth and maxHeight values cap how large a flexible view can grow, so it stretches only up to a limit you choose.
Text("Capped")
.frame(maxWidth: 400)Combining Min and Max
Mix minWidth and maxWidth for a flexible range. The view grows with its parent but stays between a comfortable lower and upper bound.
Text("Flexible")
.frame(minWidth: 100, maxWidth: 300)Frame and Background Together
A frame defines the area a background fills. Set a frame, then add a color, and the whole sized region is painted, not just the text.
Text("Tile")
.frame(width: 120, height: 120)
.background(.mint)Frame Wraps, It Does Not Clip
A frame proposes a size but never trims content by itself. If content is larger than the frame, it can spill out unless you also clip it.
Frame Plus Padding
Combine the two tools for polished layouts: a frame sets the overall size and padding adds the inner breathing room around the content.
Text("Spaced")
.padding()
.frame(maxWidth: .infinity)Quick Check
Check your understanding of the frame modifier.
Recap
Great progress! You can now use frame to set exact sizes, flexible ranges, fill space with infinity, and align content inside the area.
เรียนรู้ Swift ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “การกำหนดขนาด View ด้วย frame” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การกำหนดขนาด View ด้วย frame” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส SwiftUI Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดขนาด View ด้วย frame”
กำหนดข้อจำกัดด้านความกว้าง ความสูง และค่าต่ำสุด/สูงสุด คุณปฏิบัติ SwiftUI Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน SwiftUI Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน SwiftUI Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การกำหนดขนาด View ด้วย frame” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน SwiftUI Academy นี้ได้ไหม
ได้ บทเรียน SwiftUI Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเพิ่มระยะขอบรอบ View
- การกำหนดขนาด View ด้วย frame
- พื้นหลังและรัศมีมุม
- Spacer และลำดับความสำคัญของเค้าโครง