LazyVStack: สแต็คแนวตั้งและแนวนอนใน SwiftUI คืออะไร

LazyVStack และ LazyHStack คืออะไร

LazyVStack และ LazyHStack เป็นคอนเทนเนอร์เค้าโครงใน SwiftUI ที่สร้างและแสดงวิวย่อยเมื่อจำเป็นเท่านั้น เมื่อมองเห็นในพื้นที่ที่เลื่อนได้ LazyVStack จัดเรียงองค์ประกอบในแนวตั้ง (จากบนลงล่าง) ในขณะที่ LazyHStack จัดเรียงในแนวนอน (จากซ้ายไปขวา)

สแต็คทั้งสองถูกนำเสนอโดย Apple ใน SwiftUI 2.0 (iOS 14, macOS 11, watchOS 7, tvOS 14) พร้อมกับ LazyVGrid และ LazyHGrid ก่อนที่สแต็คขี้เกียจจะปรากฏ นักพัฒนาต้องใช้ UITableView และ UICollectionView ผ่าน UIViewRepresentable เพื่อทำงานกับรายการขนาดใหญ่อย่างมีประสิทธิภาพ LazyVStack ขจัดความจำเป็นนี้ด้วยการให้อินเทอร์เฟส SwiftUI ดั้งเดิมที่มีการโหลดแบบขี้เกียจอัตโนมัติ

ตามข้อมูลจาก Apple WWDC Session 10031 (2020) สแต็คขี้เกียจใช้กลไก การสร้างวิวแบบเลื่อนออกไป: SwiftUI เก็บข้อมูลต้นฉบับ (เช่น อาเรย์ของโมเดล) และสร้างอินสแตนซ์วิวก่อนที่จะเรนเดอร์บนหน้าจอ เมื่อเลื่อน สแต็คจะนำวิวที่สร้างไว้แล้วกลับมาใช้ใหม่ หลีกเลี่ยงการจัดสรรใหม่ — ซึ่งช่วยลดภาระบนตัวจัดสรรหน่วยความจำและตัวเก็บขยะของ Swift

ในการทำงานกับสแต็คขี้เกียจ ให้วางไว้ภายใน ScrollView เสมอ — หากไม่มีการเลื่อน องค์ประกอบที่เกินขอบเขตหน้าจอจะถูกตัดออก ไม่ได้สร้างแบบขี้เกียจ

การโหลดแบบขี้เกียจทำงานอย่างไร

กลไกการโหลดแบบขี้เกียจใน LazyVStack ขึ้นอยู่กับเรขาคณิต: SwiftUI จะติดตามตำแหน่งของวิวย่อยแต่ละตัวเทียบกับคอนเทนเนอร์ ScrollView เมื่อองค์ประกอบข้ามขอบเขตพื้นที่ที่มองเห็น (ด้วยบัฟเฟอร์ขนาดเล็กสองสามจุด) ระบบจะเรียกตัวเริ่มต้นและเรนเดอร์เนื้อหา เมื่อองค์ประกอบออกจากหน้าจอ SwiftUI จะทำลายวิวแต่รักษาสถานะผ่าน @State หากถูกทำเครื่องหมายว่าสามารถเก็บรักษาได้

วิธีการนี้แตกต่างจาก VStack ที่วิวย่อยทั้งหมดถูกสร้างขึ้นทันทีเมื่อเริ่มต้นคอนเทนเนอร์ โดยไม่คำนึงถึงการมองเห็น สำหรับรายการ 10,000 องค์ประกอบ VStack จะสร้างอินสแตนซ์วิว 10,000 รายการในหน่วยความจำ ในขณะที่ LazyVStack จะสร้างเฉพาะที่พอดีกับหน้าจอ (โดยปกติ 8–15)

ขนาดและการจัดตำแหน่ง

LazyVStack รับพารามิเตอร์การกำหนดค่าสามตัว: alignment (HorizontalAlignment — leading, center, trailing), spacing (CGFloat — ระยะห่างระหว่างองค์ประกอบ), และ pinnedViews (PinnedScrollableViews — การปักหมุดหัวข้อส่วน) LazyHStack ใช้พารามิเตอร์เดียวกัน แต่ alignment รับ VerticalAlignment (top, center, bottom)

ความแตกต่างระหว่าง LazyVStack และ VStack: ประสิทธิภาพและหน่วยความจำ

