Unter den vielen Eigenschaften der Text
Ansicht konnte ich keine Informationen zur Textausrichtung finden. Ich habe in einer Demo gesehen, dass RTL automatisch verarbeitet wird, und wenn Inhalte mithilfe von Ansichten platziert werden body
, werden sie immer automatisch zentriert.
Gibt es ein Konzept, das mir beim Layoutsystem fehlt, SwiftUI
und wenn nicht, wie kann ich die Eigenschaften für die Textausrichtung auf festlegen Text
?
Ab SwiftUI Beta 3 können Sie eine Textansicht mit dem Frame-Modifikator zentrieren:
Text("Centered") .frame(maxWidth: .infinity, alignment: .center)
quelle
Ich habe versucht, dies selbst zu verstehen, da andere Antworten hier erwähnen
Text.multilineTextAlignment(_:)
/VStack(alignment:)
/,frame(width:alignment:)
aber jede Lösung löst ein bestimmtes Problem. Letztendlich hängt es von der UI-Anforderung und einer Kombination davon ab.VStack(alignment:)
Das
alignment
hier ist für die inneren Ansichten in Bezug aufeinander.Das Spezifizieren
.leading
würde also alle inneren Ansichten so verknüpfen, dass ihre Führung miteinander ausgerichtet ist.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
In
frame(width:alignment:)
oderframe(maxWidth:alignment:)
steht dasalignment
für den Inhalt innerhalb der angegebenen Breite.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))
Die inneren Ansichten sind jeweils zueinander ausgerichtet, aber die Ansichten selbst sind nacheinander ausgerichtet
VStack
..multilineTextAlignment
Dies gibt die Ausrichtung des Textes im Inneren an und kann am besten gesehen werden, wenn mehrere Zeilen vorhanden sind. Andernfalls
frame(width:alignment)
wird die Breite automatisch angepasst und von den Standardeinstellungen beeinflusstalignment
.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))
Tests mit Kombinationen:
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))
quelle
Ich bin tatsächlich auf das Problem gestoßen, bei dem ich Text in einer einzelnen Zeile ausrichten musste. Was ich gefunden habe, um zu arbeiten, ist Folgendes:
Text("some text") .frame(alignment: .leading)
Wenn Sie dies mit dem Parameter für die Rahmenbreite kombinieren, erhalten Sie eine nette Textblockformatierung für Beschriftungen und dergleichen.
quelle
ich vermute
SwiftUI
wir sollten für solche Dinge Wrapper wie Stapel verwenden.Anstatt so etwas zu schreiben
Text("Hello World").aligned(.leading)
, wird Folgendes empfohlen:VStack(alignment: .leading) { Text("Hello World") }
quelle
Wenn Sie die Breite des Textes konstant halten möchten, wird die ".multilineTextAlignment (.leading)" erst wirksam, wenn nur eine Textzeile vorhanden ist.
Dies ist die Lösung, die für mich funktioniert hat:
struct LeftAligned: ViewModifier { func body(content: Content) -> some View { HStack { content Spacer() } } } extension View { func leftAligned() -> some View { return self.modifier(LeftAligned()) } }
Verwendung:
Text("Hello").leftAligned().frame(width: 300)
quelle
Wir müssen den Text ausrichten und nicht den Stapel, in dem er sich befindet.
multilineTextAlignment(.center)
Wenn ich also die Zeilengrenzen aufrufe und einstelle, kann ich sehen, dass die Texte zur Mitte ausgerichtet sind. Ich weiß nicht, warum ich die Zeilengrenzen festlegen muss. Ich dachte, es würde sich erweitern, wenn Sie einen großen Text haben.Text("blahblah") .font(.headline) .multilineTextAlignment(.center) .lineLimit(50)
quelle
Sie können die Ausrichtung für Vertical stackView als führend festlegen. Wie unten
VStack(alignment: .leading) { Text("Turtle Rock") .font(.title) Text("Joshua Tree National Park") .font(.subheadline) }
quelle
Ich möchte die Spacer () - Ansicht zum Ausrichten von Textblöcken verwenden. Dieses Beispiel zeigt Text auf der hinteren Seite:
HStack{ Spacer() Text("Wishlist") }
quelle