Section ใน SwiftUI: คืออะไร การสร้าง Section และการจัดกลุ่ม

Section ใน SwiftUI คืออะไร?

Section เป็นคอมโพเนนต์เชิงโครงสร้างของ SwiftUI ที่ออกแบบมาเพื่อจัดกลุ่มองค์ประกอบภายในคอนเทนเนอร์ Form และ List แตกต่างจาก VStack หรือ HStack ตรงที่ Section เพิ่มระยะห่างของระบบ ส่วนหัวและส่วนท้าย รวมถึงการเน้นกลุ่มแบบมองเห็นได้ในรูปแบบบล็อกมุมโค้งมนบน iOS

Section ไม่เปลี่ยนพฤติกรรมขององค์ประกอบลูก — มันจัดระเบียบการนำเสนอเท่านั้น ตัวควบคุมทั้งหมดภายใน Section — Picker, Toggle, TextField — ทำงานตามปกติ แต่ถูกรวมเป็นกลุ่มตรรกะที่มองเห็นได้ ซึ่งสำคัญอย่างยิ่งสำหรับ ฟอร์มบนหน้าจอ ที่ผู้ใช้ต้องปรับทิศทางในโครงสร้างการป้อนข้อมูลอย่างรวดเร็ว

ระบบจัดการระยะห่างระหว่าง Section โดยอัตโนมัติ: ระยะห่างระหว่าง Section บน iOS คือ 16–20 จุด ระหว่างองค์ประกอบภายใน Section คือ 0 (ตัวคั่นระหว่างแถว) นักพัฒนาไม่สามารถเปลี่ยนระยะห่างเหล่านี้ผ่านตัวปรับแต่ง padding ได้ — ถูกควบคุมโดยระบบเพื่อให้แน่ใจว่ารูปลักษณ์สอดคล้องกัน

ส่วนหัวและส่วนท้ายของ Section

Section ยอมรับพารามิเตอร์เสริมสองตัว: header — ชื่อของกลุ่ม และ footer — ข้อความอธิบายใต้กลุ่ม ส่วนหัวแสดงเหนือองค์ประกอบของเซคชั่นด้วยฟอนต์ตัวหนาสไตล์ caption ส่วนท้ายแสดงด้วยฟอนต์เล็กกว่าเป็นสีเทา พารามิเตอร์ทั้งสองยอมรับ SwiftUI View ใดก็ได้ ไม่ใช่แค่ Text

ส่วนหัวของ Section ช่วยให้ผู้ใช้เข้าใจว่าองค์ประกอบภายในกลุ่มอยู่ในหมวดหมู่ใด ตัวอย่างเช่น บนหน้าจอการตั้งค่า ส่วนหัว like “การแจ้งเตือน”, “ความเป็นส่วนตัว” และ “บัญชี” ช่วยนำทางผู้ใช้ได้ทันที ส่วนท้าย มีประโยชน์สำหรับคำอธิบาย: “ปิดการแจ้งเตือนระหว่างการประชุม” หรือ “รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร” ส่วนท้ายจะขึ้นบรรทัดใหม่โดยอัตโนมัติเมื่อจำเป็น

