UIViewRepresentable : intégrer des vues UIKit
Implémenter makeUIView, updateUIView et le démontage de vues UIKit dans SwiftUI.
UIViewRepresentable : intégrer des vues UIKit est une leçon Swift Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Swift Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Swift Academy comprend 4 leçons au total.
Pourquoi UIViewRepresentable ?
De nombreuses vues UIKit n’ont pas encore d’équivalent SwiftUI. UIViewRepresentable fait le pont entre les vues UIKit et SwiftUI.
import SwiftUI
import UIKit
struct WebView: UIViewRepresentable {
let url: URL
// ...
}Méthodes requises
Implémentez makeUIView pour créer la vue et updateUIView pour synchroniser les changements d’état de SwiftUI.
func makeUIView(context: Context) -> WKWebView {
WKWebView()
}
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.load(URLRequest(url: url))
}Exemple complet de WebView
Un UIViewRepresentable complet qui encapsule WKWebView pour afficher du contenu web dans SwiftUI.
struct WebView: UIViewRepresentable {
let url: URL
func makeUIView(context: Context) -> WKWebView { WKWebView() }
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.load(URLRequest(url: url))
}
}Utiliser dans SwiftUI
Utilisez la vue encapsulée comme n’importe quelle vue SwiftUI et appliquez normalement les modificateurs.
WebView(url: URL(string: "https://apple.com")!)
.frame(height: 400)
.cornerRadius(12)Transmettre des données
Transmettez les données de SwiftUI à UIKit par l’intermédiaire des propriétés stockées du représentable, mises à jour dans updateUIView.
struct MapView: UIViewRepresentable {
var region: MKCoordinateRegion
func makeUIView(context: Context) -> MKMapView { MKMapView() }
func updateUIView(_ uiView: MKMapView, context: Context) {
uiView.setRegion(region, animated: true)
}
}Démonter les vues UIKit
Implémentez la méthode facultative dismantleUIView pour libérer les ressources, comme les observateurs, lorsque la vue est supprimée.
static func dismantleUIView(_ uiView: WKWebView, coordinator: Coordinator) {
uiView.stopLoading()
}Paramètre context
Le context permet d’accéder au coordinateur, à l’environnement et à la transaction d’animation.
func updateUIView(_ uiView: MKMapView, context: Context) {
print(context.environment.colorScheme) // .light or .dark
}Valeurs d’environnement dans UIViewRepresentable
Lisez les valeurs d’environnement de SwiftUI depuis context.environment afin d’adapter la configuration UIKit.
if context.environment.colorScheme == .dark {
uiView.overrideUserInterfaceStyle = .dark
}Dimensionner les vues UIKit
UIViewRepresentable utilise la taille intrinsèque du contenu ou les modificateurs de cadre de SwiftUI. Implémentez sizeThatFits pour personnaliser le dimensionnement.
func sizeThatFits(_ proposal: ProposedViewSize, uiView: WKWebView, context: Context) -> CGSize? {
CGSize(width: proposal.width ?? 300, height: 400)
}Éviter les effets secondaires dans makeUIView
Gardez makeUIView pur : contentez-vous de créer et de configurer la vue. Placez les mises à jour liées à l’état dans updateUIView.
// WRONG:
func makeUIView(context: Context) -> MKMapView {
let v = MKMapView()
v.setRegion(region, animated: false) // belongs in updateUIView
return v
}Vues couramment encapsulées
Vues UIKit généralement encapsulées avec UIViewRepresentable : WKWebView, MKMapView, UITextView, UIImagePickerController et AVPlayerLayer.
// UITextView with custom toolbar
struct RichTextEditor: UIViewRepresentable {
@Binding var text: String
// makeUIView, updateUIView, Coordinator...
}Vérification rapide
Quelle méthode de UIViewRepresentable est appelée pour synchroniser l’état de SwiftUI avec la vue UIKit après sa création initiale ?
Récapitulatif de la leçon
UIViewRepresentable nécessite makeUIView (création unique) et updateUIView (synchronisation lors des changements d’état). Utilisez context.environment pour adapter l’apparence. Libérez les ressources dans dismantleUIView. Appliquez les modificateurs de cadre SwiftUI pour contrôler le dimensionnement.
Apprends Swift avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 122
- Leçons
- 409
Questions Fréquemment Posées
La leçon « UIViewRepresentable : intégrer des vues UIKit » est-elle gratuite ?
Oui — le texte complet de « UIViewRepresentable : intégrer des vues UIKit » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Swift Academy, passe à CoddyKit PRO. Le cours Swift Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « UIViewRepresentable : intégrer des vues UIKit » ?
Implémenter makeUIView, updateUIView et le démontage de vues UIKit dans SwiftUI. Tu pratiques Swift Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Swift Academy ?
Aucune expérience préalable n'est requise. Swift Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « UIViewRepresentable : intégrer des vues UIKit » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Swift Academy ?
Oui. Chaque leçon Swift Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- UIViewRepresentable : intégrer des vues UIKit
- Modèle Coordinator pour la communication avec les délégués
- UIViewControllerRepresentable
- UIHostingController : SwiftUI dans UIKit