SwiftUI_004_Spacer.md

Layout - SwiftUI: Spacer

아래 코드는 Image, Text, Button 이 VStack안에 구성되어있다.

VStack{
      Image(systemName: "bolt")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 200)
        .background(.yellow)
        .foregroundColor(.red)
 
      Text("Bolt Icon")
      
      Button {
        print("Button Touch up")
      } label: {
        Text("Hit")
      }
    }

VStack내부에 Spacer 넣기 - 1

Space를 Text와 Button사이에 넣어주면 그림과 같이 공간이 생긴다.

VStack{
      Image(systemName: "bolt")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 200)
        .background(.yellow)
        .foregroundColor(.red)
 
      Text("Bolt Icon")
      
      Spacer() // 공간 생성
      Button {
        print("Button Touch up")
      } label: {
        Text("Hit")
      }

    }

VStack내부에 Spacer 넣기 - 2

Space를 Image와 Text 사이에 동일하게 Spacer를 넣어주면 동일한 간격이 생긴다.

VStack{
      Image(systemName: "bolt")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 200)
        .background(.yellow)
        .foregroundColor(.red)
 
      Text("Bolt Icon")
      
      Spacer() // 공간 생성
      Button {
        print("Button Touch up")
      } label: {
        Text("Hit")
      }

    }

VStack내부에 HStack 넣기

VStack내부에 HStack을 구성하여 이안에도 Spacer를 이용할 수 있다.

단순하게 Spacer를 넣기만 하면 HStack의 양끝까지 객체가 이동하기 때문에 아래처럼 HStack자체에 padding을 주면 그림과 같이 안여백이 생긴다.

VStack{
      Image(systemName: "bolt")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 200)
        .background(.yellow)
        .foregroundColor(.red)
 
       HStack {
           Image(systemName: "heart")
           Spacer()
           Text("Heart Icon")
      }.padding(30)   

   
      Spacer() 
      Button {
        print("Button Touch up")
      } label: {
        Text("Hit")
      }

    }

HStack의 범위살펴보기

HStack의 범위를 보기위해 padding에 색상을 넣어보면 아래와 같다.

VStack{
      Image(systemName: "bolt")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 200)
        .background(.yellow)
        .foregroundColor(.red)
 
       HStack {
           Image(systemName: "heart")
           Spacer()
           Text("Heart Icon")
      }.padding(30).background(.green)
   
      Spacer() 
      Button {
        print("Button Touch up")
      } label: {
        Text("Hit")
      }

    }