Dzięki Swift 5.2 i iOS 13.4, w zależności od potrzeb, możesz użyć jednego z poniższych przykładów, aby dopasować swoje VStack
do najważniejszych wiodących ograniczeń i pełnowymiarowej ramki.
Zwróć uwagę, że poniższe fragmenty kodu powodują ten sam ekran, ale nie gwarantują efektywnej klatki VStack
ani liczby View
elementów, które mogą pojawić się podczas debugowania hierarchii widoków.
1. Za pomocą frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)
metody
Najprostszym podejściem jest ustawienie ramy VStack
z maksymalną szerokością i wysokością, a także przejście wymaganego wyrównania w frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)
:
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .topLeading
)
.background(Color.red)
}
}
Alternatywnie, jeśli ustawienie maksymalnej klatki z określonym wyrównaniem dla twojego View
s jest częstym wzorcem w twoim kodzie, możesz utworzyć View
dla niego metodę rozszerzenia :
extension View {
func fullSize(alignment: Alignment = .center) -> some View {
self.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: alignment
)
}
}
struct ContentView : View {
var body: some View {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
.fullSize(alignment: .topLeading)
.background(Color.red)
}
}
2. Użycie Spacer
s do wymuszenia wyrównania
Możesz osadzić swoje VStack
wnętrze w pełnym rozmiarze HStack
i użyć końcowych i dolnych, Spacer
aby wymusić VStack
wyrównanie górnego wiodącego:
struct ContentView: View {
var body: some View {
HStack {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
Spacer()
}
Spacer()
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity
)
.background(Color.red)
}
}
3. Używając ZStack
ai pełnowymiarowego tłaView
Ten przykład pokazuje, jak osadzić VStack
wewnątrz a, ZStack
które ma górne wyrównanie wiodące. Zwróć uwagę, jak Color
widok jest używany do ustawiania maksymalnej szerokości i wysokości:
struct ContentView: View {
var body: some View {
ZStack(alignment: .topLeading) {
Color.red
.frame(maxWidth: .infinity, maxHeight: .infinity)
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
}
}
}
4. Korzystanie GeometryReader
GeometryReader
posiada następującą deklarację :
Widok kontenera, który definiuje zawartość jako funkcję własnego rozmiaru i przestrzeni współrzędnych. [...] Ten widok zwraca elastyczny preferowany rozmiar do układu nadrzędnego.
Poniższy fragment kodu pokazuje, jak używać go GeometryReader
do wyrównywania VStack
z najważniejszymi wiodącymi ograniczeniami i pełnowymiarową ramką:
struct ContentView : View {
var body: some View {
GeometryReader { geometryProxy in
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
.frame(
width: geometryProxy.size.width,
height: geometryProxy.size.height,
alignment: .topLeading
)
}
.background(Color.red)
}
}
5. Za pomocą overlay(_:alignment:)
metody
Jeśli chcesz wyrównać swoje VStack
z najważniejszymi wiodącymi ograniczeniami na szczycie istniejącego pełnego rozmiaru View
, możesz użyć overlay(_:alignment:)
metody:
struct ContentView: View {
var body: some View {
Color.red
.frame(
maxWidth: .infinity,
maxHeight: .infinity
)
.overlay(
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
},
alignment: .topLeading
)
}
}
Pokaz: