SwiftUI에서 sheet 와 FullScreenCover 이용하기

 

sheet 수정자는 sheetView 에 presentationMode 를 적용시켜 sheet 뷰에서 ‘X’ 버튼을 누르면 닫힐 수 있도록 한다.

 

Sheet 정의

기본 코드

// MARK : Body
struct ContentView: View {
    @State var showView: Bool = false
    var body: some View {
        ZStack(alignment: .top) {
            Color.yellow
                .ignoresSafeArea()
            
            VStack {
                Button(action: {
                    showView.toggle()
                }) {
                    Text("Some Sheet")
                        .font(.title)
                        .foregroundColor(.black)
                }
            }
            // METHOD 1 - SHEET
            .sheet(isPresented: $showView, content: {
                sheetView()
            })
        }
    }
}
 
// SheetView
struct sheetView: View {
    @Environment(\.presentationMode) var presentationMode
    var body: some View {
        ZStack(alignment: .topLeading) {
            Color.blue
                .ignoresSafeArea()
            
            Button(action: {
                presentationMode.wrappedValue.dismiss()
            }) {
                Image(systemName: "xmark")
                    .font(.title)
                    .foregroundColor(.white)
                    .padding(20)
            }
        }
    }
}

 

실행 화면

---

FullScreenCover

화면 전체를 덮는 뷰를 생성한다.

 

기본 코드

struct ContentView: View {
	@State var showView: Bool = false

	var body: some View {
		ZStack(alignment: .top) {
			Color.yellow
				.ignoreSafeArea()

			VStack {
				Button(action: {
					showView.toggle()
				}) {
					Text("Some Sheet")
						.font(.title)
						.foregroundColor(.black)
				}
			}
			.fullScreenCover(isPresented: $showView, content: {
				sheetView()
			})
		}
	}
}

 

---

개발자 Document

https://developer.apple.com/documentation/swiftui/view/sheet(ispresented:ondismiss:content:) 

Apple Developer Documentation

https://developer.apple.com/documentation/swiftui/view/fullscreencover(ispresented:ondismiss:content:) 

Apple Developer Documentation