De ultieme gids voor Swiftui voor nieuwe Ios-ontwikkelaars

De anatomie van een SwiftUI-weergave

Elk beeld in SwiftUI voldoet aan het protocol en implementeert een enkele vereiste berekende eigenschap: . De eigenschap beschrijft de inhoud en lay-out van het beeld. Hier is de minimale structuur:

import SwiftUI

struct ContentView: View {
 var body: some View {
 Text("Hello, SwiftUI!")
 }
}

Het retourtype is een opaque type .Het vertelt de compiler dat het lichaam een betontype retourneert dat voldoet aan , maar je hoeft niet precies te specificeren welke. Dit houdt je code beknopt en flexibel.

U kunt meerdere weergaven samenstellen met behulp van layout containers zoals , en . Bijvoorbeeld:

struct ContentView: View {
 var body: some View {
 VStack {
 Text("Welcome")
 .font(.largeTitle)
 Text("Start building with SwiftUI")
 .foregroundColor(.secondary)
 }
 .padding()
 }
}

Hier regelt de haar kinderen verticaal, en de modifier voegt ruimte toe rond de hele stack. Modifiers kunnen worden geketend op elke weergave om haar uiterlijk of gedrag aan te passen.

Weergaven en modifiers .. De kern bouwblokken

SwiftUI biedt een rijke bibliotheek van ingebouwde weergaven zoals , , , , , , ] en meer. Elk beeld kan worden aangepast met modifiers[]] . methoden die een nieuwe versie van het beeld met de toegepaste wijziging teruggeven. Gemeenschappelijke wijzigingen omvatten:

• .. stelt de lettertypestijl in
• ..rondt de hoeken van een vorm of afbeelding

Modifiers kunnen in elke volgorde worden toegepast, maar de volgorde is belangrijk omdat elke modifier de vorige weergave omwikkelt. Bijvoorbeeld, legt eerst de inhoud vast en schildert dan de achtergrond, wat resulteert in een rode rechthoek rond het gewatteerde gebied. Keer de volgorde om en je krijgt een rode achtergrond met tekst binnenin, geen extra opvulling.

Indelingscontainers

SwiftUI gebruikt drie primaire stapel containers om views te regelen:

• VStack
• HSTack
• ZStack . . . overlays kinderen op elkaar (diepgang orde)

Je kunt stapels willekeurig nesten om complexe indelingen te maken. Elke stack ondersteunt ook en ] parameters. Bijvoorbeeld:

VStack(alignment: .leading, spacing: 20) {
 Text("Top")
 HStack {
 Text("Left")
 Text("Right")
 }
 ZStack {
 Color.blue
 Text("Overlay")
 .foregroundColor(.white)
 }
 .frame(height: 100)
}

Dit produceert een verticale stack met een uitlijning, die een titel, een horizontaal paar en een blauwe rechthoek met witte tekst gecentreerd op de top bevat.

Staatsbeheer in SwiftUI

Een van de krachtigste functies van SwiftUI. In plaats van de UI handmatig bij te werken wanneer de gegevens veranderen, verklaar je de gegevens als status, en SwiftUI stuurt automatisch de betrokken weergaven opnieuw. Dit elimineert een hele klasse van bugs die gerelateerd zijn aan UI-synchronisatie.

SwiftUI biedt verschillende property wrappers voor het beheren van staat, elk geschikt voor verschillende scenario's:

Gebruik van @State voor lokale staat

wordt gebruikt voor eenvoudige waarden die uitsluitend tot één enkele weergave behoren, zoals een aan/uit-toestand van de aan/uit-toestand of een tekstveld dat de invoer van de waarde wijzigt. Wanneer de waarde verandert, wordt de weergave opnieuw opgeroepen. Voorbeeld:

struct ToggleExample: View {
 @State private var isOn = false

 var body: some View {
 Toggle("Enable Notifications", isOn: $isOn)
 .padding()
 }
}

Let op het voorvoegsel .. het creëert een bindend voor de staat, waardoor de de waarde kan lezen en schrijven. Altijd markeren met om te dwingen dat het intern naar het beeld gaat.

@Binding voor het passeren van staat Down

Wanneer een kind de status van een ouder moet wijzigen, gebruik je . Het kind ontvangt een binding aan de waarde en kan het wijzigen, en de ouder bekijkt automatisch updates. Bijvoorbeeld:

struct ParentView: View {
 @State private var showSheet = false

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

struct ChildView: View {
 @Binding var showSheet: Bool

 var body: some View {
 Button("Toggle Sheet") {
 showSheet.toggle()
 }
 }
}

Bindingen zijn de lijm die views in een hiërarchie verbindt zonder complexe delegatie- of terugroeppatronen in te voeren.

Observeerbare objecten en @StateObject

Voor complexere datamodellen die over meerdere weergaven worden gedeeld, maak een klasse die overeenkomt met . In de klasse markeer eigenschappen met zodat de triggerweergave wordt gewijzigd. Gebruik vervolgens in het beeld dat eigenaar is van het object. Voorbeeld:

class UserSettings: ObservableObject {
 @Published var username = "Guest"
}

struct SettingsView: View {
 @StateObject private var settings = UserSettings()

