Stack은 swiftUI에서 뷰를 배치하는 데 사용하는 컨테이너 뷰로, 콘텐츠로 전달된 자식 뷰들을 어떤 형태로 배치할 것인지 결정 짓습니다.uikitdml UIStackView같은 역할이라고 생각하면 편합니다.

종류

Horizontal Stack , Vertical Stack, Depth Stack

생성자

init(
	alignment: VerticalAlignment = .center,//뷰의 정렬 방식 설정
	spacing::CGFLoat? = nil, //자식뷰간 간격
	@ViewBuilder content: ()->Content  //표시할 콘텐츠
)

Spacer

뷰사이의 간격을 설정하거나 뷰의 크기를 확장할 용도로 사용

스택 내부와 외부에서 사용할때에 따라 특성이 달라짐.

단독사용: 부모 뷰가 제공하는 공간 내에서 최대크기로 확장.

H,V Stack내부: 시각적인 요소가 제거 되고 공간을 차지하기 위한 역할로만 기능하며 컨텐츠가 없이 단독으로 사용되는경우 뷰가 없는 것처럼 취급됨.

예시코드

VStack{
            Text("Title").font(.largeTitle)
            Text("SubTItle").foregroundColor(.secondary)
            Spacer()
            Text("본문내용")
            Spacer()//스페이서 개수에 따라 비율 조절이 가능함.
            Spacer()
            Text("각주").font(.body)
        }.font(.title)
            .frame(width: 200, height: 350)
            .padding()
            .border(Color.blue, width: 2)

뷰레이아웃 예제코드

var body: some View {
        VStack{
            Text("도형 만들기").font(.largeTitle).fontWeight(.heavy)
            
            HStack {
                Text("둥근 모형").font(.title)
                Spacer()
            }
            ZStack{
                Rectangle().frame(height:10)
                HStack{
                    Circle().fill(Color.yellow)
                    Ellipse().fill(Color.green)
                    Capsule().fill(Color.orange)
                    RoundedRectangle(cornerRadius: 30).fill(Color.gray)
                }
            }
            HStack {
                Text("각진 모양").font(.title)
                Spacer()
            }
            ZStack{
                Rectangle().frame(height:10)
                HStack{
                    Rectangle().fill(Color.yellow)
                    Rectangle().fill(Color.green)
                    Rectangle().fill(Color.orange)
                    RoundedRectangle(cornerRadius: 30).fill(Color.gray)
                }
            }
        }.padding()
    }

Overlay

뷰 원본 공간을 기준으로 그위에 새로운 뷰를 중첩하여 쌓는 기능을 하는 수식어 임. UIKit에서 사용하는 addSubview메서드를 사용하는 개념과 같음.

Background