Section(
    header: Text("Account Security"),
    footer: Text("Use a strong password with at least 8 characters.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

ในตัวอย่าง Section มีส่วนหัว “Account Security” และส่วนท้ายพร้อมคำแนะนำเกี่ยวกับความปลอดภัยของรหัสผ่าน ผู้ใช้เห็นส่วนหัวเป็น ป้ายชื่อเซคชั่น กรอกสองฟิลด์และอ่านคำเตือนด้านล่างทันที โครงสร้างนี้ช่วยปรับปรุง UX เพราะข้อมูลทั้งหมดเกี่ยวกับเซคชั่นอยู่ในหน้าจอเดียว โดยไม่ต้องไปที่หน้าช่วยเหลือแยกต่างหาก

Section ภายใน Form และ List

Section ทำงานทั้งภายใน Form และ List แต่การแสดงผลทางภาพแตกต่างกัน ใน Form Section จะแสดงเป็นบล็อกที่มีมุมโค้งมนและพื้นหลังระบบ แยกจากเซคชั่นข้างเคียงด้วยระยะห่าง ใน List Section สามารถใช้สไตล์ plain — ไม่มีพื้นหลังและมุมโค้งมน หรือ inset-grouped — มีบล็อกโค้งมนคล้าย Form

การเลือกคอนเทนเนอร์มีผลต่อสไตล์ของ Section หากคุณวาง Section ที่มีเนื้อหาเดียวกันใน Form และ List ด้วยสไตล์ .insetGrouped ผลลัพธ์จะเหมือนกัน อย่างไรก็ตาม Form จะเพิ่มระยะห่างของระบบและใช้สไตล์ grouped โดยค่าเริ่มต้น ในขณะที่ List ต้องการระบุสไตล์อย่างชัดเจนผ่านตัวปรับแต่ง .listStyle(.insetGrouped)

เพื่อให้ได้รูปลักษณ์เดียวกันใน List ให้ใช้ .listStyle(.insetGrouped) สไตล์นี้เลียนแบบรูปลักษณ์ของ Form และเหมาะสำหรับหน้าจอการตั้งค่าที่สร้างบน List สำหรับรายการข้อมูลมาตรฐาน ให้ใช้ .plain — ไม่มีการเน้นเซคชั่น มีตัวคั่นบาง ๆ ระหว่างแถว

เนื้อหาไดนามิกด้วย ForEach

Section สามารถมีจำนวนองค์ประกอบแบบไดนามิกผ่าน ForEach ซึ่งช่วยให้สร้างกลุ่มที่มีองค์ประกอบซ้ำได้ในขณะที่รักษาส่วนหัวและส่วนท้ายสำหรับทั้งกลุ่ม ForEach ภายใน Section จะวนซ้ำชุดข้อมูลและสร้าง View ลูกสำหรับแต่ละองค์ประกอบโดยไม่ทำลายโครงสร้างเซคชั่น

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

struct DynamicSectionView: View {
    let categories = ["Work", "Personal", "Finance", "Health"]
    @State private var selected = Set<String>()

    var body: some View {
        Form {
            Section(header: Text("Categories"),
                    footer: Text("Select your preferred categories")) {
                ForEach(categories, id: \.self) { category in
                    Toggle(category, isOn: Binding(
                        get: { selected.contains(category) },
                        set: { if $0 { selected.insert(category) }
                                     else { selected.remove(category) } }
                    ))
                }
            }

            Section {
                Text("Selected: \(selected.count) categories")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

ในตัวอย่างนี้ ForEach สร้าง Toggle สำหรับแต่ละหมวดหมู่จากอาร์เรย์ categories ส่วนหัวและส่วนท้ายของเซคชั่นถูกกำหนดครั้งเดียวและนำไปใช้กับทั้งกลุ่ม เซคชั่นที่สองแสดงจำนวนหมวดหมู่ที่เลือก — ไม่ขึ้นอยู่กับ ForEach และยังคงคงที่ วิธีการนี้ช่วยสร้างฟอร์มที่ยืดหยุ่นซึ่งส่วนหัวและส่วนท้ายให้บริบทกับกลุ่มขององค์ประกอบไดนามิก

ตัวอย่างโค้ด Section

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

struct ProfileView: View {
    @State private var displayName = "Alex Johnson"
    @State private var bio = "iOS developer"
    @State private var isProfilePublic = true
    @State private var showEmail = false

    var body: some View {
        Form {
            Section(header: Text("Profile Info")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

            Section(header: Text("Privacy")) {
                Toggle("Public profile", isOn: $isProfilePublic)
                Toggle("Show email", isOn: $showEmail)
                    .disabled(!isProfilePublic)
            }

            Section(header: Text("Stats"),
                    footer: Text("Last updated today at 2:30 PM")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

สาม Section แยกพื้นที่ฟังก์ชันอย่างชัดเจน: ฟิลด์โปรไฟล์ที่แก้ไขได้ สวิตช์ความเป็นส่วนตัว และสถิติ เซคชั่นที่สองสาธิตการตรวจสอบ: สวิตช์ “Show email” ถูกปิดใช้งานจนกว่าโปรไฟล์จะเป็นสาธารณะ ส่วนท้ายของเซคชั่นที่สามแสดงเวลาอัปเดตล่าสุด — ตัวอย่างการใช้ส่วนท้ายสำหรับข้อมูลบริบทเพิ่มเติม LabeledContent เป็นคอมโพเนนต์ SwiftUI มาตรฐานสำหรับแสดงคู่คีย์-ค่าใน Form

Section พร้อมส่วนหัวแบบกำหนดเอง

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Notifications")
            .font(.headline)
    },
    footer: Text("Manage push and email alerts")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

ตัวอย่างนี้แสดงว่า header สามารถเป็น SwiftUI View ใดก็ได้ การใช้ HStack กับ Image และ Text จะเพิ่มไอคอนข้างส่วนหัว ทำให้เซคชั่นดูมีชีวิตชีวามากขึ้น ส่วนหัวแบบกำหนดเองมีประโยชน์สำหรับการเน้นเซคชั่นสำคัญในอินเทอร์เฟซ: การตั้งค่าการแจ้งเตือน ฟีเจอร์ที่ต้องชำระเงิน หรือเซคชั่นที่มีคำเตือน อย่างไรก็ตาม ไม่ควรใช้ส่วนหัวแบบกำหนดเองมากเกินไป — 1–2 เซคชั่นที่มีสไตล์ไม่มาตรฐานต่อหน้าจอก็เพียงพอที่จะรักษาความสอดคล้องของอินเทอร์เฟซ