SwiftUI : Sheet / FullScreenCover (@Environment / presentationMode)

Sheet

.sheet(isPresented: $someBinding) {
       SecondView()
}

SwiftUI에는 여러 가지 view를 보여주는 방법이 있습니다. 가장 기본적인 것 중 하나는 sheet입니다.

 

이것은 기존 뷰 위에 새로운 뷰가 표시됩니다.

 

iOS에서는 자동으로 프레젠테이션을 제공하여 현재 뷰가 뒤쪽으로 빠지고 새로운 뷰가 맨 위 애니메이션으로 표시됩니다. sheet(isPresented: ) 는 Alerts와 코드가 유사합니다

 

대신, sheet를 보여야 하는 조건을 정의하고, 그러한 조건이 true 이거나 false가 되면 sheet가 각각 제시되거나 기각됩니다.

//보여주고싶은 뷰 하나를 생성한다
struct SecondView: View {
    var body: some View {
        Text("Second View")
    }
}

struct ContentView: View {
    
    @State private var showingSheet = false
    
    var body: some View {
        Button("Show Sheet") {
            self.showingSheet.toggle()
        }
        .foregroundColor(.white)
        .padding()
        .background(Color.black)
        .cornerRadius(30)
        .font(.system(size: 30))
        
        .sheet(isPresented: $showingSheet) {
         //sheet에 표시될 뷰를 할당
            SecondView()
        }
    }
}

sheet에 트위터처럼 @아이디 를 넣고 싶을 때는 SecondView에 var name 을 String으로 정의해주고 텍스트를 바꿔줍니다.

//var name을 정의함으로써, 수정이가능한 코드를 작성했다.
struct SecondView: View {
    var name: String
    var body: some View {
        Text("Hello \(name)!")
    }
}

이제 ContentView의 sheet 부분도 수정해야 합니다.

struct ContentView: View {
    
    @State private var showingSheet = false
    
    var body: some View {
        Button("Show Sheet") {
            self.showingSheet.toggle()
        }
        .foregroundColor(.white)
        .padding()
        .background(Color.black)
        .cornerRadius(30)
        .font(.system(size: 30))
        
        .sheet(isPresented: $showingSheet) {
            SecondView(name: "@Sundal")
        }
    }
}

@Environment / presentationMode

struct SecondView: View {
    @Environment(\.presentationMode) var presentationmode

계속 진행하기 전에 한 가지 더 재미있는 것이 있는데, sheet에 텍스트를 눌러 sheet가 닫히게 하는 방법입니다.

 

아래로 스와이프를 할 수 있지만 때로는 프로그래밍 방식으로 뷰를 닫고 싶을 때가 있습니다.

 

예를 들어 버튼을 누르면 뷰가 사라지도록 할 수 있는 거죠. 는 이 작업을 수행하는 두 가지 방법을 제공하지만 가장 쉬운 방법은 다른 속성 래퍼를 사용하는 것입니다.

 

이것은 @Environment 이라고 불리고, 외부에서 우리에게 제공된 값을 저장하는 속성을 만들 수 있습니다.

 

쉽게 말해

"사용자가 lightMode입니까, DarkMode입니까?",
"더 작거나 더 큰 글꼴을 요구했습니까?",
"어떤 시간대에 있습니까?"

라는 변화에 제공된 값을 주는 것이죠. 이것을 사용해 보기 위해 SecondView에 presentationMode 을 넣어 보도록 하겠습니다.

 

코드는 위에 사용했던 코드를 그대로 가져와서 수정하도록 하겠습니다.

 

Text 가 있던 자리를 Button으로 수정해주고, 그 밑에 self.presentationMode.wrappedValue.dismiss() 코드를 할당해 줘야 합니다.

self.presentationMode.wrappedValue.dismiss()

struct SecondView: View {
   
    @Environment(\.presentationMode) var presentationMode
    
    var name: String
    var body: some View {
    //Text부분을 Button으로 바꿔주었다
        Button("Your name is \(name)") {
            self.presentationMode.wrappedValue.dismiss()
        }
    }
}

전체 코드

struct SecondView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var name: String
    var body: some View {
        //Text부분을 Button으로 바꿔주었다
        Button("Your name is \(name)") {
            self.presentationMode.wrappedValue.dismiss()
        }
    }
}


struct ContentView: View {
    
    @State private var showingSheet = false
    
    var body: some View {
        Button("Show Sheet") {
            self.showingSheet.toggle()
        }
        .foregroundColor(.white)
        .padding()
        .background(Color.black)
        .cornerRadius(30)
        .font(.system(size: 30))
        
        .sheet(isPresented: $showingSheet) {
            SecondView(name: "@Sundal")
        }
    }
}

fullScreenCover

sheet와 유사하게 작동되는 수정자인 FullScreenCover은 sheet와 동일하지만 이름 그대로 화면을 꽉 채워주는 시트라고 보면 됩니다. sheet와 한번 비교해보겠습니다.

Sheet

import SwiftUI

// MARK : Body

struct ContentView: View {
    @State var showSheet: Bool = false
    var body: some View {
        ZStack {
            Color("Peach")
                .ignoresSafeArea()
            
            Button(action: {
                showSheet.toggle()
            }) {
               Text("시트")
                .font(.title)
                .foregroundColor(.black)
                .padding()
                .background(Color.white)
                .cornerRadius(20)
                .sheet(isPresented: $showSheet, content: {
                    SecondView()
                })
            }
        }
    }
}

// MARK : PrieView
struct ContentView_Previews: PreviewProvider {
    
    static var previews: some View {
        ContentView()
    }
}


// MARK : SecondeView
struct SecondView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            Color("Paleblue")
                .ignoresSafeArea()
            
            Button(action: {
                presentationMode.wrappedValue.dismiss()
            }) {
              Image(systemName: "xmark")
                .font(.title)
                .foregroundColor(.white)
                .padding(20)
            }
        }
    }
}

FullScreenCover

import SwiftUI

// MARK : Body

struct ContentView: View {
    @State var showSheet: Bool = false
    var body: some View {
        ZStack {
            Color("Peach")
                .ignoresSafeArea()
            
            Button(action: {
                showSheet.toggle()
            }) {
               Text("시트")
                .font(.title)
                .foregroundColor(.black)
                .padding()
                .background(Color.white)
                .cornerRadius(20)
                .fullScreenCover(isPresented: $showSheet, content: {
                    SecondView()
                })
            }
        }
    }
}

// MARK : PrieView
struct ContentView_Previews: PreviewProvider {
    
    static var previews: some View {
        ContentView()
    }
}


// MARK : SecondeView
struct SecondView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            Color("Paleblue")
                .ignoresSafeArea()
            
            Button(action: {
                presentationMode.wrappedValue.dismiss()
            }) {
              Image(systemName: "xmark")
                .font(.title)
                .foregroundColor(.white)
                .padding(20)
            }
        }
    }
}

 

 

 

읽어주셔서 감사합니다🤟