SwiftUI

frame 수식어를 2번 적용하면?

Phililip
728x90

frame 수식어에 대해 잘못 알고 있었던 것 같아서, 관련해서 내용 정리해보려고 합니다.

 


frame(width:height:alignment:) 수식어를 사용하면 영역 크기를 고정 크기(fixed size)로 설정할 수 있습니다.

 

그리고 Circle 같은 뷰들은 해당 뷰가 위치한 영역 크기만큼 딱 맞게 설정됩니다.

 

 

그래서 아래 예시처럼 Circle이랑 frame 수식어를 같이 사용하면 50x50 짜리 원이 생깁니다.

 

 

이번엔 50x50짜리 Circle 뷰에 추가 frame 수식어로 200x200 크기를 줘볼게요.

 

 

Circle은 가능한 영역만큼 최대한 확장을 할 테니 200x200 짜리 원이 생길 줄 알았는데, 50x50 짜리 원은 그대로 유지되고 추가로 200x200 만큼 영역을 잡더라구요.

 

 

위 예시를 통해, Circle처럼 영역 최대 크기만큼 늘리는 뷰 같은 경우 한번 크기가 결정되면 변경되지 않는다는 것을 알게 되었습니다.

 

 

이번엔 50x50 Circle 뷰에 추가 frame 수식어로 200x200 크기와 함께 top alignment 설정을 줘봤어요.

 

 

 

현재 50x50 영역이 frame 수식어를 통해 200x200 크기로 확장되었다면, top 정렬을 하더라도 Circle 뷰가 가운데에 있는 것처럼 보여야 합니다.

(왜냐면 200x200 짜리 뷰를 200x200 영역에 top 정렬을 해봤자 변함이 없기 때문이죠.)

 

하지만 결과는 예상한 것과는 다르게 Circle 뷰가 top 정렬되었습니다.

 

 

즉, frame 수식어를 사용하면 현재 영역을 특정 크기로 확장시키는 것이 아니라 특정 크기만큼의 영역을 뷰 계층에 추가한다는 것을 알게 되었습니다.

 

 

 

그럼 한 가지 궁금한 점!!

 

frame 수식어를 2번 연속해서 사용하는 일이 있나?

 

뭐... 그건 구현하기 나름일 거라 생각하고, frame 수식어를 2번 연속해서 사용하는 경우도 종종 보이더라구요ㅠㅠ

 

간단하게는 아래처럼 활용할 수 있을 것 같습니다!

 

 

 

 

 


이번 글은 여기서 마무리.

 

 

 

반응형

'SwiftUI' 카테고리의 다른 글

RoundedCornerStyle  (0) 2023.03.26
컨텐츠 영역 높이에 따른 스크롤 가능 여부 설정  (0) 2023.03.26
SafeAreaRegions  (0) 2023.03.19
zIndex(_:)  (1) 2023.03.12
mask  (0) 2023.03.03