模态呈现：Sheet 与 FullScreenCover

模态呈现基础

在 SwiftUI 中，模态呈现是一种强大的方式，用于临时显示内容，而无需改变底层视图层次结构。你可以使用 sheet 和 fullScreenCover 这两种修饰符来实现。它们提供了一种优雅的用户体验，确保用户专注于当前任务。 🚀

模态视图通常用于收集用户输入、显示详细信息或提供临时选项。例如，一个注册表单或一个图片预览。

Sheet 的使用

sheet 修饰符用于呈现一个从屏幕底部滑入的视图。它通常用于显示次要内容或临时任务。你可以通过绑定一个布尔状态变量来控制其显示与隐藏。

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

    var body: some View {
        Button("显示 Sheet") {
            showingSheet = true
        }
        .sheet(isPresented: $showingSheet) {
            SheetView()
        }
    }
}

struct SheetView: View {
    var body: some View {
        Text("这是一个 Sheet 视图！")
            .font(.largeTitle)
            .padding()
    }
}

Sheet 视图在 iPad 上会以卡片形式呈现，而在 iPhone 上则会覆盖大部分屏幕。这种自适应行为非常棒！

FullScreenCover 的应用

fullScreenCover 修饰符则用于呈现一个完全覆盖整个屏幕的视图。它适用于需要用户完全沉浸的场景，例如：

• 引导页
• 重要的警告信息
• 复杂的表单

与 sheet 类似，你也可以通过绑定一个布尔状态变量来控制 fullScreenCover 的显示。

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

    var body: some View {
        Button("显示全屏覆盖") {
            showingFullScreenCover = true
        }
        .fullScreenCover(isPresented: $showingFullScreenCover) {
            FullScreenCoverView()
        }
    }
}

struct FullScreenCoverView: View {
    var body: some View {
        ZStack {
            Color.blue.ignoresSafeArea()
            Text("这是一个全屏覆盖视图！")
                .font(.largeTitle)
                .foregroundColor(.white)
        }
    }
}

使用 fullScreenCover 时，用户无法通过轻扫手势关闭视图，这确保了更高的用户注意力。

模态呈现的最佳实践

选择 sheet 还是 fullScreenCover 取决于你的具体需求。以下是一些指导原则：

• Sheet:
  • 用于次要任务或临时信息。
  • 允许用户轻松返回上一个视图。
  • 例如：设置选项、快速编辑。
• FullScreenCover:
  • 用于需要用户完全关注的重要任务。
  • 通常需要用户明确操作才能关闭。
  • 例如：首次启动教程、重要确认。

根据一项用户体验研究，正确使用模态呈现可以提高用户完成任务的效率达 25%！ 📈 确保你的应用设计直观且高效。