ความแตกต่างหลักระหว่าง LazyVStack และ VStack คือกลยุทธ์การสร้างองค์ประกอบย่อย VStack (สแต็คกระตือรือร้น) คำนวณขนาดและตำแหน่งของวิวย่อยทั้งหมดในขณะเรนเดอร์ ทำให้ไม่เหมาะสำหรับรายการแบบไดนามิกขนาดใหญ่ LazyVStack (สแต็คขี้เกียจ) เลื่อนการสร้างออกไปจนกว่าองค์ประกอบจะมองเห็น

มาเปรียบเทียบพฤติกรรมโดยใช้รายการข้อความ 1,000 บรรทัด VStack จะโหลดทั้งหมด 1,000 บรรทัดลงในหน่วยความจำทันที เรียกตัวเริ่มต้นของแต่ละบรรทัดและจัดสรรหน่วยความจำสำหรับมัน ส่งผลให้ประสิทธิภาพลดลงบนอุปกรณ์ที่อ่อนแอ (iPhone SE, iPad mini) และเพิ่มเวลาเริ่มต้นหน้าจอ LazyVStack จะโหลดเฉพาะ 10–12 บรรทัดที่มองเห็น สร้างส่วนที่เหลือเมื่อเลื่อน

การทดสอบเชิงปฏิบัติ (ใช้ Xcode Instruments โปรไฟล์ Allocations) แสดงให้เห็นว่า: บน iPhone 12 mini รายการ 5,000 องค์ประกอบกับ LazyVStack ใช้หน่วยความจำ 3–5 MB ในขณะที่ VStack ที่มีเนื้อหาเดียวกันใช้ 150–250 MB — มากกว่า 50 เท่า ในขณะเดียวกัน เวลาเรนเดอร์เริ่มต้นสำหรับ LazyVStack คือ ~50 มิลลิวินาที เทียบกับ ~800 มิลลิวินาทีสำหรับ VStack บนอุปกรณ์เดียวกัน

เลือก VStack สำหรับรายการแบบคงที่หรือสั้น (สูงสุด 10–15 องค์ประกอบ) และ LazyVStack สำหรับรายการแบบไดนามิกหรือที่อาจยาว Apple แนะนำให้ใช้ LazyVStack เป็นค่าเริ่มต้นหากคุณไม่แน่ใจเกี่ยวกับขนาดสูงสุดของรายการ

เมื่อใดที่ VStack ยังคงจำเป็น

VStack ยังคงเป็นตัวเลือกที่ดีที่สุด สำหรับอินเทอร์เฟสแบบคงที่: หน้าจอโปรไฟล์ ฟอร์มเข้าสู่ระบบ บัตรสินค้า — ที่ทราบจำนวนองค์ประกอบและไม่เกิน 10–15 VStack ทำงานเร็วกว่าในการเรนเดอร์เริ่มต้นสำหรับปริมาณดังกล่าวเพราะไม่สูญเสียทรัพยากรไปกับการติดตามเรขาคณิตและการโหลดแบบขี้เกียจ นอกจากนี้ VStack ยังทำงานได้ถูกต้องภายนอก ScrollView (เช่น ภายใน ZStack หรือ Group) ในขณะที่ LazyVStack ที่ไม่มี ScrollView จะสูญเสียจุดประสงค์

เมื่อใดควรใช้ LazyVStack และ LazyHStack

สแต็คขี้เกียจเหมาะสมที่สุด สำหรับสถานการณ์ที่มีจำนวนองค์ประกอบมากหรือคาดเดาไม่ได้: ฟีดโซเชียลมีเดีย แคตตาล็อกสินค้า รายการแชท คลังไฟล์สื่อ บันทึกเหตุการณ์ แผงบริหารจัดการที่มีเรกคอร์ดนับพัน

กรณีการใช้งานเฉพาะ: รายการข้อความในแอปส่งข้อความ (หลายหมื่นข้อความ) ภาพหมุนในแอปแกลเลอรี ฟีดข่าวที่มีการโหลดไม่สิ้นสุด รายการคำสั่งซื้อในร้านค้าออนไลน์ LazyHStack มีประโยชน์โดยเฉพาะสำหรับภาพหมุนแนวนอน — ตัวอย่างเช่น Instagram Stories หรือแบนเนอร์โปรโมชัน

ข้อห้ามใช้: อินเทอร์เฟสที่มีแอนิเมชันการปรากฏขององค์ประกอบ (สแต็คขี้เกียจไม่รองรับการเปลี่ยนผ่านระหว่างสถานะการลบองค์ประกอบโดยไม่มีตรรกะเพิ่มเติม) กรณีที่องค์ประกอบทั้งหมดควรมองเห็นพร้อมกัน (รายการช่องทำเครื่องหมายสั้น ๆ) และเมื่อคุณต้องการควบคุมการใช้ซ้ำเซลล์อย่างแม่นยำ (ในกรณีนี้ List หรือ Table อาจเหมาะสมกว่า)

