SwiftUI 스택과 프레임

SwiftUI 스택

• VStack(수직)

  struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "goforward.10")
            Image(systemName: "goforward.15")
            Image(systemName: "goforward.30")
        }
    }
  }
  

  

• HStack(수평)

  HStack {
    Image(systemName: "goforward.10")
    Image(systemName: "goforward.15")
    Image(systemName: "goforward.30")
  }
  

  

• ZStack(중첩되게 배치)

  struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "goforward.10")
            Image(systemName: "goforward.15")
            Image(systemName: "goforward.30")
        }
    }
  }
  

  

---

Spacer, alignment, 그리고 padding

1. Spacer 컴포넌트: 뷰 사이에 공간을 추가
   • (스택) 배치된 뷰들의 간격을 제공하기 위해 스택의 방향에 따라 유연하게 확장/축소

       HStack(alignment: .top) {
     
           Text("Q1 Sales")
               .font(.headline)
           Spacer()
           VStack(alignment: .leading) {
               Text("January")
               Text("February")
               Text("March")
           }
           Spacer()
       .
       .
     

2. alignment (스택의 정렬)
   • 스택이 선언될 때 정렬 값 지정

     VStack(alignment: .center) {
      Text("Financial Results")
        .font(.title)
     

   • 간격(spacing)값도 지정가능

     VStack(alignment: .center, spacing: 15) {
      Text("Financial Results")
        .font(.title)
     

3. padding() 수정자
   • 레이아웃, 콘텐트, 그리고 화면 크기에 대한 최적의 간격 사용

     Text("Hello World!")
      .padding()
     

   • 값을 전달하여 간격 지정

     Text("Hello World!")
      .padding(10)
     

   • 특정방향에만 적용

     Text("Hello World!")
      .padding(.top, 10)
     

---

컨테이너의 자식 뷰 제한

컨테이너 뷰는 하위 뷰를 10 개로 제한
10개 이상의 자식뷰를 담을 시 구문 오류 발생
Argument passed to call that takes no argument
-> 여러 컨테이너로 나누어서 담는다: Group 뷰

VStack {
        
    Group {
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
    }
            
    Group {
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
    }
}

---

텍스트 줄 제한과 레이아웃 우선순위

HStack {
    Image(systemName: "airplane")
    Text("Flight times:")
    Text("London")
}
.font(.largeTitle)

• 스택이 충분한 공간을 가지고 있다면
  
• 스택이 충분한 공간을 가지고 있지 않다면
  
• lineLimit() 수정자 사용
  • 텍스트를 몇줄로 표현할지 정함

HStack {
    Image(systemName: "airplane")
    Text("Flight times:")
    Text("London")
}
.font(.largeTitle)
.lineLimit(1)

공간이 부족할 경우 잘려서 표현

• layoutPriority() 수정자 사용
  • 텍스트 뷰에 우선순위 주기
  • 높은 숫자가 더 큰 우선순위

HStack {
    Image(systemName: "airplane")
    Text("Flight times:")
    Text("London").layoutPriority(1)
}
.font(.largeTitle)
.lineLimit(1)

우선순위 지정하지 않을 시 디폴트 0

---

SwiftUI 프레임

frame 수정자

• 뷰의 크기, 영역 조절

Text("Hello World")
    .font(.largeTitle)
    .border(Color.black)

frame 수정자가 없을 때 텍스트 뷰는 콘텐트에 맞게 크기 조절

Text("Hello World")
    .font(.largeTitle)
    .border(Color.black)
    .frame(width: 100, height: 100, alignment: .center)

높이와 폭 100

• 텍스트가 길어져 잘리는 형상
  
  최대 영역과 최소 영역을 설정

  Text("Hello World, how are you")
    .font(.largeTitle)
    .border(Color.black)
    .frame(minWidth: 100, maxWidth: 300, minHeight: 100,
            maxHeight: 100, alignment: .center)
  }
  

  

• 사용가능한 모든 영역을 차지하도록 구성

  .frame(minwidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
  

• 사용 가능한 영역의 경계선 그리기

  Text("Hello World, how are you")
    .font(.largeTitle)
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0,
            maxHeight: .infinity)
    .border(Color.black, width: 5)
  

• edgesIgnoringSafeArea() 수정자
  • frame을 안전 영역 밖에까지 확장
  • 안전 영역x: 카메라 노치, 왼, 오른쪽 화면 상단

    edgesIgnoringSafeArea(.all)
    

---

frame과 GeometryReader

frame이 뷰들을 담고 있는 컨테이너의 크기에 따라 조절

GeometryReader { geometry in
    VStack {
        Text("Hello World, how are you?")
            .font(.largeTitle)
            .frame(width: geometry.size.width / 2,
                    height: (geometry.size.height / 4) * 3)
        Text("Goodbye World")
            .font(.largeTitle)
            .frame(width: geometry.size.width / 3,
                    height: geometry.size.height / 4)
        }
}

GeometryReader로 뷰를 감싸고 컨테이너의 크기를 식별하기 위한 리더(reader) 를 이용
상단의 Text뷰는 VStack의 1/2의 폭과 3/4의 높이 차지
하단의 Text뷰는 VStack의 1/3의 폭과 1/4의 높이 차지