Form sa SwiftUI: ano ito, paggawa ng form at pag-configure

Ano ang Form sa SwiftUI?

Ang Form ay isang espesyal na SwiftUI container na idinisenyo para sa paggawa ng mga form ng input ng data at mga screen ng setting. Namamana nito ang pag-uugali ng List, ngunit nagdaragdag ng mga istilo ng platform: sa iOS, ang Form ay ipinapakita bilang grouped-table na may mga bilugang sulok ng mga seksyon, sa macOS — bilang karaniwang system listahan na may mga checkbox at control.

Hindi tulad ng manu-manong layout gamit ang VStack at HStack, awtomatikong inilalagay ng Form ang mga spacing sa pagitan ng mga elemento, nagdaragdag ng mga separator, at iniaangkop ang hitsura sa system theme — maliwanag o madilim. Inilalarawan lamang ng developer ang lohikal na istruktura: Section para sa pag-grupo at ang mga control sa loob. Ang form mismo ang nagpapasya kung paano biswal na ilalagay ang Picker, Toggle o Stepper sa partikular na platform.

Sinusuportahan ng Form ang lahat ng karaniwang SwiftUI input element: TextField para sa text, SecureField para sa mga password, Picker para sa pagpili mula sa listahan, Toggle para sa on/off, Slider para sa mga range, Stepper para sa mga step value at DatePicker para sa petsa. Bawat elemento ay awtomatikong nakakatanggap ng istilong naaayon sa HIG (Human Interface Guidelines) ng Apple sa target na platform.

Form vs List: paghahambing ng mga container

Sa kabila ng pagkakahawig sa hitsura, nilulutas ng Form at List ang magkaibang mga gawain. Ang List ay isang unibersal na container para sa pagpapakita ng mga scrollable na listahan ng data na may kakayahang swipe action at pag-edit ng mga row. Ang Form ay isang espesyal na container para sa pag-input ng data at mga setting, na na-optimize para sa mga system na istilo ng mga control.

Angkop ang List para sa pagpapakita ng mga dynamic na data: news feed, chat, katalogo ng produkto. Ang Form — para sa mga static na screen na may predictable na set ng mga field: profile ng user, mga setting ng app, form ng pagpaparehistro. Ang pangunahing pagkakaiba: ang mga elemento ng Form ay maaaring mga interactive na control, habang ang mga row ng List ay kadalasang nagpapakita ng data at tumutugon sa tap gamit ang navigation o aksyon.

Ayon sa Apple Human Interface Guidelines (2025), dapat gamitin ang Form para sa mga screen ng setting at input, kung saan mayroong 3 hanggang 20 control sa isang screen at ang paghahati sa mga seksyon ay nagpapabuti sa pag-unawa.

Mga seksyon ng Section sa loob ng Form

Ang Section ay ang pangunahing building block ng Form, na nagpapahintulot sa pag-grupo ng mga elementong may lohikal na kaugnayan. Bawat Section ay maaaring magkaroon ng heading, footer, at anumang bilang ng mga control sa loob. Awtomatikong nagdaragdag ang system ng mga spacing sa pagitan ng mga seksyon at binabalot ang bawat isa sa isang visual na bloke na may mga bilugang sulok.

Ang paggamit ng Section ay mahalaga para sa pagiging nababasa ng form: ang mga elementong pinag-grupo ayon sa kahulugan ay mas madaling maintindihan ng user. Halimbawa, sa screen ng mga setting ng profile, maaaring ihiwalay sa mga hiwalay na seksyon ang "Personal na Impormasyon", "Mga Notification" at "Seguridad". Bawat seksyon ay maaaring maglaman ng footer na may paliwanag na text, na ipinapakita ng system sa mas maliit na font sa ilalim ng grupo ng mga elemento.

Form {
    Section(header: Text("Profile")) {
        TextField("Pangalan", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("Mga Notification"),
            footer: Text("I-disable sa panahon ng mga meeting")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

Sa halimbawa, ang unang seksyon na "Profile" ay naglalaman ng dalawang text field na walang footer, ang pangalawang seksyon na "Notifications" ay naglalaman ng dalawang toggle na may paliwanag sa ilalim ng grupo. Awtomatikong nagdaragdag ang footer ng spacing at gumagamit ng caption font style. Maaaring maglaman ang Section ng footer na walang heading o heading na walang footer.

Mga control sa Form

Sinusuportahan ng Form ang lahat ng karaniwang SwiftUI input element. Ang Picker sa Form ay awtomatikong ipinapakita bilang navigation row na may paglipat sa hiwalay na screen ng pagpili sa iOS. Ang Toggle ay ipinapakita bilang row na may switch na nakapantay sa kanang gilid. Ang TextField ay nakakatanggap ng system na istilo ng input na may placeholder.

Para sa mga numerikal na halaga ginagamit ang Stepper (step-by-step na pagbabago) at Slider (maluwag na pagbabago sa loob ng range). Sinusuportahan ng DatePicker ang ilang mode: date, time, dateAndTime. Para sa pagpili ng kulay available ang ColorPicker. Bawat elemento ay umaangkop sa platform nang walang karagdagang code — sa iOS gumagamit ang mga control ng native na UIKit na istilo, sa macOS — AppKit.

Para sa mga custom na control sa loob ng Form maaaring gamitin ang anumang SwiftUI View — namamana nila ang karaniwang pag-uugali ng seksyon. Gayunpaman, inirerekomenda ang pagsunod sa mga system element, dahil ginagarantiyahan nila ang pagsunod sa HIG at sumusuporta sa Accessibility (VoiceOver, Dynamic Type) nang walang karagdagang pag-configure.

Mga halimbawa ng code ng Form

Tingnan natin ang paggawa ng screen ng pagpaparehistro gamit ang Form. Ang form ay naglalaman ng apat na seksyon: personal na impormasyon, pagpili ng role, mga setting ng subscription at button ng pagpapadala. Ginagamit ang Section para sa pag-grupo at ang mga karaniwang SwiftUI control.

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("Personal na Impormasyon")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

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

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

                Section {
                    Button("Magrehistro") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

Nahahati ang form sa apat na Section: personal na impormasyon na may dalawang text field, pagpili ng role sa pamamagitan ng Picker, pagsang-ayon sa mga tuntunin sa pamamagitan ng Toggle at button ng pagpaparehistro. Naka-disable ang button hanggang sa sumang-ayon ang user sa mga tuntunin — ito ay halimbawa ng validation sa loob ng Form. Nagdaragdag ang NavigationStack ng heading at pinapayagan ang Picker na magbukas ng hiwalay na screen ng pagpili sa iOS.

Form ng mga setting na may mga sub-seksyon

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("Hitsura")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("Volume")
                    }
                }

                Section(header: Text("Mga Reminder"),
                        footer: Text("Makakatanggap ka ng notification sa napiling oras")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

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

Ang halimbawang ito ay nagpapakita ng kombinasyon ng Slider, DatePicker at NavigationLink sa loob ng Form. Gumagamit ang DatePicker ng hourAndMinute mode upang ipakita lamang ang oras. Ang NavigationLink sa huling seksyon ay lumilikha ng paglipat sa screen ng mga advanced setting — karaniwang pattern para sa mga interface na tulad ng Settings. Ginagawa ng mga heading at footer ng mga seksyon ang form na self-documenting: agad na nauunawaan ng user kung saang grupo nabibilang ang bawat control.