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

LazyVGrid และ LazyHGrid

สร้างเค้าโครงตารางที่ตอบสนองต่อขนาดหน้าจอด้วยคอลัมน์ GridItem แบบตายตัว ยืดหยุ่น และปรับตามพื้นที่

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

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

`LazyVGrid` และ `LazyHGrid` จัดเตรียมการจัดวางแบบตารางด้วยคำจำกัดความคอลัมน์หรือแถวที่ปรับแต่งได้โดยใช้ `GridItem` เหมาะอย่างยิ่งสำหรับแกลเลอรี แค็ตตาล็อก และการจัดวางแบบการ์ด

ชนิดของ GridItem

• `.fixed(size)` — ขนาดพิกเซลตายตัว • `.flexible(min:max:)` — เติมพื้นที่ว่างที่มีอยู่ • `.adaptive(minimum:maximum:)` — สร้างคอลัมน์ให้ได้มากที่สุดเท่าที่พอดี

LazyVGrid พื้นฐาน

```swift let columns = [GridItem(.adaptive(minimum: 100))] LazyVGrid(columns: columns, spacing: 16) { ForEach(items) { item in ItemCard(item: item) } } ```

คอลัมน์ขนาดตายตัว

```swift let cols = Array(repeating: GridItem(.fixed(120)), count: 3) LazyVGrid(columns: cols) { ForEach(0..<12) { i in Color.blue.frame(height:80) } } ```

ชนิด GridItem แบบผสม

```swift let cols = [GridItem(.flexible(minimum:80)), GridItem(.fixed(100))] ``` ผสมชนิดต่าง ๆ เพื่อสร้างการจัดวางสไตล์ Pinterest

LazyHGrid

```swift let rows = [GridItem(.fixed(60)), GridItem(.fixed(60))] ScrollView(.horizontal) { LazyHGrid(rows: rows, spacing: 8) { ForEach(tags) { tag in TagView(tag: tag) } } } ```

การจัดแนวและระยะห่าง

```swift LazyVGrid(columns: columns, alignment: .leading, spacing: 12) { ... } ```

ส่วนหัวของตาราง

```swift LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) { Section(header: Text("Section 1").font(.headline)) { ForEach(items1) { ItemView($0) } } } ```

การเลือกแบบปรับตามพื้นที่หรือแบบคงที่

• `.adaptive` — เหมาะที่สุดสำหรับตารางรูปภาพและเนื้อหาแบบเปลี่ยนแปลงได้ • `.fixed` — ใช้เมื่อต้องการควบคุมขนาดอย่างแม่นยำ • `.flexible` — เติมพื้นที่อย่างเท่า ๆ กัน เช่น คอลัมน์แบบ flexbox ของ CSS

ประสิทธิภาพการโหลดเมื่อจำเป็น

คำนำหน้า `Lazy` หมายความว่าเซลล์ที่อยู่นอกหน้าจอจะยังไม่ถูกสร้างขึ้น — เป็นสิ่งสำคัญสำหรับรายการยาว ๆ หากไม่ใช้การโหลดแบบ Lazy รายการทั้งหมดจะถูกสร้างขึ้นตั้งแต่เริ่มต้น

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

`GridItem` ประเภทใดจะสร้างคอลัมน์ให้ได้มากที่สุดเท่าที่จะใส่ได้ โดยมีความกว้างขั้นต่ำตามกำหนด

สรุป

ประเด็นสำคัญ: • `LazyVGrid(columns:)` / `LazyHGrid(rows:)` สำหรับการจัดวางแบบตาราง • `GridItem(.fixed)`, `.flexible()`, `.adaptive(minimum:)` • `pinnedViews: .sectionHeaders` สำหรับส่วนหัวที่ติดอยู่กับที่ • Lazy = แสดงผลเฉพาะเซลล์ที่มองเห็น • `.adaptive` เป็นตัวเลือกที่ง่ายที่สุดสำหรับตารางที่ปรับตามขนาดหน้าจอ ถัดไป: พื้นที่เว้นระยะ การเว้นระยะขอบ และกรอบ

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

บทเรียน “LazyVGrid และ LazyHGrid” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “LazyVGrid และ LazyHGrid”

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

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

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

บทเรียน “LazyVGrid และ LazyHGrid” ใช้เวลานานแค่ไหน

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

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

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

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

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