Section sa SwiftUI: ano ito, paggawa ng seksyon at pagpapangkat

Ano ang Section sa SwiftUI?

Section ay isang structural na component ng SwiftUI na dinisenyo para sa pagpapangkat ng mga elemento sa loob ng Form at List containers. Hindi tulad ng VStack o HStack, nagdadagdag ang Section ng system spacing, header at footer, pati na rin ang visual na pag-highlight ng grupo bilang isang block na may bilugang sulok sa iOS.

Hindi binabago ng Section ang pag-uugali ng child elements — inaayos lamang nito ang kanilang presentasyon. Lahat ng kontrol sa loob ng Section — Picker, Toggle, TextField — ay gumagana nang normal, ngunit biswal na pinagsama sa isang lohikal na grupo. Ito ay lalong mahalaga para sa mga screen ng form kung saan ang user ay dapat mabilis na mag-navigate sa istraktura ng ipinasok na data.

Awtomatikong pinamamahalaan ng system ang mga spacing sa pagitan ng mga seksyon: ang distansya sa pagitan ng Section sa iOS ay 16–20 puntos, sa pagitan ng mga elemento sa loob ng Section — 0 (separator sa pagitan ng mga row). Hindi mababago ng developer ang mga spacing na ito sa pamamagitan ng padding modifiers — sila ay kinokontrol ng system upang matiyak ang pare-parehong hitsura.

Header at footer ng Section

Ang Section ay tumatanggap ng dalawang opsyonal na parameter: header — pamagat ng grupo, at footer — nagpapaliwanag na teksto sa ilalim ng grupo. Ang header ay ipinapakita sa itaas ng mga elemento ng seksyon na may bold na caption-style na font, ang footer — na may mas maliit na font sa kulay abo. Ang parehong parameter ay tumatanggap ng anumang SwiftUI View, hindi lamang Text.

Ang header ng Section ay tumutulong sa user na maunawaan kung saang kategorya nabibilang ang mga elemento sa loob ng grupo. Halimbawa, sa screen ng mga setting, ang mga header na „Mga Notipikasyon“, „Privacy“, at „Account“ ay agad na nagdidirekta sa user. Footer ay angkop para sa mga paliwanag: „I-off ang mga notipikasyon sa oras ng meeting“ o „Ang password ay dapat maglaman ng hindi bababa sa 8 character“. Ang footer ay awtomatikong nahahati sa maraming linya kung kinakailangan.

Section(
    header: Text("Seguridad ng Account"),
    footer: Text("Gumamit ng malakas na password na may hindi bababa sa 8 character.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

Sa halimbawa, ang Section ay may header na „Seguridad ng Account“ at footer na may payo sa seguridad ng password. Nakikita ng user ang header bilang label ng seksyon, pinupunan ang dalawang field, at agad na binabasa ang babala sa ilalim ng mga ito. Ang ganitong istraktura ay nagpapabuti sa UX dahil ang lahat ng impormasyon tungkol sa seksyon ay nasa isang screen nang hindi nangangailangan ng hiwalay na tulong.

Section sa loob ng Form at List

Ang Section ay gumagana pareho sa loob ng Form at List, ngunit ang visual na representasyon ay naiiba. Sa Form, ang Section ay ipinapakita bilang isang block na may bilugang sulok at system background, na pinaghihiwalay mula sa mga kalapit na seksyon ng mga spacing. Sa List, ang Section ay maaaring gumamit ng plain style — walang background at rounding, o inset-grouped — na may bilugang block, katulad ng Form.

Ang pagpili ng container ay nakakaapekto sa estilo ng Section. Ang paglalagay ng Section na may parehong nilalaman sa loob ng Form at List na may .insetGrouped na estilo ay magbibigay ng parehong resulta. Gayunpaman, ang Form ay nagdadagdag ng system spacing at default na gumagamit ng grouped style, habang ang List ay nangangailangan ng tahasang pagtukoy ng estilo sa pamamagitan ng modifier na .listStyle(.insetGrouped).

Upang makamit ang parehong hitsura sa List, gamitin ang .listStyle(.insetGrouped). Ang estilo na ito ay ginagaya ang hitsura ng Form at angkop para sa mga screen ng setting na binuo sa List. Para sa karaniwang listahan ng data, gamitin ang .plain — walang pag-highlight ng mga seksyon, na may manipis na separator sa pagitan ng mga row.

Dynamic na nilalaman sa pamamagitan ng ForEach

Section ay maaaring maglaman ng dynamic na bilang ng mga elemento sa pamamagitan ng ForEach. Ito ay nagbibigay-daan sa paglikha ng mga grupo na may paulit-ulit na elemento, habang pinapanatili ang header at footer para sa buong grupo. Ang ForEach sa loob ng Section ay umuulit sa koleksyon ng data at lumilikha ng child Views para sa bawat elemento, nang hindi sinisira ang istraktura ng seksyon.

Ang mga dynamic na seksyon ay kapaki-pakinabang para sa mga screen ng setting na may variable na bilang ng mga opsyon: listahan ng mga available na wika para pumili, listahan ng mga konektadong device, o listahan ng mga push subscription. Ang header ng seksyon ay nananatiling static, habang ang nilalaman ay nagbabago depende sa data.

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

    var body: some View {
        Form {
            Section(header: Text("Mga Kategorya"),
                    footer: Text("Piliin ang iyong mga gustong kategorya")) {
                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("Napili: \(selected.count) kategorya")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

Sa halimbawang ito, ang ForEach ay bumubuo ng Toggle para sa bawat kategorya mula sa array na categories. Ang header at footer ng seksyon ay itinakda nang isang beses at nalalapat sa buong grupo. Ang pangalawang seksyon ay nagpapakita ng bilang ng mga napiling kategorya — hindi nakadepende sa ForEach at nananatiling static. Ang pamamaraang ito ay nagbibigay-daan sa paglikha ng mga flexible form kung saan ang header at footer ay nagkokonteksto ng grupo ng mga dynamic na elemento.

Mga halimbawa ng code ng Section

Tingnan natin ang isang kumpletong halimbawa ng screen ng profile gamit ang Section para sa pagpapangkat ng data. Ang form ay naglalaman ng tatlong seksyon: impormasyon ng user, mga setting ng privacy, at statistics. Bawat seksyon ay gumagamit ng sarili nitong header, at ang huli — footer na may buod na impormasyon.

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("Info ng Profile")) {
                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("Huling na-update ngayon ng 2:30 PM")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Tatlong Section ang malinaw na naghihiwalay sa mga functional block: nabe-edit na mga field ng profile, privacy switch, at statistics. Ang pangalawang seksyon ay nagpapakita ng validation: ang Toggle na „Ipakita ang email“ ay naka-off hanggang ang profile ay maging pampubliko. Ang footer ng ikatlong seksyon ay nagpapakita ng oras ng huling update — halimbawa ng paggamit ng footer para sa karagdagang kontekstwal na impormasyon. Ang LabeledContent ay isang standard na SwiftUI component para sa pagpapakita ng „key-value“ pair sa Form.

Section na may custom na header

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

Ang halimbawang ito ay nagpapakita na ang header ay maaaring maging anumang SwiftUI View. Ang paggamit ng HStack na may Image at Text ay nagbibigay-daan sa pagdagdag ng icon sa tabi ng header, na ginagawang mas expressive ang seksyon nang biswal. Ang custom na header ay kapaki-pakinabang para sa pag-highlight ng mahahalagang seksyon sa interface: mga setting ng notipikasyon, mga bayad na feature, o mga seksyon na may babala. Gayunpaman, huwag lumampas sa custom na header — 1–2 seksyon na may hindi standard na hitsura bawat screen ay sapat upang mapanatili ang pagkakapareho ng interface.