Form ใน SwiftUI: คืออะไร การสร้างฟอร์มและการกำหนดค่า

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

Form คือคอนเทนเนอร์เฉพาะของ SwiftUI ที่ออกแบบมาเพื่อสร้างฟอร์มป้อนข้อมูลและหน้าจอการตั้งค่า มันสืบทอดพฤติกรรมของ List แต่เพิ่มสไตล์เฉพาะแพลตฟอร์ม: บน iOS Form จะแสดงเป็นตารางแบบกลุ่มที่มีมุมโค้งมนของเซกชัน; บน macOS จะปรากฏเป็นรายการระบบมาตรฐานพร้อมช่องทำเครื่องหมายและคอนโทรล

แตกต่างจากการจัดวางด้วยตนเองด้วย VStack และ HStack, Form จะจัดระยะห่างระหว่างองค์ประกอบโดยอัตโนมัติ เพิ่มตัวแบ่ง และปรับรูปลักษณ์ให้เข้ากับธีมระบบ — สว่างหรือมืด นักพัฒนาเพียงอธิบายโครงสร้างเชิงตรรกะ: Section สำหรับการจัดกลุ่มและคอนโทรลภายใน ฟอร์มจะตัดสินใจเองว่าจะจัดวาง Picker, Toggle หรือ Stepper ด้วยสายตาอย่างไรบนแพลตฟอร์มนั้น ๆ

Form รองรับองค์ประกอบป้อนข้อมูลมาตรฐานทั้งหมดของ SwiftUI: TextField สำหรับข้อความ, SecureField สำหรับรหัสผ่าน, Picker สำหรับเลือกรายการ, Toggle สำหรับเปิด/ปิด, Slider สำหรับช่วงค่า, Stepper สำหรับค่าแบบทีละขั้น และ DatePicker สำหรับวันที่ แต่ละองค์ประกอบจะได้รับสไตล์ที่สอดคล้องกับ HIG (Human Interface Guidelines) ของ Apple บนแพลตฟอร์มเป้าหมายโดยอัตโนมัติ

Form กับ List: การเปรียบเทียบคอนเทนเนอร์

แม้จะมีความคล้ายคลึงทางสายตา Form และ List แก้ปัญหางานที่แตกต่างกัน List คือคอนเทนเนอร์สากลสำหรับแสดงรายการข้อมูลที่เลื่อนได้พร้อมการปัดและการแก้ไขแถว Form คือคอนเทนเนอร์เฉพาะสำหรับ การป้อนข้อมูลและการตั้งค่า ปรับให้เหมาะสมกับสไตล์คอนโทรลของระบบ

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

ตาม Apple Human Interface Guidelines (2025), ควรใช้ Form สำหรับหน้าจอการตั้งค่าและการป้อนข้อมูลที่มีคอนโทรล 3 ถึง 20 รายการบนหน้าจอเดียว และการแบ่งเป็นเซกชันช่วยปรับปรุงการใช้งาน

Section ภายใน Form

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

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

