SwiftUI frame이 제안하는 크기 이해하기

frame을 지정하면 뷰 자체가 그 크기로 변한다고 생각하기 쉽다. 실제로는 부모와 자식 사이에 새로운 크기 제안을 하나 더 놓는 방식에 가깝다.

Frame 영역

frame 영역을 지정해주지 않으면 콘텐츠 자체가 차지하는 영역이 기본 영역이다.

Text("Hello, World!")
	.background(Color.red) // text 자체의 영역

frame 영역을 지정해주면 지정해준 넓이만큼 화면의 공간을 차지하게된다.

Text("Hello, World!")
	.background(Color.red) // text 자체의 영역
    .frame(width: 200, height: 200) // text의 frame 영역
	.background(Color.green)

Frame 정렬

frame 영역을 기준으로 frame 내부의 뷰들을 정렬할 수 있다.

Text("Hello, World!")
	.background(Color.red)
    .frame(width: 200, height: 200, alignment: .leading) // 왼쪽 정렬
	.frame(width: 200, height: 200, alignment: .center) // 중앙 정렬
	.frame(width: 200, height: 200, alignment: .trailing) // 오른쪽 정렬
	.background(Color.green)

Frame 크기

frame의 크기를 유동적으로 지정할 수 있다.

Text("Hello, World!")
	.background(Color.red)
 	.frame(
		minWidth: 10, // 최소 너비 지정
        idealWidth: 300, // 최적 너비 지정
        maxWidth: .infinity, // 최대 너비 지정
        minHeight: 10, // 최소 높이 지정
        idealHeight: 300, // 최적 높이 지정
        maxHeight: .infinity, // 최대 높이 지정
        alignment: .center
        )

fixedSize modifier를 통해 maxWidth와 maxHeight에 상관없이 영역을 고정할 수 있다. idealWidth와 idealHeight이 지정되어 있을 경우 그 크기로 고정되며, 지정되어 있지 않을 경우 내부 콘텐츠의 크기로 고정된다.

.fixedSize(horizontal: true, vertical: true)