Stack

swift 복습

섭섭's 2024. 8. 4. 01:08

SwiftUI에는 레이아웃을 구성하기 위한 세 가지 주요 스택, HStack, VStack, ZStack이 존재합니다.

HStack은 수평으로 뷰를 배치하는 컨테이너입니다. 이 스택을 사용하면 여러 개의 뷰를 나란히 정렬할 수 있으며, 각 뷰는 수평 방향으로 위치하게 됩니다.

VStack은 수직으로 뷰를 배치하는 컨테이너입니다. 이 스택을 사용하면 여러 개의 뷰를 위아래로 정렬할 수 있으며, 각 뷰는 수직 방향으로 위치하게 됩니다.

ZStack은 뷰를 겹쳐서 배치하는 컨테이너입니다. 이 스택을 사용하면 여러 뷰를 같은 위치에 겹쳐서 쌓을 수 있으며, 가장 위에 있는 뷰가 가장 먼저 그려집니다.

아주 간단한 예시를 들어 설명해 보겠습니다.

HStack을 이용하여

"섭섭"

"복습"

"블로그"

를 입력했습니다.

해당 코드를 프리뷰로 보게 된다면

본문의 예시처럼 수평으로 배치되는 것을 확인할 수 있습니다.

이번에는 배경색과 코드를 넣어 직관적으로 보이게 해 보겠습니다.

해당 코드의 결과를 보기 전 예제의 간단한 코드의 역할들을 소개해 드리겠습니다.

.padding()은 텍스트 주변에 여백을 생성하는 역할을 가지고 있습니다.

.background(Color.red) 텍스트의 배경색을 빨간색으로 결정하는 역할을 가지고 있습니다.

.foregroundColor(.white) 텍스트의 색상을 흰색으로 변경하는 역할을 가지고 있습니다.

.cornerRadius(4) HStack의 모서리를 둥글게 만듭니다. 4포인트로 둥글게 처리하였습니다.

.border(Color.black, width: 2) HStack외부에 검은 테두리를 추가하는 역할을 가지고 있습니다.

해당 코드의 결과물을 프리뷰로 보게 되면 아래와 같이 나오게 됩니다.

위에서 코드를 간단하게 설명했으니 예제사진으로 간단하게 넘어가겠습니다.

HStack과 달리 수직으로 내려오는것을 확인할 수 있습니다.

해당코드를 설명드리겠습니다.

해당 예제에서는 ZStack을 사용하여 레이아웃을 구성한 후 초록색 배경을 배치하였습니다.

Color.green.opacity(0.3) 을 사용아여 배경색의 투명도를 30%로 조절하였습니다.

.edgesIgnoringSafeArea(.all) 해당 배경색이 화면의 모든 가장자리를 채울 수 있게 하는 명령어 입니다.

배경색이 안전영역을 무시하고 화면을 가득 채울 수 있습니다.

해당 예제를 보면 ZStack은 VStack과 HStack을 포함하고 있습니다.

VStack 은 화면 아래의 블로그 라는 텍스트와 배경색을 띄우는 역할을 합니다.

HStack은 화면 상단의 "섭섭" "복습" 이라는 텍스트를 띄우는 역할을 하고 있습니다.

이렇게 두 텍스트가 같이 화면에 나타날 수 있는 이유는 ZStack을 배치 한 후 그 아래에 VStack과 HStack이 위치하기 때문입니다.