ตัวอย่างโค้ด: รายการ กริด และส่วน

ตัวอย่างที่ 1: รายการแนวตั้งอย่างง่ายกับ LazyVStack

ตัวอย่างพื้นฐานแสดง 1,000 องค์ประกอบด้วยการใช้หน่วยความจำน้อยที่สุด องค์ประกอบสำคัญ: ScrollView เป็นคอนเทนเนอร์เลื่อน LazyVStack สำหรับการโหลดแบบขี้เกียจ ForEach พร้อมตัวระบุสำหรับการวนซ้ำข้อมูล

import SwiftUI

struct LazyListExample: View {
    let items = Array(0..<1000)

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 8) {
                ForEach(items, id: \.self) { index in
                    Text("รายการ #\(index)")
                        .font(.body)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding()
                        .background(Color.gray.opacity(0.1))
                        .cornerRadius(8)
                }
            }
            .padding()
        }
    }
}

โค้ดสร้าง ScrollView ที่มี LazyVStack โดยมีระยะห่าง 8pt ระหว่างองค์ประกอบ ForEach จะวนซ้ำอาเรย์ items และสร้าง Text สำหรับแต่ละดัชนี ด้วยการโหลดแบบขี้เกียจ จาก 1,000 องค์ประกอบ มีเพียง 10–12 ที่มองเห็นอยู่ในหน่วยความจำในเวลาเดียวกัน

ตัวอย่างที่ 2: ส่วนกับ pinnedViews

ตัวอย่างนี้สาธิตการจัดกลุ่มองค์ประกอบตามส่วนด้วยหัวข้อที่ปักหมุด คล้ายกับรายชื่อผู้ติดต่อใน iOS Section กำหนดหัวข้อและเนื้อหา pinnedViews: .sectionHeaders ปักหมุดหัวข้อไว้ที่ด้านบนของหน้าจอเมื่อเลื่อน

import SwiftUI

struct SectionedList: View {
    let cities = ["มอสโก", "ลอนดอน", "โตเกียว", "นิวยอร์ก", "ปารีส"]
    let countries = ["รัสเซีย", "สหราชอาณาจักร", "ญี่ปุ่น", "สหรัฐอเมริกา", "ฝรั่งเศส"]

    var body: some View {
        ScrollView {
            LazyVStack(pinnedViews: .sectionHeaders) {
                Section(header: Text("เมือง").font(.title).bold()) {
                    ForEach(cities, id: \.self) { city in
                        Text(city).padding(8)
                    }
                }
                Section(header: Text("ประเทศ").font(.title).bold()) {
                    ForEach(countries, id: \.self) { country in
                        Text(country).padding(8)
                    }
                }
            }
        }
    }
}

หัวข้อที่ปักหมุด (.sectionHeaders) ทำตัวเหมือนส่วนหัวของ UITableView: เมื่อเลื่อนส่วน หัวข้อจะ "ติด" อยู่ที่ขอบบนของหน้าจอจนกว่าส่วนทั้งหมดจะหายไป หลังจากนั้นจะถูกแทนที่ด้วยหัวข้อของส่วนถัดไป สามารถรวม pinnedViews: .sectionHeaders และ .sectionFooters พร้อมกัน

ตัวอย่างที่ 3: ภาพหมุนแนวนอนกับ LazyHStack

LazyHStack ใช้สำหรับการเลื่อนแนวนอน — ภาพหมุน รายการหมวดหมู่แนวนอน พารามิเตอร์ alignment: .top จัดองค์ประกอบให้ชิดขอบบน

import SwiftUI

struct HorizontalCarousel: View {
    let colors: [Color] = [.red, .blue, .green, .orange, .purple, .pink]

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack(spacing: 16, alignment: .top) {
                ForEach(0..<100, id: \.self) { index in
                    RoundedRectangle(cornerRadius: 12)
                        .fill(colors[index % colors.count])
                        .frame(width: 150, height: 200)
                        .overlay(Text("\(index + 1)").foregroundColor(.white).bold())
                }
            }
            .padding(.horizontal)
        }
        .frame(height: 220)
    }
}

