UIViewRepresentable: opakowywanie widoków UIKit
Implementowanie makeUIView, updateUIView i usuwanie widoków UIKit w SwiftUI.
UIViewRepresentable: opakowywanie widoków UIKit to bezpłatna lekcja Swift Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Swift Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Swift Academy zawiera 4 lekcji w sumie.
Dlaczego UIViewRepresentable
Wiele widoków UIKit nie ma jeszcze odpowiednika w SwiftUI. UIViewRepresentable pozwala używać widoków UIKit w SwiftUI.
import SwiftUI
import UIKit
struct WebView: UIViewRepresentable {
let url: URL
// ...
}Wymagane metody
Zaimplementuj makeUIView, aby utworzyć widok, oraz updateUIView, aby synchronizować zmiany stanu SwiftUI.
func makeUIView(context: Context) -> WKWebView {
WKWebView()
}
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.load(URLRequest(url: url))
}Pełny przykład WebView
Kompletny obiekt UIViewRepresentable opakowujący WKWebView w celu wyświetlania treści internetowych w SwiftUI.
struct WebView: UIViewRepresentable {
let url: URL
func makeUIView(context: Context) -> WKWebView { WKWebView() }
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.load(URLRequest(url: url))
}
}Używanie w SwiftUI
Używaj opakowanego widoku tak jak dowolnego widoku SwiftUI i stosuj do niego modyfikatory w zwykły sposób.
WebView(url: URL(string: "https://apple.com")!)
.frame(height: 400)
.cornerRadius(12)Przekazywanie danych
Przekazuj dane z SwiftUI do UIKit za pośrednictwem przechowywanych właściwości obiektu representable, aktualizowanych w updateUIView.
struct MapView: UIViewRepresentable {
var region: MKCoordinateRegion
func makeUIView(context: Context) -> MKMapView { MKMapView() }
func updateUIView(_ uiView: MKMapView, context: Context) {
uiView.setRegion(region, animated: true)
}
}Usuwanie widoków UIKit
Zaimplementuj opcjonalną metodę dismantleUIView, aby zwalniać zasoby, takie jak obserwatory, gdy widok zostanie usunięty.
static func dismantleUIView(_ uiView: WKWebView, coordinator: Coordinator) {
uiView.stopLoading()
}Parametr Context
Parametr context zapewnia dostęp do koordynatora, środowiska i transakcji animacji.
func updateUIView(_ uiView: MKMapView, context: Context) {
print(context.environment.colorScheme) // .light or .dark
}Wartości środowiska w UIViewRepresentable
Odczytuj wartości środowiska SwiftUI z context.environment, aby dostosować konfigurację UIKit.
if context.environment.colorScheme == .dark {
uiView.overrideUserInterfaceStyle = .dark
}Ustalanie rozmiaru widoków UIKit
UIViewRepresentable korzysta z wewnętrznego rozmiaru zawartości albo z modyfikatorów ramki SwiftUI. Zaimplementuj sizeThatFits, aby zastosować niestandardowy rozmiar.
func sizeThatFits(_ proposal: ProposedViewSize, uiView: WKWebView, context: Context) -> CGSize? {
CGSize(width: proposal.width ?? 300, height: 400)
}Unikanie efektów ubocznych w makeUIView
Zachowaj czystość metody makeUIView — powinna tylko tworzyć i konfigurować widok. Aktualizacje zależne od stanu umieść w updateUIView.
// WRONG:
func makeUIView(context: Context) -> MKMapView {
let v = MKMapView()
v.setRegion(region, animated: false) // belongs in updateUIView
return v
}Typowe opakowywane widoki
Typowe widoki UIKit opakowywane za pomocą UIViewRepresentable: WKWebView, MKMapView, UITextView, UIImagePickerController, AVPlayerLayer.
// UITextView with custom toolbar
struct RichTextEditor: UIViewRepresentable {
@Binding var text: String
// makeUIView, updateUIView, Coordinator...
}Szybkie sprawdzenie
Jaka metoda UIViewRepresentable jest wywoływana w celu zsynchronizowania stanu SwiftUI z widokiem UIKit po jego początkowym utworzeniu?
Podsumowanie lekcji
UIViewRepresentable wymaga makeUIView (utworzenie raz) oraz updateUIView (synchronizacja przy zmianie stanu). Użyj context.environment, aby dostosować wygląd. Zwalniaj zasoby w dismantleUIView. Stosuj modyfikatory ramki SwiftUI do kontrolowania rozmiaru.
Ucz się Swift dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 122
- Lekcje
- 409
Często zadawane pytania
Czy lekcja „UIViewRepresentable: opakowywanie widoków UIKit” jest bezpłatna?
Tak — pełny tekst „UIViewRepresentable: opakowywanie widoków UIKit” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Swift Academy, przejdź na CoddyKit PRO. Kurs Swift Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „UIViewRepresentable: opakowywanie widoków UIKit”?
Implementowanie makeUIView, updateUIView i usuwanie widoków UIKit w SwiftUI. Ćwiczysz Swift Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Swift Academy?
Nie wymagamy żadnego doświadczenia. Swift Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „UIViewRepresentable: opakowywanie widoków UIKit”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Swift Academy?
Tak. Każda lekcja Swift Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- UIViewRepresentable: opakowywanie widoków UIKit
- Wzorzec Coordinator do komunikacji z delegatem
- UIViewControllerRepresentable
- UIHostingController: SwiftUI wewnątrz UIKit