SwiftUI模态视图

Question

从任何类或结构模式显示SwiftUI视图的最佳方法是什么？我使用来自UIHostingController的UIKit。是否有更好的方法仅使用SwiftUI来完成此操作？

具有显示

视图的按钮的ContentView

struct ContentView: View {
    var body: some View {
        Button {
            //  Present the view
            presentView(controller: UIHostingController(rootView: view))
        } label: {
            Text("Present view")
        }
    }
    
    var view: some View {
        Button {
            //  Dismiss the view
            dismissView()
        } label: {
            Rectangle()
                .overlay(
                    Text("Dismiss view")
                )
        }
    }
}

用于表示SwiftUI视图的函数

extension ContentView {
    //  Returns the top view controller
    func topViewController() -> UIViewController? {
        let keyWindow = UIApplication.shared.windows.filter {$0.isKeyWindow}.first
        if var topController = keyWindow?.rootViewController {
            while let presentedViewController = topController.presentedViewController { topController = presentedViewController }
            return topController
        } else { return nil }
    }
    
    //  Presents the SwiftUI view in a UIHostingController
    func presentView(controller: UIViewController) {
        controller.view.backgroundColor = .none
        controller.modalPresentationStyle = .overCurrentContext
        topViewController()?.present(controller, animated: false, completion: nil)
    }
    
    //  Removes the UIHostingViewController from root view
    func dismissView() {
        topViewController()?.dismiss(animated: false, completion: nil)
    }
}

Answer 1

您可以这样展示模态表：

struct ContentView: View {
   @State private var showSheet = false

   var body: some View {
       Button("Present") { 
           showSheet.toggle() 
       }.font(.largeTitle)
       .sheet(isPresented: $showSheet) { 
           SheetView() 
       }
    }
}

struct SheetView: View {
   @Environment(\.dismiss) var dismiss

    var body: some View {
        ZStack {
           Button { 
              dismiss() 
           } label: {
               Image(systemName: "xmark.circle")
                 .font(.largeTitle)
                 .foregroundColor(.gray)
           }
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
         .padding()
    }
}

或者在全屏上呈现这样的模式：

struct ContentView: View {
   @State private var showSheet = false

   var body: some View {
       Button("Present") { 
          showSheet.toggle() 
       }.font(.largeTitle)
        .fullScreenCover(isPresented: $showSheet) {
              SheetView()
       }
   }
}
   
struct SheetView: View {
    @Environment(\.presentationMode) var presentationMode
 
     var body: some View {
    
         ZStack {
            Button { 
               presentationMode.wrappedValue.dismiss() 
             } label: {
                Image(systemName: "xmark.circle")
                .font(.largeTitle)
                .foregroundColor(.gray)
             }
       }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing) 
        .padding()
   }
}

对于你的评论，这没问题，你可以这样做：

struct ContentView: View {
    @State private var showSheet = false

    var body: some View {
        ZStack {
            Button("Present") {
                showSheet.toggle()
            }
            .font(.largeTitle)
        
            if showSheet {
                ZStack {
                    Button {
                        showSheet.toggle()
                    } label: {
                        Image(systemName: "xmark.circle")
                            .font(.largeTitle)
                            .foregroundColor(.gray)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
                    .padding()
                }
                .background(.ultraThickMaterial)
            }
        }
    }
}