Form {
    Section(header: Text("โปรไฟล์")) {
        TextField("ชื่อ", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("การแจ้งเตือน"),
            footer: Text("ปิดใช้งานระหว่างการประชุม")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

ในตัวอย่าง เซกชันแรก «Profile» มีสองฟิลด์ข้อความโดยไม่มีส่วนท้าย เซกชันที่สอง «Notifications» มีสองสวิตช์พร้อมคำอธิบายด้านล่างกลุ่ม ส่วนท้ายจะเพิ่ม ระยะห่างโดยอัตโนมัติและใช้สไตล์แบบอักษร caption Section สามารถมีส่วนท้ายโดยไม่มีส่วนหัว หรือส่วนหัวโดยไม่มีส่วนท้าย

คอนโทรลใน Form

Form รองรับองค์ประกอบป้อนข้อมูลมาตรฐานทั้งหมดของ SwiftUI Picker ใน Form จะแสดงเป็นแถวนำทางโดยอัตโนมัติพร้อมการเปลี่ยนไปยังหน้าจอการเลือกแยกต่างหากบน iOS Toggle จะแสดงเป็นแถวพร้อมสวิตช์ที่จัดชิดขวา TextField จะได้รับสไตล์การป้อนข้อมูลของระบบพร้อมตัวยึดตำแหน่ง

สำหรับค่าตัวเลข จะใช้ Stepper (การเปลี่ยนแปลงทีละขั้น) และ Slider (การเปลี่ยนแปลงอย่างราบรื่นในช่วง) DatePicker รองรับหลายโหมด: date, time, dateAndTime ColorPicker พร้อมใช้งานสำหรับการเลือกสี แต่ละองค์ประกอบปรับให้เข้ากับแพลตฟอร์มโดยไม่ต้องใช้โค้ดเพิ่มเติม — บน iOS คอนโทรลใช้สไตล์ UIKit ดั้งเดิม; บน macOS ใช้ AppKit

สำหรับคอนโทรลที่กำหนดเองภายใน Form สามารถใช้ SwiftUI View ใดก็ได้ — พวกมันสืบทอดพฤติกรรมมาตรฐานของเซกชัน อย่างไรก็ตาม ขอแนะนำ ให้ใช้องค์ประกอบของระบบ เนื่องจากรับประกันการปฏิบัติตาม HIG และรองรับการเข้าถึง (VoiceOver, Dynamic Type) โดยไม่ต้องกำหนดค่าเพิ่มเติม

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

มาสร้างหน้าจอการลงทะเบียนโดยใช้ Form กัน ฟอร์มประกอบด้วยสี่เซกชัน: ข้อมูลส่วนตัว, การเลือกบทบาท, การตั้งค่าการสมัครสมาชิก และปุ่มส่ง ใช้ Section สำหรับการจัดกลุ่มและคอนโทรลมาตรฐานของ SwiftUI

struct RegistrationForm: View {
    @State private var name = ""
    @State private var email = ""
    @State private var role = "Developer"
    @State private var agreedToTerms = false

    let roles = ["Developer", "Designer", "Manager"]

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("ข้อมูลส่วนตัว")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

                Section(header: Text("บทบาท")) {
                    Picker("Select role", selection: $role) {
                        ForEach(roles, id: \.self) { role in
                            Text(role).tag(role)
                        }
                    }
                }

                Section {
                    Toggle("Agree to terms", isOn: $agreedToTerms)
                }

                Section {
                    Button("ลงทะเบียน") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

ฟอร์มแบ่งออกเป็นสี่ Section: ข้อมูลส่วนตัวพร้อมสองฟิลด์ข้อความ, การเลือกบทบาทผ่าน Picker, การยอมรับเงื่อนไขผ่าน Toggle และปุ่มลงทะเบียน ปุ่มจะถูกปิดใช้งานจนกว่าผู้ใช้จะยอมรับเงื่อนไข — นี่คือตัวอย่างของการตรวจสอบภายใน Form NavigationStack เพิ่มหัวเรื่องและให้ Picker เปิดหน้าจอการเลือกแยกต่างหากบน iOS

ฟอร์มการตั้งค่าพร้อมเซกชันย่อย

struct SettingsForm: View {
    @State private var volume: Double = 0.5
    @State private var isDarkMode = false
    @State private var reminderDate = Date()

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("ลักษณะ")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("ระดับเสียง")
                    }
                }

                Section(header: Text("การเตือน"),
                        footer: Text("คุณจะได้รับการแจ้งเตือนตามเวลาที่เลือก")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

                Section {
                    NavigationLink("Advanced Settings",
                        destination: AdvancedSettingsView())
                }
            }
            .navigationTitle("Settings")
        }
    }
}

ตัวอย่างนี้แสดงการรวมกันของ Slider, DatePicker และ NavigationLink ภายใน Form DatePicker ใช้โหมด hourAndMinute เพื่อแสดงเฉพาะเวลา NavigationLink ในเซกชันสุดท้ายสร้างการเปลี่ยนไปยังหน้าจอการตั้งค่าขั้นสูง — รูปแบบทั่วไปสำหรับอินเทอร์เฟซแบบ Settings ส่วนหัวและส่วนท้ายของเซกชันทำให้ฟอร์มสามารถอธิบายตนเองได้: ผู้ใช้เข้าใจทันทีว่าคอนโทรลแต่ละตัวอยู่ในกลุ่มใด