在SwiftUI中以全屏模式模态呈现视图

Question

我需要在SwiftUI中以全屏模态呈现一个视图。

在UIKit中，以下代码足以以全屏方式模态呈现UIViewController：

let modalViewController = ModalViewController()
modalViewController.modalPresentationStyle = .fullScreen
present(modalViewController, animated: true, completion: nil)

在SwiftUI中，我们使用sheet来进行模态视图呈现：

struct ContentView: View {
    @State private var showingSheet = false
    
    var body: some View {
        Button("Show Sheet") {
            showingSheet.toggle()
        }
        .sheet(isPresented: $showingSheet) {
            SecondView(name: "Imran")
        }
    }
}

没有全屏幕演示，表格以卡片的形式呈现视图，可以通过向下拉视图来关闭。

我需要以全屏幕的方式模态呈现视图，这样就无法通过向下拉来关闭。

我该如何使这个表格模态呈现全屏幕，就像我在之前的UIKit代码中所做的那样？

- SHAH MD IMRAN HOSSAIN

Answer 1

在SwiftUI中，有两种方法可以全屏模态显示视图

第一种

.fullScreenCover(isPresented:onDismiss:content:)

当我们需要显示单个视图时，我们需要使用这个特定的修饰符。

struct ContentView: View {
    @State private var showingSheet = false
    
    var body: some View {
        Button("Show Sheet") {
            showingSheet.toggle()
        }
        .fullScreenCover(isPresented: $showingSheet) {
            SecondView(name: "Imran")
        }
    }
}

二

.fullScreenCover(item:onDismiss:content:)

当我们有一个项目列表，并且需要在模态视图中显示每个项目的详细信息而不是导航视图时，我们需要使用此修饰符

示例代码

struct Person: Identifiable {
    var id = UUID()
    var name: String
}

struct PersonListView: View {
    let people = [
        Person(name: "Imran"),
        Person(name: "Anik"),
        Person(name: "Nayeem"),
        Person(name: "Linkon")
    ]
    
    @Environment(\.dismiss) var dismiss
    @State private var selectedPerson: Person?

    var body: some View {
        VStack {
            List(people) { person in
                Button(action: {
                    selectedPerson = person
                }) {
                    Text(person.name)
                }
            }
            
            Spacer()
            
            Button("Dismiss") {
                dismiss()
            }
        }
        .fullScreenCover(item: $selectedPerson) { person in
            PersonDetailView(person: person)
        }
    }
}

struct PersonDetailView: View {
    @Environment(\.dismiss) var dismiss
    let person: Person

    var body: some View {
        VStack {
            Spacer()
            Text(person.name)
                .font(.title)
            
            Spacer()
            
            Button("Dismiss") {
                dismiss()
            }
        }
        .padding()
    }
}

struct ContentView: View {
    var body: some View {
        PersonListView()
    }
}

- SHAH MD IMRAN HOSSAIN

Answer 2

使用.fullScreenCover(isPresented:onDismiss:content:)或.fullScreenCover(item:onDismiss:content:)修饰符：

struct ContentView: View {
    @State private var showingSheet = false
    
    var body: some View {
        Button("Show Sheet") {
            showingSheet.toggle()
        }
        .fullScreenCover(isPresented: $showingSheet) {
            SecondView(name: "Imran")
        }
    }
}

- Vadim Belyaev