5 modifiers SwiftUI pour maitriser vos Sheets

Les sheets font partie des patterns les plus courants dans les apps iOS, et pourtant la plupart des devs continuent de bricoler des solutions custom. SwiftUI fournit cinq modifiers de presentation qui gerent la taille, les indicateurs, les arriere-plans et l'adaptation, sans passer par UIKit.

.presentationDetents

Definit les paliers de hauteur auxquels la sheet se cale quand l'utilisateur la fait glisser. On passe un tableau de valeurs de detent et le systeme gere tout le comportement de snap.

@State private var showSheet = false
Button("Show sheet") {
   showSheet = true
}
.sheet(isPresented: $showSheet) {
   SheetContent()
      .presentationDetents([
         .fraction(0.3),
         .medium,
         .large
      ])
}

Trois lignes, trois paliers de hauteur. On peut combiner .medium, .large, .fraction(_:) et .height(_:) librement. Le système gère le snap entre chaque palier, pas de code de gesture custom, pas de calcul de frame manuel. Disponible depuis iOS 16.

.presentationDragIndicator

Controle l'affichage de la petite barre de prehension en haut de la sheet. Par defaut .automatic), SwiftUI la masque quand il n'y a qu'un seul detent, puisqu'il n'y a rien entre quoi naviguer. On la force avec .visible quand on veut signaler a l'utilisateur que la sheet peut etre fermee en swipant.

.sheet(isPresented: $show) {
    VStack {
      Text("Pull me down")
      Text("or swipe to dismiss")
   }
   .presentationDetents([.medium])
   .presentationDragIndicator(.visible)
}

La barre de prehension est un indicateur d'affordance. Sans elle, l'utilisateur ne sait pas forcement que la sheet peut etre redimensionnee ou fermee par un swipe. Un mot, zero travail de design. Disponible depuis iOS 16.

.presentationSizing(.fitted)

Dimensionne automatiquement la sheet pour epouser son contenu. Pas besoin de detents pour les petites confirmations, les toasts ou les pickers; iOS mesure le contenu et adapte la taille de la sheet.

.sheet(isPresented: $show) {
   VStack(spacing: 14) { 
      Image(systemName: "checkmark")
      Text("Success")
      Button("OK") { show = false }
   }
   .padding(28)
   .presentationSizing(.fitted)
}

Ça élimine le problème de la modale demi-écran pour un simple bouton ou un message court. Les autres options de sizing incluent .automatic, .page et .form. Disponible depuis iOS 18.

.presentationCompactAdaptation

Sur iPad, les popovers restent des popovers. Sur iPhone, SwiftUI les convertit en sheets par defaut. Ce modifier permet de surcharger ce comportement. On passe .none pour garder un popover en tant que vrai popover sur les classes de taille compactes.

Button("Filter") {
   showPopover = true
}
.popover(isPresented: $showPopover) {
   VStack(alignment: .leading) {
      Text("Newest")
      Text("Oldest")
      Text("Most popular")
   }
   .padding()
   .presentationCompactAdaptation(.none)
}

Sans .none, le popover devient une sheet sur iPhone, une modale demi-écran juste pour afficher trois options de filtre. Avec .none, il reste ancre au bouton, petit et contextuel. Les autres options incluent .sheet et .fullScreenCover. Disponible depuis iOS 16.4.

.presentationBackground

Remplace le fond blanc par defaut de la sheet par un material, une couleur unie ou n'importe quelle vue SwiftUI. C'est comme ca qu'on obtient des sheets translucides sans passer par UIKit.

.sheet(isPresented: $show) {
   SheetContent()
      .presentationDetents([.medium])
      .presentationBackground(.ultraThinMaterial)
}

On peut aussi passer un view builder pour un controle total :

.presentationBackground {
   LinearGradient(
      colors: [.cyan, .blue],
      startPoint: .top,
      endPoint: .bottom
   )
}

Les arriere-plans en material laissent transparaitre le contenu derriere la sheet, ce qui est utile pour les overlays de carte, les pickers de media ou tout contexte ou l'utilisateur a besoin de voir ce qu'il y a en dessous. Disponible depuis iOS 16.4.

À retenir

Les detents gèrent les paliers de hauteur, le drag indicator signale l'intéractivite, le fitted sizing élimine le problème de modale surdimensionnée, l'adaptation compacte garde les popovers honnêtes sur iPhone, et les presentation backgrounds permettent la translucidité. Arrêtez de bricoler des hacks pour vos sheets, laissez le système faire le travail !