padding과 Spacer로 여백 설계하기

둘 다 빈 공간을 만들지만 padding과 Spacer가 레이아웃에 참여하는 방식은 다르다. 하나는 뷰의 둘레를 넓히고 다른 하나는 Stack 안의 남은 공간을 가져간다.

Padding

Text("Hello World!")
	.background(Color.yellow)
	.padding() // 기본 패딩(모든 방향, 여백 10)
    .padding(.all, 20) // 모든 방향, 여백 20
    .padding(.vertical, 20) // 수직 방향, 여백 20
    .padding(.leading, 20) // 왼쪽 방향, 여백 20
	.background(Color.yellow)

Spacer

Stack뷰 안에 여백(빈 공간)을 추가할 수 있다. Spacer는 크기는 유동적으로 조정되며, 가능한 많은 공간을 차지한다.

HStack {
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.blue)
	Spacer() // 화면 양쪽 끝으로 두 사각형 배치
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.yellow)
}

minLength 파라미터를 통해 최소 여백을 설정할 수 있다.(기본값 8)

HStack {
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.blue)
	Spacer(minLength: 20) // 패딩에 따라 너비가 조정될 때, 최소 너비 20
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.yellow)
}
.padding(.horizontal, 200) // 수평 방향 패딩 200

frame 크기를 지정해 원하는 크기의 여백을 설정할 수 잇다.

HStack {
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.blue)
	Spacer()
    	.frame(width: 50) // 수평 방향 50의 여백
	Rectangle()
		.frame(width: 100, height: 100)
		.foregroundColor(Color.yellow)
}