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

안녕하세요.

 

이런 뷰가 있다고 했을 때,

 

 

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

 

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

 

 

---

 

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

 

	struct ContentView: View {
	let buttonTitles: [String] = [
	"마녀(魔女) Part2. The Other One",
	"범죄도시 2",
	"브로커",
	"버즈 라이트이어",
	"쥬라기 월드-도미니언",
	"닥터 스트레인지-대혼돈의 멀티버스",
	"구름의 저편, 약속의 장소",
	]
	var body: some View {
	VStack {
	ForEach(buttonTitles, id: \.self) { t in
	Button(action: {}) {
	Text(t)
	}
	.buttonStyle(.borderedProminent)
	}
	}
	}
	}

view raw ContentView.swift hosted with ❤ by GitHub

 

 

 

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

 

 

 

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

 

	VStack {
	ForEach(buttonTitles, id: \.self) { t in
	Button(action: {}) {
	Text(t)
	.frame(width: 250) // 🤔
	}
	.buttonStyle(.borderedProminent)
	}
	}

view raw ContentView.swift hosted with ❤ by GitHub

 

 

 

 

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

 

 

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

 

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

 

	VStack {
	ForEach(buttonTitles, id: \.self) { t in
	Button(action: {}) {
	Text(t)
	.frame(maxWidth: .infinity) // ✅
	}
	.buttonStyle(.borderedProminent)
	}
	}
	.fixedSize() // ✅

view raw ContentView.swift hosted with ❤ by GitHub

 

 

 

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

 

 

 

 

 

 

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

 

👍 👍 👍

 

 

 

## 참고

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

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

 

 

---

 

이번 글은 여기서 마무리.