[SwiftUI] Sheet

화면을 모달로 표시한다.

Card Modal

화면 전체를 채우지 않음

1. State var

struct Sheet: View {
	@State private var presentCardModal = false
    var body: some View {
    }
}

2. .sheet 모디파이어 추가

struct Sheet: View {
	@State private var presentCardModal = false
    var body: some View {
    	Button {
        } label: {
        }
        .sheet(isPresented: $presentCardModal) {
        	//onDismiss
            //시트 닫은 다음 호출됨
        } content: {
        	//표시할 뷰 리턴
        }
    }
}

3. 트리거뷰에서 State var = true

보통 버튼일 경우 버튼 누를 시로 작업

struct Sheet: View {
	@State private var presentCardModal = false
    var body: some View {
    	Button {
        	presentCardModal = true
        } label: {
        }
        .sheet(isPresented: $presentCardModal) {
        	//onDismiss
            //시트 닫은 다음 호출됨
        } content: {
        	//표시할 뷰 리턴
        }
    }
}

---

Fullscreen Modal

화면 전체를 채움

1. State var

2. .fullScreenCover 모디파이어 추가

struct Sheet: View {
	@State private var presentFullScreen = false
    var body: some View {
    	Button {
        } label: {
        }
        .fullScreenCover(isPresented: $presentFullscreen) {
        	//onDismiss
        } content: {
        	//표시할 뷰 리턴
        }
    }
}

3. 트리거뷰에서 State var = true

4. 화면을 닫는 코드 추가

cardModal과 달리 화면을 닫는 코드가 없으므로 직접 추가해야 한다.

4-1-1. fullscreen으로 표시되는 뷰에 환경 변수 추가

@Environment(\.presentationMode) var presentationMode
//iOS15 이상
@Environment(\.dismiss) var dismiss

4-1-2. 닫는 버튼 추가 및 dismiss 코드 추가

var body: some View {
	...
    .overlay(alignment: .top) {
    	Button {
        	presentationMode.wrappedValue.dismiss()
            //iOS15
            presentationMode.dismiss()
        } label: {
        	...
        }
    }
}

---

isPresented에 사용했던 State var을 모달뷰에 전달하여 false로 바꿈을 통해 뷰를 dismiss하는 방식

4-2-1. 표시되는 뷰에 참조 변수 추가

• 바인딩 속성 사용

@Binding var presentModal: Bool

• Preview에서 오류가 난다면 정적바인딩 사용

#Preview {
	ImageScene(presentModal: .constant(true))
}

4-2-2. 닫는 버튼에서 false 저장

var body: some View {
	...
    .overlay(alignment: .top) {
    	Button {
        	presentModal = false
        } label: {
        	...
        }
    }
}

4-2-3. 뷰 표시하는 부분에서 참조 변수 전달

struct Sheet: View {
	@State private var presentFullScreen = false
    var body: some View {
    	Button {
        } label: {
        }
        .fullScreenCover(isPresented: $presentFullscreen) {
        	//onDismiss
        } content: {
        	ImageScene(presentModal: $presentFullScreen)
        }
    }
}

---

속성에 값이 저장되면 화면 표시하기

nil이 저장되면 표시 안하고 값이 저장되면 표시
트리거뷰에서는 해당 속성에 값을 저장해야 함.

//Identifiable 프로토콜 채용
@State private var imageData: ImageData?

var body: some View {
	Button {
    	imageData = ImageData()
    } label: { 
    }
	.sheet(item: $imageData, onDismiss: {}) { data in
    	//뷰 리턴
    }
}