UIViewRepresentable: UIKit-Views einbinden
Implementieren Sie makeUIView, updateUIView und das Entfernen von UIKit-Views in SwiftUI.
UIViewRepresentable: UIKit-Views einbinden ist eine kostenlose Swift Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Swift Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum UIViewRepresentable?
Viele UIKit-Ansichten haben noch kein SwiftUI-Gegenstück. UIViewRepresentable bindet UIKit-Ansichten in SwiftUI ein.
import SwiftUI
import UIKit
struct WebView: UIViewRepresentable {
let url: URL
// ...
}Erforderliche Methoden
Implementieren Sie makeUIView, um die Ansicht zu erstellen, und updateUIView, um Änderungen am SwiftUI-Zustand zu übernehmen.
func makeUIView(context: Context) -> WKWebView {
WKWebView()
}
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.load(URLRequest(url: url))
}Vollständiges WebView-Beispiel
Ein vollständiges UIViewRepresentable, das WKWebView umschließt, um Webinhalte in SwiftUI anzuzeigen.
struct WebView: UIViewRepresentable {
let url: URL
func makeUIView(context: Context) -> WKWebView { WKWebView() }
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.load(URLRequest(url: url))
}
}In SwiftUI verwenden
Verwenden Sie die umschlossene Ansicht wie jede andere SwiftUI-Ansicht, und wenden Sie Modifier wie gewohnt an.
WebView(url: URL(string: "https://apple.com")!)
.frame(height: 400)
.cornerRadius(12)Daten übergeben
Übergeben Sie Daten von SwiftUI an UIKit über die gespeicherten Eigenschaften des Representable, die in updateUIView aktualisiert werden.
struct MapView: UIViewRepresentable {
var region: MKCoordinateRegion
func makeUIView(context: Context) -> MKMapView { MKMapView() }
func updateUIView(_ uiView: MKMapView, context: Context) {
uiView.setRegion(region, animated: true)
}
}UIKit-Ansichten aufräumen
Implementieren Sie optional dismantleUIView, um Ressourcen wie Beobachter freizugeben, wenn die Ansicht entfernt wird.
static func dismantleUIView(_ uiView: WKWebView, coordinator: Coordinator) {
uiView.stopLoading()
}Der Context-Parameter
Der context ermöglicht den Zugriff auf den Coordinator, die Umgebung und die Animationstransaktion.
func updateUIView(_ uiView: MKMapView, context: Context) {
print(context.environment.colorScheme) // .light or .dark
}Umgebungswerte in UIViewRepresentable
Lesen Sie SwiftUI-Umgebungswerte aus context.environment, um die UIKit-Konfiguration anzupassen.
if context.environment.colorScheme == .dark {
uiView.overrideUserInterfaceStyle = .dark
}UIKit-Ansichten dimensionieren
UIViewRepresentable verwendet die intrinsische Inhaltsgröße oder SwiftUI-Frame-Modifier. Implementieren Sie sizeThatFits für eine benutzerdefinierte Größenberechnung.
func sizeThatFits(_ proposal: ProposedViewSize, uiView: WKWebView, context: Context) -> CGSize? {
CGSize(width: proposal.width ?? 300, height: 400)
}Seiteneffekte in makeUIView vermeiden
Halten Sie makeUIView frei von Seiteneffekten – dort sollten Sie nur erstellen und konfigurieren. Zustandsabhängige Aktualisierungen gehören in updateUIView.
// WRONG:
func makeUIView(context: Context) -> MKMapView {
let v = MKMapView()
v.setRegion(region, animated: false) // belongs in updateUIView
return v
}Häufig eingebundene Ansichten
Typische UIKit-Ansichten, die mit UIViewRepresentable eingebunden werden: WKWebView, MKMapView, UITextView, UIImagePickerController, AVPlayerLayer.
// UITextView with custom toolbar
struct RichTextEditor: UIViewRepresentable {
@Binding var text: String
// makeUIView, updateUIView, Coordinator...
}Kurze Überprüfung
Welche Methode von UIViewRepresentable wird aufgerufen, um den SwiftUI-Zustand nach der erstmaligen Erstellung in die UIKit-Ansicht zu übernehmen?
Zusammenfassung der Lektion
UIViewRepresentable erfordert makeUIView (einmalig erstellen) und updateUIView (bei Zustandsänderungen synchronisieren). Verwenden Sie context.environment, um die Darstellung anzupassen. Führen Sie die Bereinigung in dismantleUIView durch. Verwenden Sie SwiftUI-Frame-Modifier, um die Größe zu steuern.
Häufig gestellte Fragen
Ist die Lektion „UIViewRepresentable: UIKit-Views einbinden“ kostenlos?
Ja — der vollständige Text von „UIViewRepresentable: UIKit-Views einbinden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Swift Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „UIViewRepresentable: UIKit-Views einbinden“?
Implementieren Sie makeUIView, updateUIView und das Entfernen von UIKit-Views in SwiftUI. Du übst Swift Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Swift Academy zu starten?
Keine Vorkenntnisse erforderlich. Swift Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „UIViewRepresentable: UIKit-Views einbinden“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Swift Academy-Lektion Code schreiben und ausführen?
Ja. Jede Swift Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- UIViewRepresentable: UIKit-Views einbinden
- Coordinator-Pattern für die Delegate-Kommunikation
- UIViewControllerRepresentable
- UIHostingController: SwiftUI in UIKit