View를 생성할때 Stack 은 필수요소입니다
튜토리얼에서 간단하게 뷰를 사용하는 방법을 소개할게요!
애플 공식사이트 Tutorial 에서는 Landmark를 소개하는 앱을 만드는 것을 목표로 하고 있어요!
먼저, SwiftUI 에서 사용하는 Stack 에는 HStack과 VStack 이 있어요!
ZStack이라는 것도 있는데 이건 나중에 다시 설명할게요!
이름에서부터 알 수 있듯이,
HStack은 Horizontal, VStack은 Vertical 입니다!
최종적으로 이런 모습으로 만들거에요!
사용하는 방법으로는 감싸고 싶은 컴포넌트를 오른쪽 탭하게 되면 해당 컴포넌트를 Stack으로 감쌀 수 있습니다!
그렇지만 실제로 코딩하다보면 이런방식은 사용하지 않으니 참고로만 알고 계세요!
Stack을 적용하면 코드는 이런 모습이 되겠죠?
font는 Title보다 작은 subheadline으로 설정해주고
가로로 배치할 거니 HStack으로 한번 더 감싸줬습니다.
그런데, 원하는 결과물과는 좀 다르죠?
Text 들 끼리 거리를 좀 둬야할 것 같아요
Spacer() 를 사용하면 이렇게 거리를 줄 수 있는데,
보면 알 수 있듯이, 컴포넌트를 양 끝단으로 밀어버리네요!
그 이유는 세번째 사진에서 볼 수 있듯이
Spacer()는 Flexible한 객체로, 감싸고 있는 레이아웃을 확장하기 때문입니다!
튜토리얼 앱에서는 padding으로 이 문제를 해결했어요!
특이한 점은 HStack이 아니라 VStack에 패딩을 걸어준 것이고, 또 한가지 가로,세로 값을 항목을 따로 지정해 주지 않은 것입니다.
즉, padding()을 걸면 사방으로 전부 다 걸린다는 것입니다!
혹시나 해서 HStack에 패딩을 넣어보면
아래와 같이 뷰가 변합니다.
VStack의 가로 패딩과 HStack의 가로패딩이 서로 다르죠?
다시말해서 HStack에서 패딩이 두번 걸렸다는 걸 알 수 있어요!
여기까지 Stack과 패딩에 대해서 알아봤습니다!
'SwiftUI' 카테고리의 다른 글
| [iOS / Swift] UIFont Custom 적용과, UIButton configure (4) | 2024.01.16 |
|---|---|
| [SwiftUI] Tutorial 05 - MapKit 사용 기초, Divider (1) | 2023.12.29 |
| [SwiftUI] Tutorial 04. Custom Image View 만들기 - shadow, overlay, shape (0) | 2023.12.17 |
| [SwiftUI] SwiftUI Tutorial02 - Customize the text view (0) | 2023.11.04 |
| [SwiftUI] 미리보기, 프로젝트 생성 (0) | 2023.10.31 |
