SwiftUI Spacer 사용 꿀팁

SwiftUI에서 이런 레이아웃은 어떻게 구성할까? "고양이" 텍스트 길이는 바뀔 수 있는데 중앙에 와야하고 짝꿍은 그 옆에 나와야 하는 상황.

HStack 으로 만들면 고양이와 짝꿍의 넓이가 합쳐진 채 중앙으로 정렬되서 "고양이"만 딱 중앙에 정렬이 안된다.

ZStack 에 넣자니 텍스트 길이도 알아내야할 것 같고 복잡해진다.

이럴 때 Spacer 를 활용하면 좋다.

HStack {
    Spacer()
    Text("고양이")
    Spacer()
        .overlay(alignment: .leading) {
            Text("짝꿍")
                .padding(.leading, 6)
        }
}