โค้ดสร้าง ScrollView แนวนอนกับ LazyHStack จาก 100 สี่เหลี่ยมผืนผ้า มีเพียง 2–3 ที่แสดงพร้อมกัน (ขึ้นอยู่กับความกว้างหน้าจอและขนาดองค์ประกอบ) เมื่อเลื่อนไปทางซ้าย องค์ประกอบใหม่จะถูกโหลดแบบขี้เกียจ ความสูงของคอนเทนเนอร์คงที่ (220pt) เพื่อหลีกเลี่ยงความสูงไม่สิ้นสุดในการเลื่อนแนวนอน

PinnedViews และส่วนในสแต็คขี้เกียจ

PinnedScrollableViews เป็นตัวเลือกการกำหนดค่าสำหรับ LazyVStack และ LazyHStack ที่ควบคุมการปักหมุดหัวข้อและท้ายส่วนเมื่อเลื่อน รองรับสองค่า: sectionHeaders (หัวข้อติดที่จุดเริ่มต้นของคอนเทนเนอร์) และ sectionFooters (ท้ายติดที่จุดสิ้นสุด)

กลไกวิวที่ปักหมุดทำงานเฉพาะภายในคอนเทนเนอร์ Section ที่ซ้อนอยู่ใน LazyVStack แต่ละ Section มีหัวข้อและ/หรือท้ายที่รับพฤติกรรมการติดโดยอัตโนมัติ SwiftUI ติดตามตำแหน่งของแต่ละส่วนเทียบกับขอบเขต ScrollView และสลับการมองเห็นขององค์ประกอบที่ปักหมุดเมื่อเปลี่ยนระหว่างส่วน

สำคัญ: pinnedViews เพิ่มความซับซ้อนในการคำนวณเค้าโครงเพราะ SwiftUI ต้องคำนวณใหม่อย่างต่อเนื่องว่าหัวข้อใดถูกปักหมุดอยู่ ใช้ pinnedViews เฉพาะเมื่อฟังก์ชันการทำงานจำเป็นจริง ๆ — สำหรับรายการธรรมดาที่ไม่มีส่วน ควรละเว้นพารามิเตอร์นี้ Apple ในเอกสารของตน (Human Interface Guidelines, 2024) แนะนำให้ใช้หัวข้อที่ปักหมุดสำหรับดัชนีตามตัวอักษรและการจัดกลุ่มตามวันที่

เคล็ดลับการปรับแต่งสแต็คขี้เกียจ

การใช้ตัวระบุอย่างถูกต้อง เป็นปัจจัยประสิทธิภาพที่สำคัญที่สุดสำหรับ LazyVStack แต่ละองค์ประกอบใน ForEach ต้องมี id ที่ไม่ซ้ำกันและคงที่ การใช้ \.self กับชนิดดั้งเดิม (Int, String) เป็นที่ยอมรับได้ แต่สำหรับโมเดลข้อมูล ให้ใช้โปรโตคอล Identifiable เสมอ id ที่ไม่เสถียร (เช่น UUID ที่สร้างทุกครั้ง) ทำให้ SwiftUI สร้างวิวทั้งหมดใหม่ทุกครั้งที่อัปเดต

หลีกเลี่ยงการคำนวณหนักภายใน body ของแต่ละองค์ประกอบสแต็ค หากองค์ประกอบมีเค้าโครงที่ซับซ้อนหรือการประมวลผลข้อมูล — ให้แยกตรรกะออกเป็นโครงสร้างวิวแยกต่างหากที่มีการโหลดแบบขี้เกียจของตนเอง ใช้ EquatableView เพื่อป้องกันการวาดซ้ำที่ไม่จำเป็นเมื่อข้อมูลขององค์ประกอบไม่เปลี่ยนแปลง

สำหรับรูปภาพภายใน LazyVStack ให้ใช้การโหลดแบบอะซิงโครนัส (AsyncImage) หรือแคชผ่าน Kingfisher/Nuke เสมอ แต่ละองค์ประกอบไม่ควรโหลดรูปภาพแบบซิงโครนัสเมื่อปรากฏบนหน้าจอ — จะทำให้การเลื่อนกระตุก ตาม WWDC Session 10031 ขนาดบัฟเฟอร์ดึงข้อมูลล่วงหน้าที่เหมาะสมคือ 3–5 หน้าจอไปข้างหน้าและข้างหลังจากตำแหน่งปัจจุบัน

วัดประสิทธิภาพผ่าน Xcode Instruments ด้วยโปรไฟล์ SwiftUI ให้ความสนใจกับเมตริก: body evaluations, allocations และอัตราเฟรม (FPS) ค่าเป้าหมาย: FPS > 55 เมื่อเลื่อน เวลาเรนเดอร์ต่อองค์ประกอบ < 1 มิลลิวินาที