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() // VStack bottom spacer
            }

            Spacer() // HStack trailing 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
            )
    }

}

---

디스플레이: