@State — ano ito, layunin at paggamit sa SwiftUI

Ano ang @State sa SwiftUI?

@State ay isang built-in na Property Wrapper sa SwiftUI na nagpapahintulot sa isang view na mag-imbak at subaybayan ang sarili nitong estado. Kapag nagbago ang halaga ng @State, awtomatikong iginuhit muli ng SwiftUI ang view, muling tinatawag ang body property. Ito ang pundasyon ng reaktibong programming sa SwiftUI: idinedeklara ng developer ang estado, at ang framework ang bahala sa pag-sync ng interface.

Ang @State ay lumilikha ng storage area sa heap na pinamamahalaan ng SwiftUI. Ang area na ito ay persistent — nabubuhay ito sa paulit-ulit na pagsisimula ng istruktura ng view na nagaganap sa bawat render. Ginagamit ng SwiftUI ang identifier ng view (nabuo batay sa posisyon sa hierarchy) upang itali ang @State property sa isang partikular na view. Dahil dito, hindi nare-reset ang estado kapag na-update ang parent view.

Mahalagang limitasyon: ang @State ay para lamang sa mga value type (mga istruktura, enumeration, primitive). Para sa mga reference type (klase) gamitin ang @StateObject o @ObservedObject. Kung magtalaga ka ng klase sa @State property, hindi matutukoy ng SwiftUI ang mga pagbabago sa loob ng object — tanging ang pagpapalit ng buong reference.

Paano gumagana ang @State sa ilalim ng hood?

Ipinapatupad ng SwiftUI ang @State sa pamamagitan ng internal na mekanismo ng Storage. Ang bawat @State property ay tumatanggap ng dedikadong memory cell na nakaimbak sa espesyal na storage container ng view. Kapag naganap ang pagsulat sa wrappedValue, sa pamamagitan ng didSet ay inaabisuhan ng SwiftUI ang dependency graph nito tungkol sa pangangailangan ng pag-redrawing.

struct ContentView: View {
    @State private var name: String = "User"
    @State private var isLoggedIn: Bool = false

    var body: some View {
        VStack {
            Text("Kumusta, \(name)")
            Button(isLoggedIn ? "Mag-log out" : "Mag-log in") {
                isLoggedIn.toggle()
            }
        }
    }
}

Sa halimbawa mayroong dalawang @State property: name (String) at isLoggedIn (Bool). Kapag tinawag ang isLoggedIn.toggle(), minamarkahan ng SwiftUI ang ContentView bilang nangangailangan ng pag-update at muling pinapatakbo ang body sa susunod na cycle ng render. Pangunahing punto: ang @State property ay laging idineklara gamit ang private modifier — ito ay senyales na ang estado ay eksklusibong pagmamay-ari ng kasalukuyang view at hindi dapat baguhin mula sa labas nang direkta.

Para sa pagmamasid sa mga pagbabago, gumagamit ang SwiftUI ng CurrentValueSubject mula sa Combine. Bawat @State property ay lumilikha ng nakatagong publisher na nag-aabiso sa sistema sa bawat pagbabago. Ito ay nagpapahintulot sa SwiftUI na iguhit muli lamang ang minimum na kinakailangang set ng mga view, iniiwasan ang buong pag-update ng hierarchy.

Kailan gagamitin ang @State sa proyekto

Ang @State ay optimal para sa mga simpleng lokal na estado: mga text field para sa paghahanap, boolean flag para sa modal window, switch ng setting, counter, napiling elemento ng listahan. Kung ang halaga ay ginagamit lamang sa isang view at sa mga nested component nito (sa pamamagitan ng @Binding), ang @State ang tamang pagpili. Para sa mga estado na dapat mabuhay pagkatapos isara ang view (hal. data ng form), ang @State ay angkop din hangga't ang view ay nananatili sa hierarchy.

• Mga text field — @State para sa pag-imbak ng inilagay na text sa TextField
• Boolean flag — @State para sa pagpapakita/pagtago ng mga modal window at sheet
• Pagpili ng elemento — @State para sa pagsubaybay ng napiling tab o row
• Counter — @State para sa mga numerikong halaga na may pagtaas/pagbaba
• Pansamantalang pagkalkula — @State para sa pag-cache ng mga resulta sa loob ng view

