SwiftUI | cornerRadius 모서리가 잘리는 문제

UI Bug (Corner Clipping)

Title Box에 Border를 주고 모서리를 둥글게 처리하고 싶었다.
그런데 모서리가 잘린다..
이래저래 순서도 바꿔봤는데 해결이 되지 않았따.

               HStack(){
                    Text("Title")
                        .padding()
                    TextField("ddd", text: $textInput)
                }
                
                .frame(height: 85)
                .border(Color.black)
                .cornerRadius(10)
                .padding()

해결

overlay를 사용해서 cornerRadius와 stroke를 설정해주는 방법이 있었다.

                HStack(){
                    Text("Title")
                        .padding()
                    TextField("ddd", text: $textInput)
                }
                .frame(height: 85)
                .overlay(
                            RoundedRectangle(cornerRadius: 10)
                                .stroke(Color.black, lineWidth: 1)
                        )
                .padding()

Why?

이유가 궁금해진다.

1. border랑 cornerRadius를 사용했을때는 왜 모서리가 사라지는걸까 ?

이런 현상을 Corner Clipping이라고 한다.
border를 사용해서 뷰에 직접 테두리를 적용하면,
View의 원형이 아닌, 경계에 border가 얻어지게 되는데
(View < Border : 미세하지만 frame의 사이즈가 border가 더 큼)
이때 cornerRadius를 적용하면 View보다 더 큰 Border는 짤리게되는것

2. overlay는 어떤개념일까 ?

기존 뷰 위에 berder를 겹쳐놓는 개념이다.
위에서 이야기한 Corner Clipping의 원인이
뷰의 경계에 border가 그려지는 것이였다면,
overlay는 기존 view위에 컨텐츠를 겹겹이 쌓는 개념이라
원본 레이아웃에 영향을 주지 않는다.