Próbowałem to zrozumieć, ponieważ inne odpowiedzi tutaj wspominają Text.multilineTextAlignment(_:)
/ VStack(alignment:)
/ frame(width:alignment:)
ale każde rozwiązanie rozwiązuje konkretny problem. Ostatecznie zależy to od wymagań dotyczących interfejsu użytkownika i ich kombinacji.
VStack(alignment:)
alignment
Tutaj jest dla wewnętrznych widoków w odpowiedni dla siebie.
Zatem sprecyzowanie .leading
skojarzyłoby wszystkie wewnętrzne poglądy tak, aby ich prowadzenie było wyrównane ze sobą.
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
W frame(width:alignment:)
lub frame(maxWidth:alignment:)
The alignment
jest za treści w obrębie danej szerokości.
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))
Wewnętrzne widoki są wyrównane prowadząc odpowiednio względem siebie, ale same widoki są wyrównane na końcu odpowiednio do VStack
.
.multilineTextAlignment
Określa to wyrównanie tekstu wewnątrz i jest najlepiej widoczne, gdy istnieje wiele wierszy bez zdefiniowanej definicji frame(width:alignment)
, szerokość jest automatycznie dostosowywana i wpływa na nią domyślne 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))
Testy z kombinacjami:
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))