안녕하세요 MIN.IOS입니다! 👏
어제부터 SwiftUI에 대해 글을 작성하기 시작했는데,
처음 SwiftUI 프로젝트를 생성할때부터 당황하게 만든 뷰에 대한 개념을 조금 정리해보려합니다!
먼저 어제도 첨부된 처음 프로젝트를 생성했을때 구조를 보겠습니다!
처음 SwiftUI 프로젝트를 생성하면 기본으로 이미지와 같은 구조로 생성됩니다!
제가 이때 든 생각이 레이아웃이나 라벨같은게 없는데 어떻게 화면구성이 되는거지?라는 의문을 가졌는데
이제부터 어떻게 뷰가 구성되는지 알아보도록 하겠습니다!! 😍
처음에 혹시 하는 마음으로 Text를 바로 적어봤는데 디바이스가 두개로 나눠버리는 현상이 생겼어요...
그럼 한개의 디바이스에서 두줄로 나오게 한번 시도해볼까요?
오 어제 글에서도 정리했던 매니저 종류중 VStack을 사용하니까 한 디바이스에서 2개의 텍스트가 나왔어요!
위에서 보이는거처럼 SwiftUI에서는 뷰를 추가하기 위해서는 스택이나 폼같은 뷰들을 배치해야한다고 합니다!
그리고 여기서 VStack은 Vertical Stack(수직 스택)을 의미해서 텍스트가 수직으로 생성됐다고 해요!
그럼 HStack도 한번 써볼게요! 😊
오 역시 Horizontal Stack(수평 스택)을 의미해서 수평으로 텍스트가 띄워지네요!!👏
그럼 더 추가해서 VStack, HStack을 같이 사용해서 만들어볼게요!!
VStack이랑 HStack을 같이 적었더니 두개가 또 다른 디바이스에 표현되네요...하하
다시 어떻게 한 디바이스에서 표현할지 생각해보다가 VStack안에 HStack을 넣어봤습니다!
오 이렇게 같이 넣어보니 한개의 디바이스에서 모두 표현이 되네요!
여러가지 방법을 하면서 기존 Swift와 너무 달라서 당황했었는데 천천히 적응해 나가면서 코딩해야할거 같네요 😅
+공부하면서 추가적으로 알게된 내용을 적어보자면
먼저 컨테이너에 포함된 여러 뷰를 연결하면 하나의 뷰처럼 사용이 가능하다고 합니다!!
이미지와 같이 텍스트끼리 +로 뷰를 합치는게 가능하다고 합니다~!
하지만, 클로저에 별도의 표현식이 추가되면 return 구문을 추가해야 한다고 하는대요!
이런식으로 별도로 표현식이 추가되면 VStack 앞에 반환을 해줘야한다고 합니다!!
한가지 더 예제를 보고 마무리 할건데요 뷰를 따로 선언해서 불러내는건대요!!
예제와 같이 하위 뷰를 함수로 만든 뒤, Previews 구조체에서 상위 뷰를 호출하니까 하위뷰가 포함되었습니다!
오늘은 제가 처음 보고 당황했던 뷰를 선언하는 부분을 사알짝! 알아보았는데요!
이제 기본적인 텍스트가 아닌 여러가지 컴포넌트를 넣어서 뷰를 만드는 글로 찾아뵙겠습니다~! 🤗
'[IOS][SWIFTUI]' 카테고리의 다른 글
| [IOS][SWIFTUI] SwiftUI 기본 설명! (1) | 2021.10.27 |
|---|
