0Pricing
Swift Academy · บทเรียน

ตัวเว้นระยะ Padding และตัวปรับแต่ง Frame

ใช้ Spacer สำหรับช่องว่างที่ยืดหยุ่น และ frame เพื่อกำหนดขนาดอย่างชัดเจน

ตัวเว้นระยะ Padding และตัวปรับแต่ง Frame เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Swift Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

ยินดีต้อนรับ

`Spacer`, `.padding()` และ `.frame()` เป็นเครื่องมือหลักสำหรับควบคุมระยะห่างและขนาดใน SwiftUI มาทำความเข้าใจแต่ละเครื่องมือให้เชี่ยวชาญกัน

พื้นที่เว้นระยะ — พื้นที่ยืดหยุ่น

```swift HStack { Text("Left") Spacer() // fills all available space Text("Right") } ``` `Spacer` จะขยายเพื่อเติมพื้นที่ที่เหลือตามแนวแกนของสแตก

ความยาวขั้นต่ำ

```swift Spacer(minLength: 20) // at least 20pt even if compressed ```

ตัวปรับแต่งการเว้นระยะ

```swift Text("Hello") .padding() // default 16pt all sides .padding(.horizontal, 24) // custom horizontal .padding(.top, 8) // custom top only ```

การเว้นระยะด้วย EdgeInsets

```swift Text("Hi") .padding(EdgeInsets(top:10,leading:20,bottom:10,trailing:20)) ```

กรอบ — ขนาดที่ระบุชัดเจน

```swift Text("Button") .frame(width: 200, height: 44) .background(Color.blue) .foregroundColor(.white) ```

การกำหนดความกว้างสูงสุด

```swift Button("Full Width") {} .frame(maxWidth: .infinity) .padding() .background(Color.accentColor) ```

การจัดแนวภายในกรอบ

```swift Text("Left") .frame(width: 200, alignment: .leading) .border(Color.gray) // Text aligns left within the 200pt wide frame ```

fixedSize

```swift Text("Long text that should not wrap") .fixedSize() // prevents truncation / wrapping ```

การใช้พื้นที่เว้นระยะร่วมกับกรอบ

```swift VStack { Spacer() Text("Bottom") .frame(maxWidth: .infinity) .padding() } ```

ตรวจสอบอย่างรวดเร็ว

`Spacer()` ทำหน้าที่อะไรเมื่ออยู่ภายใน `HStack`

สรุป

ประเด็นสำคัญ: • `Spacer()` เติมพื้นที่ที่มีอยู่ ส่วน `Spacer(minLength:)` ใช้กำหนดช่องว่างขั้นต่ำ • `.padding()` เพิ่มระยะขอบภายใน โดยระบุขอบและจำนวนเพื่อควบคุมอย่างแม่นยำ • `.frame(width:height:)` กำหนดขนาดตายตัว • `.frame(maxWidth: .infinity)` ขยายเพื่อเติมพื้นที่ทั้งหมด • `.fixedSize()` ป้องกันการตัดข้อความ ถัดไป: GeometryReader

คำถามที่พบบ่อย

บทเรียน “ตัวเว้นระยะ Padding และตัวปรับแต่ง Frame” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวเว้นระยะ Padding และตัวปรับแต่ง Frame” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวเว้นระยะ Padding และตัวปรับแต่ง Frame”

ใช้ Spacer สำหรับช่องว่างที่ยืดหยุ่น และ frame เพื่อกำหนดขนาดอย่างชัดเจน คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวเว้นระยะ Padding และตัวปรับแต่ง Frame” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม

ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พื้นฐาน VStack, HStack และ ZStack
  2. LazyVGrid และ LazyHGrid
  3. ตัวเว้นระยะ Padding และตัวปรับแต่ง Frame
  4. GeometryReader สำหรับเค้าโครงที่ปรับตามสภาพแวดล้อม
← กลับไปที่ Swift Academy