Bygg en återanvändbar Toggle-rad
Skapa en undervy som ändrar state i den överordnade vyn.
Bygg en återanvändbar Toggle-rad är en gratis lektion i SwiftUI Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för SwiftUI Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.
En komponent som redigerar
Vi ska skapa en återanvändbar rad som ändrar en inställning. Tricket är att raden ändrar den överordnade vyns tillstånd genom en @Binding. 🧩
Utforma indata
Raden behöver en etikett att visa och en bindning att ändra. Därför tar den emot en titelsträng och en Bool-bindning.
Deklarera den underordnade vyn
Skapa en struct med en vanlig title och en bindning för värdet som ska växlas av och på.
struct ToggleRow: View {
let title: String
@Binding var isOn: Bool
var body: some View { Text("Placeholder") }
}Bygg body
I body visar en enda Toggle titeln och skriver genom bindningen när användaren trycker på den.
var body: some View {
Toggle(title, isOn: $isOn)
.padding()
}Använd den i en överordnad vy
Den överordnade vyn äger inställningen med @State, lägger sedan till raden och skickar värdet med ett dollartecken.
struct SettingsView: View {
@State private var notify = true
var body: some View { ToggleRow(title: "Notify", isOn: $notify) }
}Återanvänd den överallt
Lägg nu till tio inställningar med tio rader, där varje rad är bunden till sitt eget tillstånd. En liten vy som återanvänds på hela skärmen.
ToggleRow(title: "Sound", isOn: $sound)
ToggleRow(title: "Vibrate", isOn: $vibrate)Den överordnade vyn ser varje ändring
Ändra valfri rad så uppdateras motsvarande @State i den överordnade vyn direkt. Den överordnade vyn kan reagera på det nya värdet med en gång.
Text(notify ? "On" : "Off")
.foregroundStyle(notify ? .green : .gray)Håll den underordnade vyn enkel
Raden har inga åsikter om var datan finns. Den redigerar bara den bindning den fick, vilket gör den portabel.
Lägg till lite stil
Eftersom raden är en enda vy kan du utforma den en gång så att varje instans ser likadan ut. Enhetlighet får du på köpet. 💅
Toggle(title, isOn: $isOn)
.tint(.orange)
.font(.headline)Byt typ senare
Vill du i stället ha en rad för ett tal? Ändra bindningstypen, så fungerar samma mönster för alla redigerbara värden.
Små delar, stora appar
Återanvändbara, bindningsstyrda rader är ett sätt för riktiga appar att hålla sig välorganiserade. Sätt ihop många små redigerare till en ren inställningsskärm.
Snabb kontroll
Snabb kontroll av växlingsraden.
Sammanfattning: En återanvändbar redigerare
En underordnad vy med en @Binding blir en återanvändbar redigerare. Skicka in tillståndet med dollartecknet och lägg in den var som helst. 🎉
Lär dig Swift med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Bygg en återanvändbar Toggle-rad” gratis?
Ja – hela texten till ”Bygg en återanvändbar Toggle-rad” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i SwiftUI Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Bygg en återanvändbar Toggle-rad”?
Skapa en undervy som ändrar state i den överordnade vyn. Ni övar på SwiftUI Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig SwiftUI Academy?
Du behöver inga förkunskaper. Utbildningen i SwiftUI Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Bygg en återanvändbar Toggle-rad”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här SwiftUI Academy-lektionen?
Ja. Varje SwiftUI Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Varför underordnade vyer behöver @Binding
- Skicka ned en Binding
- Bygg en återanvändbar Toggle-rad
- @State jämfört med @Binding