[iOS - SwiftUI] VStack, HStack을 사용할 때 주의할 점 (Stack 패딩, Stack 사이즈 고정)

VStack, HStack 사용 할 때 주의할 점

• VStack, HStack은 내부 콘텐츠 크기에 의해서, 자기 자신의 크기가 결정되는 컴포넌트
• 대부분 실수하는 것이 VStack, HStack에 패딩을 넣거나 사이즈를 고정하는 경우가 존재

ex) VStack에 width를 120으로 고정하는 경우

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("start")
            
            VStack {
                Text("1")
                Text("2")
                Text("3")
                Text("4")
                Text("5")
            }
            .frame(width: 120) // <-
            .background(Color.green)
            
            Text("end")
        }
    }
}

120으로 고정

• 위 UI를 보면 정상적으로 120으로 고정된 것 같지만, 만약 내부 콘텐츠의 사이즈가 120보다 커지면 충돌이 발생하는데 이때 뷰가 복잡해지면 버그가 많이 생길 수 있으므로 주의할 것
  • 만약 120으로 고정시키고 싶다면, frame(maxWidth:)를 사용

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("start")
            
            VStack {
                Text("1")
                Text("2")
                Text("3")
                Text("4")
                Text("5")
                Text("1234567891234512345678")
            }
            .frame(maxWidth: 120)
            .background(Color.green)
            
            Text("end")
        }
    }
}

frame(maxWidth:)를 사용

• 만약 120이상으로 하고 싶은 경우는 내부에 120width인 투명뷰를 넣어서 세팅

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("start")
            
            VStack {
                Color.clear
                    .frame(width: 120, height: 0)
                Text("1")
                Text("2")
                Text("3")
                Text("4")
                Text("5")
            }
            .background(Color.green)
            
            Text("end")
        }
    }
}

결론

• VStack, HStack 모두 내부 크기에 의해서 외부 크기가 결정되는 컴포넌트이며, 예외적으로 frame을 고정시키고 싶을땐 frame(maxWidth:)나 frame(maxHeight:) 함수를 사용하고 그게 아니라면 내부 콘텐츠에 투명 뷰를 넣어서 크기를 조절할 것