 var body: some View {
 VStack {
 Text("Hello, \(settings.username)")
 TextField("Username", text: $settings.username)
 .textFieldStyle(RoundedBorderTextFieldStyle())
 .padding()
 }
 }
}

Gebruik alleen bij het initialiseren van het object in die weergave. Als het object elders wordt aangemaakt, gebruik om het te observeren zonder eigenaar te worden.

@MilieuObject voor gedeelde staat

Wanneer u hetzelfde waarneembare object in veel weergaven moet injecteren zonder het door elke initialisatie te laten gaan, gebruik dan . Maak eerst het object in een ouderweergave (bijvoorbeeld het app-ingangspunt) en injecteer het met de ]-modifier. Elke afstammeling kan er dan toegang toe hebben door een eigenschap aan te geven met ]. Dit is vooral nuttig voor app-brede gegevens zoals gebruikersauthenticatie of instellingen.

@main
struct MyApp: App {
 @StateObject private var settings = UserSettings()

 var body: some Scene {
 WindowGroup {
 ContentView()
 .environmentObject(settings)
 }
 }
}

struct DetailView: View {
 @EnvironmentObject var settings: UserSettings

 var body: some View {
 Text(settings.username)
 }
}

Voor een diepere duik in staatsbeheer is de Apple documentatie over het beheer van de UI-staat een uitstekende bron.

Bouwen van uw eerste SwiftUI-app . . Een Note-Taking App

Laten we toepassen wat je geleerd hebt door het bouwen van een eenvoudige notitie-app. De app zal een lijst van notities tonen, laat de gebruiker toe om nieuwe toe te voegen, en tonen details wanneer een noot wordt afgetapt.

Het gegevensmodel instellen

Maak een nieuw Swift-bestand met de naam en definieer een model:

import Foundation

struct Note: Identifiable {
 let id = UUID()
 var title: String
 var content: String
}

Het protocol vereist een eigenschap, die SwiftUI gebruikt om items in een lijst te onderscheiden.

Lijstweergave aanmaken

Gebruik om een reeks noten en een te houden om ze weer te geven. Voeg een werkbalkknop toe om nieuwe noten te maken:

struct ContentView: View {
 @State private var notes = [
 Note(title: "Hello", content: "This is my first note.")
 ]

 var body: some View {
 NavigationStack {
 List {
 ForEach(notes) { note in
 NavigationLink(destination: NoteDetailView(note: note)) {
 Text(note.title)
 }
 }
 .onDelete(perform: removeNote)
 }
 .navigationTitle("Notes")
 .toolbar {
 ToolbarItem(placement: .navigationBarTrailing) {
 Button(action: addNote) {
 Image(systemName: "plus")
 }
 }
 }
 }
 }

 private func addNote() {
 notes.append(Note(title: "New Note", content: ""))
 }

 private func removeNote(at offsets: IndexSet) {
 notes.remove(atOffsets: offsets)
 }
}

Let op het gebruik van (iOS 16+) voor navigatie en om een detailweergave te pushen. De modifier maakt het mogelijk om te swipe-to-delete.

Navigatie en detailweergave toevoegen

Maak een nieuw bestand dat een nodig heeft en het bewerken toelaat. Voor kortstondigheid tonen we de titel en inhoud in alleen-lezen modus. U kunt het later uitbreiden met bindingen om het bewerken mogelijk te maken.

struct NoteDetailView: View {
 let note: Note

 var body: some View {
 VStack(alignment: .leading, spacing: 16) {
 Text(note.title)
 .font(.title)
 Text(note.content)
 .font(.body)
 .foregroundColor(.secondary)
 Spacer()
 }
 .padding()
 .navigationTitle("Note")
 }
}

Voer de app in de simulator of voorbeeld. U zult een lijst van notities, kunt u nieuwe toevoegen, tik op om details te bekijken, en swipe te verwijderen. Deze basisapp toont Lijst, NavigationStack, status, en gegevensstroom .. alle kern SwiftUI patronen.

Debuggen en voorbeeldbestanden

SwiftUI

• Ontbrekende waardoor views de randen raken.
• Onjuiste volgorde van de wijzigingen (bv. achtergrond voor het opvullen).
• Gebruik zonder het object te initialiseren.

U kunt ook statements toevoegen in uw of in knoppen om statuswijzigingen te verifiëren. Voor runtime debuggen kunt u de Simulators gebruiken om de weergavehiërarchie te bekijken en te controleren op layoutconflicten.

struct ContentView_Previews: PreviewProvider {
 static var previews: some View {
 Group {
 ContentView()
 .previewDevice("iPhone 15 Pro")
 ContentView()
 .previewDevice("iPhone SE (3rd generation)")
 }
 }
}