Alignement du texte dans SwiftUI : guide complet avec exemples

Alignement du texte dans SwiftUI : du débutant au pro

Avez-vous déjà fixé l'écran en essayant de comprendre pourquoi votre texte multiligne dans SwiftUI s'obstine à rester aligné à gauche, alors que vous avez clairement spécifié .center ? Une douleur familière. La question "SwiftUI text-alignment" accumule des milliers de vues sur Stack Overflow pour une bonne raison — c'est l'un de ces petits détails qui peuvent ruiner toute une interface.

Dans cet article, nous allons explorer toutes les façons de gérer l'alignement du texte dans SwiftUI. Je vais vous montrer non seulement les techniques de base, mais aussi des astuces qui vous feront gagner des heures de recherche. C'est parti !

1. Les bases : .multilineTextAlignment

Le premier modificateur que vous rencontrerez est multilineTextAlignment. Il fonctionne spécifiquement avec le texte multiligne, mais en réalité, il affecte également le texte sur une seule ligne. Regardons un exemple :

import SwiftUI\n\nstruct AlignmentExample: View {\n    var body: some View {\n        VStack(spacing: 20) {\n            Text("Ce texte est aligné à gauche. Par défaut dans SwiftUI, le texte est collé au côté gauche.")\n                .multilineTextAlignment(.leading)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n            \n            Text("Ce texte est centré. Idéal pour les titres et les citations.")\n                .multilineTextAlignment(.center)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n            \n            Text("Ce texte est aligné à droite. Souvent utilisé dans l'internationalisation pour les langues qui s'écrivent de droite à gauche.")\n                .multilineTextAlignment(.trailing)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n        }\n        .padding()\n    }\n}

Important : multilineTextAlignment ne fonctionne qu'à l'intérieur d'un conteneur qui limite la largeur du texte. Si vous ne définissez pas de frame, le texte occupera toute la largeur disponible et l'alignement risque de ne pas fonctionner comme prévu.

2. Différence entre .leading et .left

Dans SwiftUI, il y a .leading, .trailing, .left et .right. Quelle est la différence ?

\n
• .leading / .trailing — des valeurs adaptatives. Dans les langues qui s'écrivent de gauche à droite (anglais, russe), .leading = .left, .trailing = .right. En arabe ou en hébreu, c'est l'inverse.
\n
• .left / .right — une fixation rigide au côté. Elles ne changent pas en fonction de la locale.
\n

Apple recommande d'utiliser .leading et .trailing pour prendre en charge l'internationalisation. Mais si vous avez besoin de "toujours à gauche", utilisez .left.

3. Alignement du texte à l'intérieur des conteneurs

Souvent, le problème ne vient pas du Text lui-même, mais de la façon dont il est disposé à l'intérieur d'un VStack, HStack ou ZStack. C'est là qu'intervient le paramètre alignment des stacks.

3.1. VStack et HStack

struct StackAlignmentExample: View {\n    var body: some View {\n        VStack(alignment: .leading, spacing: 10) {\n            Text("Titre")\n                .font(.title)\n            Text("Ceci est une description qui doit commencer à la même bordure gauche que le titre. Sans alignement explicite du stack, le texte peut se décaler.")\n                .font(.body)\n        }\n        .frame(maxWidth: 300)\n        .padding()\n        .background(Color.yellow.opacity(0.3))\n        .cornerRadius(10)\n    }\n}

Astuce : Si vous voulez que tout le texte à l'intérieur d'un VStack soit centré, mais que chaque élément puisse avoir son propre alignement, combinez l'alignment du stack et le multilineTextAlignment des spécifiques.