SwiftUI

텍스트 길이에 맞춰서 자식뷰의 width를 통일시키는 방법

Phililip
728x90

안녕하세요.

 

이런 뷰가 있다고 했을 때,

 

 

아래처럼 텍스트 길이의 맞춰서 너비를 통일시켜주고 싶을 때가 간혹 있습니다.

 

SwiftUI에서 이렇게 만드는 방법에 대해서 알아볼게요.

 

 


 

VStack을 활용해서 아래처럼 뷰를 만들었다고 해볼게요.

 

 

 

 

자식뷰의 너비가 모두 제각각이죠??

 

 

 

아래처럼 Text 뷰에 고정 너비를 줘서 모든 너비를 통일시켜줄 수는 있지만, 이런 경우 텍스트가 길어지거나 짧아지는 경우 텍스트에 딱 맞은 너비로 설정이 되지 않는 문제가 있어요.

 

 

 

 

 

텍스트 길이에 동적으로 대응하면서 모든 자식뷰들의 너비를 통일시키는 방법 중 하나는 maxWidthfixedSize를 활용하는 것입니다.

 

 

Text 뷰에 frame(maxWidth: .infinity) 수식어를 사용함으로써, 뷰의 너비를 최대한으로 늘려주고,

 

부모뷰 역할을 하는 VStack에 fixedSize 수식어를 사용해서 뷰를 이상적인(ideal) 크기로 고정시켜버리는 것이죠.

 

 

 

 

텍스트가 짧아져도 적당한 너비로 그려지게 됩니다.ㅎㅎ

 

 

 

 

 

 

그렇다고 만능은 아니지만, 잘 활용하면 유용할 것 같아요!!

 

👍 👍 👍

 

 

 

## 참고

- https://sudrocket.de/blog/2022/05/swiftui-equal-and-ideal-sizes/

- https://developer.apple.com/documentation/swiftui/link/fixedsize%28%29

 

 


 

이번 글은 여기서 마무리.

 

 

 

반응형

'SwiftUI' 카테고리의 다른 글

ScenePhase  (5) 2022.12.26
@FocusState  (0) 2022.12.11
View Identity와 transition 관계  (0) 2022.06.17
TimelineView  (0) 2022.06.17
trim  (0) 2022.06.06