SwiftUI) 알아두면 편한 FixedSize!

https://developer.apple.com/documentation/swiftui/view/fixedsize()

FixedSize를 한마디로 정리하자면 가장 이상적인 뷰의 크기로 적용하는 수정자 입니다.

이상적인 뷰의 크기라고 하니 잘 이해가 가지 않습니다…

우선 아래 테스트 예시를 봐주세요.

FixedSize 사용전

struct FixedSizeView: View {
    var body: some View {
        VStack {
            Text("😐😐😐😐😐😐😐😐😐")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.cyan)
            Text("😐😐😐😐😐😐")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.green)
            Text("😐😐😐😐")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.orange)
        }
        .border(Color.black)
    }
}

FixedSize 사용

...
.border(Color.black)        
.fixedSize(horizontal: true, vertical: false)

 

분명 VStack 내부에 frame에 maxWidth: .infintiy 로 설정했습니다.

때문에 위 사진 결과처럼 width는 최대한 화면 끝까지 늘어난 모습으로 그려졌습니다.

하지만 이후 FixedSize 를 적용한 결과 내부 컨텐츠 크기에 맞게 크기가 적용된 것을 볼 수 있습니다.

이번엔 HStack으로 바꾸고 maxWitdh를 maxHeight로 바꾸겠습니다.

struct FixedSizeView: View {
    var body: some View {
        HStack {
            Text("😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐")
                .padding()
                .frame(maxHeight: .infinity)
                .background(Color.cyan)
            Text("😐😐😐😐😐😐")
                .padding()
                .frame(maxHeight: .infinity)
                .background(Color.green)
            Text("😐😐😐😐")
                .padding()
                .frame(maxHeight: .infinity)
                .background(Color.orange)
        }
        .border(Color.black)
    }
}

fixedSize 추가

 .fixedSize(horizontal: false, vertical: true) // 추가

위 결과로 알 수 있는건 .infinty 로 설정된 frame 이라고해도 fixedSize 가 적용되면 컨테이너뷰 내부에 들어가있는 뷰의 컨텐츠 크기에 영향을 받는다는것을 알 수있습니다.

fixedSize에는 horizontal, vertical 을 파라미터로 받습니다.

해당 파라미터를 true 를 설정하면

가로 또는 세로로 컨테이너 내뷰 뷰의 컨텐츠의 세로 크기 가로 크기를 이상적인

즉, 컨테이너 내뷰 뷰의 크기에 맞게 설정해줍니다.

.fixedSize(horizontal: false, vertical: true)

fixedSize 와 frame(idealWidth, idealHeight) 관계

fixedSize의 적용을 받으면 maxWidth, minWidth, minHeight, maxHeight 보다

idealWidth, idealHeight 우선 적용됩니다.

struct FixedSizeView: View {
    var body: some View {
        HStack {
            Text("😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐")
                .padding()
                .frame(maxHeight: 200)
                .background(Color.cyan)
        }
        .border(Color.black)
        .fixedSize(horizontal: false, vertical: true)
    }
}

여기서 idealHeight: 300으로 추가해주면

.frame(idealHeight: 300, maxHeight: 200)

 

이러한 결과가 나옵니다.

최종적으로 idealWidth 와 idealHeight 를 지정하고

.fixedSize(horizontal: true, vertical: true)

수정자를 적용해주면 idealWidth 와 idealHeight 각각 지정된 150의 크기로 뷰의 크기가 정해집니다.

struct FixedSizeView: View {
    var body: some View {
        HStack {
            Text("😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐")
                .padding()
                .frame(idealWidth: 150, maxWidth: .infinity, idealHeight: 150, maxHeight: 200)
                .background(Color.cyan)
        }
        .border(Color.black)
        .fixedSize(horizontal: true, vertical: true)
    }
}

 

이상입니다 😎