SwiftUI Academy · Lektion

Opbygning af en genanvendelig toggle-række

Opret et underordnet view, der ændrer state i det overordnede view.

Lektion 3 af 413 trin

Opbygning af en genanvendelig toggle-række er en gratis SwiftUI Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i SwiftUI Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. SwiftUI Academy-kurset indeholder 4 lektioner i alt.

En komponent, der redigerer

Lad os bygge en genanvendelig række, der skifter en indstilling. Tricket er, at rækken ændrer forælderens tilstand gennem en @Binding. 🧩

Design inputtene

Rækken skal bruge en etiket, der skal vises, og en binding, der skal ændres. Derfor tager den imod en titelstreng og en Bool-binding.

Erklær den underordnede visning

Opret en struct med en almindelig titel og en binding til den værdi, som den skal slå til og fra.

struct ToggleRow: View {
    let title: String
    @Binding var isOn: Bool
    var body: some View { Text("Placeholder") }
}

Byg body

I body viser en enkelt Toggle titlen og skriver gennem bindingen, når der trykkes på den.

var body: some View {
    Toggle(title, isOn: $isOn)
        .padding()
}

Brug den i en forælder

Forælderen ejer indstillingen med @State, indsætter derefter rækken og sender værdien med et dollartegn.

struct SettingsView: View {
    @State private var notify = true
    var body: some View { ToggleRow(title: "Notify", isOn: $notify) }
}

Genbrug den overalt

Tilføj nu ti indstillinger med ti rækker, der hver er bundet til sin egen tilstand. Én lille visning, der bliver genbrugt på hele skærmen.

ToggleRow(title: "Sound", isOn: $sound)
ToggleRow(title: "Vibrate", isOn: $vibrate)

Forælderen ser alle ændringer

Skift en vilkårlig række, så opdateres den tilsvarende @State hos forælderen med det samme. Forælderen kan straks reagere på den nye værdi.

Text(notify ? "On" : "Off")
    .foregroundStyle(notify ? .green : .gray)

Hold det underordnede element enkelt

Rækken har ingen holdning til, hvor dataene ligger. Den redigerer blot den binding, den får, hvilket gør den nem at flytte og genbruge.

Tilføj lidt stil

Fordi rækken er én visning, kan du style den én gang, så alle forekomster ser ens ud. Ensartethed følger automatisk med. 💅

Toggle(title, isOn: $isOn)
    .tint(.orange)
    .font(.headline)

Skift typen senere

Vil du i stedet have en række til et tal? Skift bindingstypen, så fungerer det samme mønster for enhver redigerbar værdi.

Små dele, store apps

Genanvendelige, bindingsstyrede rækker er sådan, rigtige apps forbliver overskuelige. Sammensæt mange små redigeringskomponenter til én ren indstillingsskærm.

Hurtigt tjek

Hurtigt tjek af skifterækken.

Opsummering: En genanvendelig redigeringskomponent

En underordnet visning med en @Binding bliver en genanvendelig redigeringskomponent. Send tilstanden ind med dollartegnet, og indsæt den hvor som helst. 🎉

Gratis at komme i gang

Lær Swift med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
30
Lektioner
120

Ofte stillede spørgsmål

Er lektionen “Opbygning af en genanvendelig toggle-række” gratis?

Ja — hele teksten til “Opbygning af en genanvendelig toggle-række” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af SwiftUI Academy-kurset, skal du opgradere til CoddyKit PRO. SwiftUI Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Opbygning af en genanvendelig toggle-række”?

Opret et underordnet view, der ændrer state i det overordnede view. Du øver dig i SwiftUI Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på SwiftUI Academy?

Der kræves ingen tidligere erfaring. SwiftUI Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Opbygning af en genanvendelig toggle-række”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne SwiftUI Academy-lektion?

Ja. Alle SwiftUI Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Hvorfor underordnede views har brug for @Binding
  2. Videregivelse af en binding
  3. Opbygning af en genanvendelig toggle-række
  4. @State kontra @Binding
← Tilbage til SwiftUI Academy