Swift 5.2 및 iOS 13.4를 사용하면 필요에 따라 다음 예제 중 하나를 사용 VStack하여 최상위 제약 조건 및 전체 크기 프레임 에 맞출 수 있습니다 .
아래의 코드 스 니펫은 모두 동일한 디스플레이를 표시하지만 뷰 계층을 디버깅하는 동안 나타날 VStack수있는 View요소 의 유효 프레임 이나 수를 보장하지는 않습니다 .
1. 사용 frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)방법
가장 간단한 방법은 VStack최대 너비와 높이로 프레임을 설정 하고 필요한 정렬을 전달하는 것입니다 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)
}
}
또는에 대해 특정 정렬을 사용하여 최대 프레임을 설정 View하는 것이 코드베이스의 일반적인 패턴 인 경우 확장 메서드를 만들 수 있습니다 View.
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. Spacers를 사용 하여 강제 정렬
당신은 추가 할 수 있습니다 VStack내부의 전체 크기 HStack와 사용 후행과 하단 Spacer당신의 강제들 VStack최고 선두 정렬 :
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. ZStack및 전체 크기 배경 사용View
이 예에서는 VStackZStack 상단 행간 정렬이있는 내부 . Color보기를 사용하여 최대 너비 및 높이를 설정 하는 방법에 유의하십시오 .
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. 사용 GeometryReader
GeometryReader다음과 같은 선언이 있습니다 .
콘텐츠를 자체 크기 및 좌표 공간의 함수로 정의하는 컨테이너보기입니다. [...]이보기는 부모 레이아웃에 유연한 선호 크기를 반환합니다.
아래 코드 스 니펫은 최상위 제약 조건 및 전체 크기 프레임 GeometryReader에 맞추는 데 사용하는 방법을 보여줍니다 VStack.
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. 사용 overlay(_:alignment:)방법
VStack기존 전체 크기 위에 상단 선행 제약 조건 을 맞추려면 다음 방법 View을 사용할 수 있습니다 overlay(_:alignment:).
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
)
}
}
디스플레이:
