Les fondamentaux de GeometryReader
Mesurez l’espace disponible pour dimensionner le contenu.
Les fondamentaux de GeometryReader est une leçon SwiftUI 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 SwiftUI Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours SwiftUI Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Measuring Space
Sometimes a view needs to know how big its slot is. GeometryReader hands you the exact size and position of the space it occupies. 📐
It Is a Container
A GeometryReader is a view whose body is a closure receiving a proxy that describes the available space.
GeometryReader { proxy in
Text("Hi")
}The Proxy
That closure parameter is a GeometryProxy. It carries the size, safe-area insets, and frame of the reader.
GeometryReader { proxy in
let w = proxy.size.width
Color.blue.frame(width: w)
}Reading the Size
The most common move is proxy.size, a CGSize giving you the width and height you can fill.
GeometryReader { proxy in
Text("\(proxy.size.width)")
}Half the Width
Use the measured width for proportional sizing, like making a bar exactly half of the available width.
GeometryReader { proxy in
Color.green
.frame(width: proxy.size.width / 2)
}It Fills by Default
A GeometryReader greedily takes all the space its parent offers, so its children align to the top-left unless you center them.
Centering Content
Because content pins top-left, wrap it or add a frame with alignment to center children inside the reader.
GeometryReader { proxy in
Text("Center")
.frame(width: proxy.size.width,
height: proxy.size.height)
}Global Coordinates
Ask for a view position in the window with proxy.frame(in: .global), handy for scroll effects and overlays.
let f = proxy.frame(in: .global)
Text("\(f.minY)")Safe Area Insets
The proxy also exposes safeAreaInsets, so you can respect notches and home indicators in custom layouts.
let top = proxy.safeAreaInsets.topUse It Sparingly
A GeometryReader changes layout behavior, so reach for it only when you truly need measurements, not as a default wrapper. ⚠️
Scroll-Driven Effects
Combined with a ScrollView, reading each item frame lets you build parallax and fade effects tied to scroll position.
Quick Check
Recall what the closure hands you.
Recap
You can now read available space with GeometryReader, size views proportionally, and read frames for scroll-aware effects. 🎉
Questions Fréquemment Posées
La leçon « Les fondamentaux de GeometryReader » est-elle gratuite ?
Oui — le texte complet de « Les fondamentaux de GeometryReader » 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 SwiftUI Academy, passe à CoddyKit PRO. Le cours SwiftUI Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Les fondamentaux de GeometryReader » ?
Mesurez l’espace disponible pour dimensionner le contenu. Tu pratiques SwiftUI 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 SwiftUI Academy ?
Aucune expérience préalable n'est requise. SwiftUI 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 « Les fondamentaux de GeometryReader » ?
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 SwiftUI Academy ?
Oui. Chaque leçon SwiftUI 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
- Les fondamentaux de GeometryReader
- Guides d’alignement personnalisés
- Le protocole de disposition
- Créer une disposition fluide