SwiftUI - HStack, VStack 자식 뷰 넓이 똑같이 만들기

SwiftUI 에서 VStack 이나 HStack 을 사용할 때 자식 뷰들의 넓이 혹은 높이를 똑같이 맞춰주고 싶은 경우가 많다. 그럴 땐 다음과 같이 frame 을 지정해주도록 하자!

 

 VStack(spacing:0) {
                Text("안녕!!!!")
                    .frame(maxHeight:.infinity) //maxHeight 속성을 .infinity 로 변경!
                    .background(Color.blue)
                Text("월드!!!!\n\n\n\n\n\n")
                    .frame(maxHeight:.infinity) //이하동문
                    .background(Color.red) 
            }

 

VStack 안의 Text 들의 높이가 똑같아 진 것을 확인할 수 있다. 만약 여기서 frame 속성을 뺀다면

위와 같이 높이가 서로 다른 것을 볼 수 있다.

 

HStack 도 마찬가지로 frame(maxWidth:.infinity) 를 작성하도록 하자

HStack (spacing: 0){
                Text("hello")
                    .frame(maxWidth:.infinity)
                    .background(Color.blue)
                Text("World!!!!!!!!!!!!!")
                    .frame(maxWidth : .infinity)
                    .background(Color.green)
                
            }

위 코드도 마찬가지로 frame 속성을 없애면, 다음과 같이 넓이가 다른 것을 볼 수 있다 .