Alignement du texte de SwiftUI

Question

Parmi les nombreuses propriétés de la Text Je n'ai trouvé aucune information relative à l'alignement du texte. J'ai vu dans une démo qu'il gère automatiquement le RTL, et lorsque l'on place des éléments en utilisant la vue body il le centre toujours automatiquement.

Est-ce qu'il y a un concept qui m'échappe concernant le système de mise en page dans SwiftUI et si ce n'est pas le cas, comment puis-je définir les propriétés d'alignement du texte à l'aide de l'option Text ?

Answer 1

Vous pouvez le faire via le modificateur .multilineTextAlignment(.center) .

Documentation Apple

Answer 2

Depuis la version bêta 3 de SwiftUI, vous pouvez centrer une vue de texte avec le modificateur de cadre :

Text("Centered")
    .frame(maxWidth: .infinity, alignment: .center)

Answer 3

J'essayais de comprendre moi-même ce que d'autres réponses mentionnent ici. Text.multilineTextAlignment(_:) / VStack(alignment:) / frame(width:alignment:) mais chaque solution résout un problème spécifique. En fin de compte, cela dépend des exigences de l'interface utilisateur et d'une combinaison de celles-ci.

---

VStack(alignment:)

El alignment ici, il s'agit des vues intérieures respectives des uns et des autres.
Ainsi, en spécifiant .leading associerait tous les points de vue intérieurs pour qu'ils soient alignés les uns avec les autres.

VStack(alignment: .leading, spacing: 6) {
  Text("Lorem ipsum dolor")
        .background(Color.gray.opacity(0.2))
  Text("sit amet")
        .background(Color.gray.opacity(0.2))
}
.background(Color.gray.opacity(0.1))

---

.frame

En frame(width:alignment:) ou frame(maxWidth:alignment:) le alignment est pour le contenu dans la largeur donnée.

VStack(alignment: .leading, spacing: 6) {
  Text("Lorem ipsum dolor")
      .background(Color.gray.opacity(0.2))
  Text("sit amet")
      .background(Color.gray.opacity(0.2))
}
.frame(width: 380, alignment: .trailing)
.background(Color.gray.opacity(0.1))

Les vues intérieures sont alignées en tête les unes par rapport aux autres, mais les vues elles-mêmes sont alignées en queue par rapport aux vues intérieures. VStack .

---

.multilineTextAlignment

Ceci spécifie l'alignement du texte à l'intérieur et peut être vu de façon optimale lorsqu'il y a plusieurs lignes, sinon sans une ligne définie frame(width:alignment) la largeur est automatiquement ajustée et est affectée par la valeur par défaut de l'indicateur de largeur. alignment s.

VStack(alignment: .trailing, spacing: 6) {
  Text("0. automatic frame\n+ view at parent's specified alignment\n+ multilineTA not set by default at leading")
    .background(Color.gray.opacity(0.2))
  Text("1. automatic frame\n+ view at parent's specified alignment\n+ multilineTA set to center")
  .multilineTextAlignment(.center)
  .background(Color.gray.opacity(0.2))
  Text("2. automatic frame\n+ view at parent's specified alignment\n+ multilineTA set to trailing")
  .multilineTextAlignment(.trailing)
  .background(Color.gray.opacity(0.2))
}
.frame(width: 380, alignment: .trailing)
.background(Color.gray.opacity(0.1))

---

Essais avec des combinaisons :

VStack(alignment: .trailing, spacing: 6) {
  Text("1. automatic frame, at parent's alignment")
  .background(Color.gray.opacity(0.2))
  Text("2. given full width & leading alignment\n+ multilineTA at default leading")
  .frame(maxWidth: .infinity, alignment: .leading)
  .background(Color.gray.opacity(0.2))
  Text("3. given full width & center alignment\n+ multilineTA at default leading")
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("4. given full width & center alignment\n+ multilineTA set to center")
  .multilineTextAlignment(.center)
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("5. given full width & center alignment\n+ multilineTA set to trailing")
  .multilineTextAlignment(.trailing)
  .frame(maxWidth: .infinity, alignment: .center)
  .background(Color.gray.opacity(0.2))
  Text("6. given full width but no alignment\n+ multilineTA at default leading\n+ leading is based on content, looks odd sometimes as seen here")
  .frame(maxWidth: .infinity)
  .background(Color.gray.opacity(0.2))
}
.frame(width: 380)
.background(Color.gray.opacity(0.1))

Answer 4

J'ai en fait rencontré le problème où je devais aligner du texte sur une seule ligne. Voici ce que j'ai trouvé pour fonctionner :

Text("some text")
    .frame(alignment: .leading)

Si vous combinez ce paramètre avec celui de la largeur du cadre, vous pouvez obtenir un bon formatage des blocs de texte pour les étiquettes et autres.

Answer 5

Je suppose SwiftUI veut que nous utilisions des enveloppes comme les piles pour de telles choses.

Ainsi, au lieu d'écrire quelque chose comme Text("Hello World").aligned(.leading) les éléments suivants sont encouragés :

VStack(alignment: .leading) {
    Text("Hello World")
}