[SwiftUI] HStack 하위 요소 > 최대 높이로 동일하게 맞추기

 

HStack 안에 View 들 중에서 최대 높이의 뷰에 맞추고 싶었으나, 아래와 같이 나오는 문제를 만났다.

AS-IS 에서 TO-BE 로 바꾸고 싶다.

AS-IS	TO-BE

 

AS-IS

코드는 아래와 같다.
원인은 왼쪽은 가운데 Spacer() 가 들어간 VStack 에서 Spacer 로 인해 상위 뷰의 최대 높이만큼 늘어나버리기 때문!

VStack {
    HStack(alignment: .bottom) {
        VStack(spacing: 0) {
            Text("웅쓰")
            Spacer()
            Text("woongs")
        }
        .border(.blue, width: 1)

        Spacer()

        Rectangle()
            .foregroundColor(.orange)
            .frame(width: 100, height: 150)
    }
}
.frame(height: 300)

 

TO-BE

즉, HStack 의 높이를 Rectangle의 높이인 150까지 맞추고 그 안에서 VStack의 간격만 벌려주고 싶다면,
HStack 의 높이가 한 없이 늘어나지 않도록 사이즈를 고정해줘야 한다.

vertical의 높이를 고정하고 싶으므로 HStack에 아래 코드를 추가한다.

.fixedSize(horizontal: false, vertical: true)

결과 코드는 아래와 같다.

VStack {
    HStack(alignment: .bottom) {
        VStack(spacing: 0) {
            Text("웅쓰")
            Spacer()
            Text("woongs")
        }
        .border(.blue, width: 1)

        Spacer()

        Rectangle()
            .foregroundColor(.orange)
            .frame(width: 100, height: 150)
    }
    .fixedSize(horizontal: false, vertical: true)
}
.frame(height: 300)