Huwag gamitin ang @State para sa mga global na estado ng application, pag-cache ng data ng network o mga bagay na ginagamit sa maraming screen. Para sa mga layuning ito ay ang @StateObject at @EnvironmentObject. Hindi rin angkop ang @State para sa pag-imbak ng malaking halaga ng data — sa bawat pagbabago, ang buong view ay iguguhit muli.

@State at @Binding: pagtutulungan

Ang @Binding ay tulay sa pagitan ng @State sa parent view at ng child view na kailangang baguhin ang estadong ito. Idinedeklara ng parent ang @State, at ang child component ay tumatanggap ng Binding sa pamamagitan ng $ projection. Ang pagbabago ng Binding sa child view ay awtomatikong nag-a-update ng @State sa parent — at vice versa. Tinitiyak nito ang one-way na daloy ng data na may posibilidad ng feedback.

struct ParentView: View {
    @State private var text: String = ""

    var body: some View {
        ChildView(text: $text)
    }
}

struct ChildView: View {
    @Binding var text: String

    var body: some View {
        TextField("Enter text", text: $text)
    }
}

Sa listing, ang ParentView ang may-ari ng @State text, at ang ChildView ay tumatanggap ng $text bilang Binding. Ang TextField sa loob ng ChildView ay nakatali sa Binding na ito sa pamamagitan ng text: $text. Kapag nag-type ang user sa TextField, nagbabago ang halaga sa ChildView sa pamamagitan ng Binding, na nagiging sanhi ng pag-update ng @State sa ParentView. Ang parehong view ay iginuhit muli na may bagong halaga.

Mga karaniwang pagkakamali sa paggamit ng @State

Ang pinakakaraniwang pagkakamali — pagtatalaga ng klase sa @State property. Kung isulat mo ang @State var model = MyClass(), hindi matutunton ng SwiftUI ang mga pagbabago ng property sa loob ng klase — tanging ang pagpapalit ng mismong object. Para sa mga klase laging gamitin ang @StateObject. Ang pangalawang karaniwang problema — pagdedeklara ng @State nang walang private modifier, na lumalabag sa prinsipyo ng encapsulation ng estado.

Direktang pagpasa ng @State sa child view nang walang $ — isa pang karaniwang pagkakamali. Kung ipasa mo ang TextField(text: text) sa halip na TextField(text: $text), ang child component ay makakatanggap ng simpleng string, hindi Binding. Ang pagbabago ng text sa TextField ay hindi isi-sync sa parent @State. Laging gamitin ang $ projection para magpasa ng Binding.

Ang pangatlong pagkakamali — maramihang @State property para sa magkakaugnay na data. Kung ang ilang halaga ay lohikal na bumubuo ng isang kabuuan (hal. mga field ng form), pagsamahin ang mga ito sa isang istruktura na may iisang @State. Pinapasimple nito ang pagpasa ng estado sa mga child view at binabawasan ang bilang ng mga hiwalay na trigger ng pag-update.

Mga halimbawa ng paggamit ng @State sa SwiftUI

Ang @State ay ginagamit sa karamihan ng mga proyekto ng SwiftUI para sa pangunahing interaktibidad. Tingnan natin ang halimbawa ng login form, kung saan pinamamahalaan ng @State ang mga text field at loading state. Ang pattern na ito ay matatagpuan sa bawat application — mula sa simpleng notes hanggang sa kumplikadong corporate solutions.

struct LoginView: View {
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var isLoading: Bool = false
    @State private var errorMessage: String?

    var body: some View {
        Form {
            TextField("Email", text: $email)
            SecureField("Password", text: $password)
            Button("Mag-log in") {
                login()
            }.disabled(isLoading)
        }
    }

    private func login() {
        isLoading = true
        // Magsagawa ng network request
    }
}

Sa halimbawa mayroong apat na @State property: email at password para sa mga field ng form, isLoading para sa indikasyon ng pag-load at errorMessage para sa pagpapakita ng mga error. Ang bawat property ay malayang namamahala sa sarili nitong bahagi ng interface. Kapag nagbago ang isLoading, ang button ay awtomatikong na-block sa pamamagitan ng disabled(isLoading) — nang walang manu-manong pag-update ng UI.