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

안녕하세요.

 

이런 뷰가 있다고 했을 때,

 

 

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

 

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

 

 

---

 

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

 

 

 

 

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

 

 

 

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

 

 

 

 

 

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

 

 

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

 

 

---

 

이번 글은 여기서 마무리.