SwiftUI ] SwiftUI에서 Modal View 띄우기(모달뷰)

오늘은 SwiftUI에서 Modal View를 띄우는 것을 알아 보겠다. 

 

기존의 Objective-C로 모달뷰를 띄우려면 아래와 같이 하던 것을 SwiftUI에서는 어떻게 할까?

 

- (IBAction)showMyModal
{
    MyModal *myModal = [[MyModal alloc]initWithNibName:@"MyModal" bundle:nil];
    [myModal setModalTransitionStyle:UIModalTransitionStylePartialCurl]; 
    [self presentModalViewController:myModal animated:YES];
}

 

우선 예제로 SwiftUI프로젝트를 생성하고  ContentView에 Button을 하나 추가한다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
        Text("Hello, World!")
            Button(action: {
             print("hello button!!")
            }) {
                Text(/*@START_MENU_TOKEN@*/"Button"/*@END_MENU_TOKEN@*/)
            }

        }
    }
}

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

 

 

 

 

 

 

 

다음 모달뷰로 쓰일 뷰를 정의해준다.

 

struct ModalView: View {

  var body: some View {
    VStack {
      Text("Modal view")
      Button(action: {
        
      }) {
        Text("Dismiss")
      }
    }
  }
}

 

 

아래와 같이 ContentView의 버튼에 .sheet modifier를 추가하고 상태를 저장할 변수 showModal을 정의해 준다.

 

import SwiftUI

struct ContentView: View {
    @State private var showModal = false //상태
    
    var body: some View {
        VStack{
        Text("Hello, World!")
            Button(action: {
             print("hello button!!")
            self.showModal = true
            }){
                Text(/*@START_MENU_TOKEN@*/"Button"/*@END_MENU_TOKEN@*/)
            }
            .sheet(isPresented: self.$showModal) {
                ModalView()
            }
        }
    }
}

sheet의 content로 ModalView를 출력한다.

 

이상태로 실행하면 아래와 같이 버튼을 클릭 했을 때 모달 뷰가 출력된다.

하지만 모달뷰을 닫을 방법이 없다.

 

아래와 같이 모달뷰의 Dismiss 버튼에 모달뷰를 닫는 액션을 추가 해준다.

 

struct ModalView: View {

  @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

  var body: some View {
    Group {
      Text("Modal view")
      Button(action: {
         self.presentationMode.wrappedValue.dismiss()
      }) {
        Text("Dismiss")
      }
    }
  }
}

Environment 변수를 추가해주고 버튼의 엑션엔 dismiss를 호출해준다.

 

https://developer.apple.com/documentation/swiftui/environment

Environment - SwiftUI | Apple Developer Documentation

 

최종 완성 동작 화면은 이렇다.

 

** 전체 소스

 

//
//  ContentView.swift
//  SwiftUI_Modal
//

import SwiftUI

struct ContentView: View {
    @State private var showModal = false
    
    var body: some View {
        VStack{
        Text("Hello, World!")
            Button(action: {
             print("hello button!!")
            self.showModal = true
            }){
                Text(/*@START_MENU_TOKEN@*/"Button"/*@END_MENU_TOKEN@*/)
            }
            .sheet(isPresented: self.$showModal) {
                ModalView()
            }
        }
    }
}

struct ModalView: View {

  @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

  var body: some View {
    Group {
      Text("Modal view")
      Button(action: {
         self.presentationMode.wrappedValue.dismiss()
      }) {
        Text("Dismiss")
      }
    }
  }
}

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