MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

SwiftUI Sheet与Popover组件

2022-11-186.8k 阅读

SwiftUI Sheet 组件

Sheet 组件基础介绍

在 SwiftUI 应用开发中，Sheet 是一种常用的模态展示视图，它从屏幕底部向上滑动弹出，提供额外的内容或交互。Sheet 常用于展示详细信息、设置选项、表单填写等场景，为用户提供了一种简洁且直观的方式来与应用进行额外的交互，而不会打断主界面的整体流程。

显示简单 Sheet

要在 SwiftUI 中显示一个 Sheet，我们通常会结合 @State 变量来控制 Sheet 的显示与隐藏。以下是一个简单的示例，展示如何显示一个基本的 Sheet：

import SwiftUI

struct ContentView: View {
    @State private var isSheetPresented = false
    
    var body: some View {
        VStack {
            Button("Show Sheet") {
                isSheetPresented = true
            }
        }
       .sheet(isPresented: $isSheetPresented) {
            Text("This is a simple sheet.")
        }
    }
}

在上述代码中，我们定义了一个 @State 变量 isSheetPresented 来追踪 Sheet 是否显示。Button 的点击动作将 isSheetPresented 设置为 true，从而触发 sheet 修饰符显示 Sheet。sheet 修饰符接受一个 isPresented 参数，它是一个绑定的布尔值，用于控制 Sheet 的显示状态，同时还接受一个闭包，在闭包中我们定义了 Sheet 的内容，这里只是简单的一个 Text 视图。

自定义 Sheet 内容

Sheet 的内容可以是任何符合 View 协议的视图，这意味着我们可以创建非常复杂和自定义的 Sheet 界面。例如，我们可以创建一个带有表单的 Sheet：

struct FormSheetView: View {
    @State private var name = ""
    @State private var age = 0
    
    var body: some View {
        VStack {
            TextField("Enter your name", text: $name)
               .padding()
            Stepper("Age: \(age)", value: $age, in: 1...100)
               .padding()
            Button("Submit") {
                print("Name: \(name), Age: \(age)")
            }
           .padding()
        }
       .padding()
    }
}

struct ContentView: View {
    @State private var isSheetPresented = false
    
    var body: some View {
        VStack {
            Button("Show Form Sheet") {
                isSheetPresented = true
            }
        }
       .sheet(isPresented: $isSheetPresented) {
            FormSheetView()
        }
    }
}

在这个例子中，FormSheetView 定义了一个包含文本输入框和步进器的表单。ContentView 通过点击按钮显示 FormSheetView 作为 Sheet 的内容。用户在表单中输入姓名和年龄，点击提交按钮后，相关信息会在控制台打印出来。

传递数据到 Sheet

在实际应用中，我们经常需要将数据从主视图传递到 Sheet 中，或者从 Sheet 中返回数据给主视图。传递数据到 Sheet 相对简单，我们可以通过初始化器或属性来实现。

假设我们有一个展示用户列表的视图，点击某个用户可以在 Sheet 中查看该用户的详细信息：

struct User {
    let name: String
    let age: Int
}

struct UserDetailSheetView: View {
    let user: User
    
    var body: some View {
        VStack {
            Text("Name: \(user.name)")
               .padding()
            Text("Age: \(user.age)")
               .padding()
        }
       .padding()
    }
}

struct ContentView: View {
    @State private var isSheetPresented = false
    let user = User(name: "John Doe", age: 30)
    
    var body: some View {
        VStack {
            Button("Show User Detail Sheet") {
                isSheetPresented = true
            }
        }
       .sheet(isPresented: $isSheetPresented) {
            UserDetailSheetView(user: user)
        }
    }
}

在上述代码中，UserDetailSheetView 接受一个 User 类型的实例作为参数，并在视图中展示用户的姓名和年龄。ContentView 创建了一个 User 实例，并在点击按钮显示 Sheet 时，将该用户实例传递给 UserDetailSheetView。

从 Sheet 返回数据

从 Sheet 中返回数据稍微复杂一些，通常我们可以通过闭包回调或 Binding 来实现。以下是通过闭包回调返回数据的示例：

struct EditUserSheetView: View {
    @State private var name = ""
    @State private var age = 0
    let onSave: (String, Int) -> Void
    
    var body: some View {
        VStack {
            TextField("Enter your name", text: $name)
               .padding()
            Stepper("Age: \(age)", value: $age, in: 1...100)
               .padding()
            Button("Save") {
                onSave(name, age)
            }
           .padding()
        }
       .padding()
    }
}

struct ContentView: View {
    @State private var isSheetPresented = false
    @State private var editedName = ""
    @State private var editedAge = 0
    
    var body: some View {
        VStack {
            Text("Edited Name: \(editedName)")
            Text("Edited Age: \(editedAge)")
            Button("Edit User") {
                isSheetPresented = true
            }
        }
       .sheet(isPresented: $isSheetPresented) {
            EditUserSheetView(onSave: { name, age in
                self.editedName = name
                self.editedAge = age
            })
        }
    }
}

在这个例子中，EditUserSheetView 接受一个闭包 onSave，当用户点击保存按钮时，会调用这个闭包并传递编辑后的姓名和年龄。ContentView 定义了两个 @State 变量 editedName 和 editedAge 来接收从 Sheet 返回的数据，并在视图中显示出来。

Sheet 的样式与动画

SwiftUI 允许我们对 Sheet 的样式和动画进行一定程度的自定义。例如，我们可以设置 Sheet 的背景颜色、圆角半径等样式：

struct ContentView: View {
    @State private var isSheetPresented = false
    
    var body: some View {
        VStack {
            Button("Show Custom Sheet") {
                isSheetPresented = true
            }
        }
       .sheet(isPresented: $isSheetPresented) {
            Text("Custom Sheet")
               .padding()
               .background(Color.blue)
               .foregroundColor(.white)
               .cornerRadius(10)
        }
    }
}

在上述代码中，我们在 Sheet 的内容视图上添加了背景颜色、前景颜色和圆角半径的修饰符，使 Sheet 看起来更具个性化。

同时，SwiftUI 还提供了默认的动画效果，当 Sheet 显示和隐藏时会有平滑的过渡动画。如果需要自定义动画，我们可以使用 withAnimation 来控制动画的参数，例如动画时长、动画曲线等：

struct ContentView: View {
    @State private var isSheetPresented = false
    
    var body: some View {
        VStack {
            Button("Show Animated Sheet") {
                withAnimation(.easeInOut(duration: 0.5)) {
                    isSheetPresented = true
                }
            }
        }
       .sheet(isPresented: $isSheetPresented) {
            Text("Animated Sheet")
               .padding()
        }
    }
}

在这个例子中，我们使用 withAnimation 来设置 Sheet 显示时的动画效果，这里使用了 easeInOut 动画曲线，时长为 0.5 秒。

SwiftUI Popover 组件

Popover 组件基础介绍

Popover 是另一种模态展示视图，与 Sheet 不同，它通常从特定视图（如按钮、文本等）的位置弹出，以提供相关的辅助信息或操作选项。Popover 适用于在不打断用户主要操作流程的情况下，提供一些额外的上下文信息或快捷操作。

显示简单 Popover

在 SwiftUI 中显示 Popover，我们需要使用 popover 修饰符。以下是一个简单的示例，展示如何在点击按钮时显示 Popover：

import SwiftUI

struct ContentView: View {
    @State private var isPopoverPresented = false
    
    var body: some View {
        VStack {
            Button("Show Popover") {
                isPopoverPresented = true
            }
        }
       .popover(isPresented: $isPopoverPresented) {
            Text("This is a simple popover.")
        }
    }
}

与 Sheet 类似，我们使用一个 @State 变量 isPopoverPresented 来控制 Popover 的显示与隐藏。popover 修饰符接受一个 isPresented 参数，它是一个绑定的布尔值，用于控制 Popover 的显示状态，闭包内定义了 Popover 的内容。

自定义 Popover 内容

Popover 的内容同样可以是任何符合 View 协议的视图。我们可以创建一个包含复杂布局和交互的 Popover，例如一个带有多个选项的设置 Popover：

struct SettingsPopoverView: View {
    @State private var isDarkModeEnabled = false
    
    var body: some View {
        VStack {
            Toggle("Dark Mode", isOn: $isDarkModeEnabled)
               .padding()
            Button("Save") {
                print("Settings saved.")
            }
           .padding()
        }
       .padding()
    }
}

struct ContentView: View {
    @State private var isPopoverPresented = false
    
    var body: some View {
        VStack {
            Button("Show Settings Popover") {
                isPopoverPresented = true
            }
        }
       .popover(isPresented: $isPopoverPresented) {
            SettingsPopoverView()
        }
    }
}

在这个例子中，SettingsPopoverView 定义了一个包含切换开关和保存按钮的设置视图。ContentView 通过点击按钮显示 SettingsPopoverView 作为 Popover 的内容，用户可以在 Popover 中切换黑暗模式并保存设置。

定位 Popover

Popover 默认会从触发视图（如按钮）的中心位置弹出，但我们可以通过 arrowEdge 参数来指定 Popover 的箭头方向，从而改变其弹出位置。例如，我们可以让 Popover 从按钮的顶部弹出：

struct ContentView: View {
    @State private var isPopoverPresented = false
    
    var body: some View {
        VStack {
            Button("Show Top - Aligned Popover") {
                isPopoverPresented = true
            }
        }
       .popover(isPresented: $isPopoverPresented, arrowEdge:.top) {
            Text("This popover is aligned to the top of the button.")
               .padding()
        }
    }
}

在上述代码中，arrowEdge:.top 使得 Popover 从按钮的顶部弹出，并且会带有一个指向按钮的箭头。除了 .top，还可以使用 .bottom、.leading 和 .trailing 来分别指定底部、左侧和右侧弹出。

传递数据到 Popover 及返回

与 Sheet 类似，我们可以通过初始化器或属性将数据传递到 Popover 中，也可以通过闭包回调或 Binding 从 Popover 中返回数据。

假设我们有一个展示图片的视图，点击图片可以弹出一个 Popover 来显示图片的详细信息，并且可以在 Popover 中对图片的描述进行编辑并返回：

struct ImageDetail {
    let name: String
    let description: String
}

struct ImageDetailPopoverView: View {
    @State private var editedDescription = ""
    let imageDetail: ImageDetail
    let onSave: (String) -> Void
    
    init(imageDetail: ImageDetail, onSave: @escaping (String) -> Void) {
        self.imageDetail = imageDetail
        self.editedDescription = imageDetail.description
        self.onSave = onSave
    }
    
    var body: some View {
        VStack {
            Text("Image Name: \(imageDetail.name)")
               .padding()
            TextField("Edit description", text: $editedDescription)
               .padding()
            Button("Save") {
                onSave(editedDescription)
            }
           .padding()
        }
       .padding()
    }
}

struct ContentView: View {
    @State private var isPopoverPresented = false
    @State private var editedImageDescription = ""
    let imageDetail = ImageDetail(name: "Sample Image", description: "This is a sample image.")
    
    var body: some View {
        VStack {
            Text("Edited Description: \(editedImageDescription)")
            Button("Show Image Detail Popover") {
                isPopoverPresented = true
            }
        }
       .popover(isPresented: $isPopoverPresented) {
            ImageDetailPopoverView(imageDetail: imageDetail, onSave: { description in
                self.editedImageDescription = description
            })
        }
    }
}

在这个例子中，ImageDetailPopoverView 接受一个 ImageDetail 实例和一个闭包 onSave。在初始化时，将图片的原始描述赋值给 editedDescription。用户在 Popover 中编辑描述并点击保存按钮后，闭包会被调用并传递编辑后的描述，ContentView 中的 editedImageDescription 会更新并显示出来。

Popover 的样式与交互

我们可以对 Popover 的样式进行自定义，比如设置背景颜色、圆角半径、文本样式等。同时，Popover 也支持各种交互，如手势识别等。

struct ContentView: View {
    @State private var isPopoverPresented = false
    
    var body: some View {
        VStack {
            Button("Show Custom Popover") {
                isPopoverPresented = true
            }
        }
       .popover(isPresented: $isPopoverPresented) {
            Text("Custom Popover")
               .padding()
               .background(Color.green)
               .foregroundColor(.white)
               .cornerRadius(10)
               .onTapGesture {
                    print("Popover tapped.")
                }
        }
    }
}

在上述代码中，我们为 Popover 的内容视图添加了背景颜色、前景颜色、圆角半径的样式修饰符，并且添加了一个点击手势识别器，当用户点击 Popover 时，会在控制台打印出相应信息。

Sheet 与 Popover 的比较与应用场景选择

比较

  1. 弹出位置与方式：Sheet 从屏幕底部向上滑动弹出，而 Popover 从特定视图（如按钮）的位置弹出，通常带有箭头指示触发源。这种弹出位置和方式的不同，决定了它们在用户体验和信息展示上的差异。Sheet 更适合展示相对独立且需要用户专注交互的内容，因为它占据较大屏幕空间，会吸引用户的主要注意力；而 Popover 更适合提供与特定元素相关的辅助信息或快捷操作，它不会占据过多屏幕空间，用户可以在不打断主要操作流程的情况下查看和操作。
  2. 使用场景差异：Sheet 常用于展示详细信息、设置页面、表单填写等场景。例如，在电商应用中，点击商品进入详细信息页面，这个详细信息页面可能以 Sheet 的形式呈现，用户可以专注地查看商品的各种细节、规格等信息。而 Popover 常用于提供与特定视图相关的额外信息或操作选项。比如在地图应用中，点击某个地标图标弹出一个 Popover，显示该地标的名称、简介以及一些快捷操作，如导航到该地标等。
  3. 交互复杂度：由于 Sheet 占据较大屏幕空间，通常可以承载更复杂的交互，如多个表单字段的填写、复杂的布局等。Popover 由于空间相对较小，交互通常较为简单，以快捷操作为主，如几个选项的选择、简单的文本输入等。

应用场景选择

  1. 当需要用户专注完成某项任务时：如果应用需要用户填写表单、设置复杂选项等，Sheet 是更好的选择。例如，在创建新文档时，弹出一个 Sheet 来填写文档标题、内容、设置格式等，用户可以在这个独立的空间内专注完成任务，而不会被主界面的其他元素干扰。
  2. 当提供与特定元素相关的辅助信息时：如果只是需要提供与某个按钮、图标或文本相关的简短信息或快捷操作，Popover 更为合适。比如在日历应用中，点击某一天的日期弹出 Popover，显示当天的日程安排摘要以及快速添加日程的按钮。
  3. 考虑用户操作流程的连贯性：如果弹出的内容是主流程的一部分，且需要用户完成操作后才能继续主流程，Sheet 比较适合，因为它会暂时中断主界面操作，直到用户完成 Sheet 中的任务。而如果弹出的内容只是辅助信息或不影响主流程的快捷操作，Popover 能更好地保持主操作流程的连贯性。

通过合理选择和使用 Sheet 与 Popover 组件，我们可以为用户提供更加友好、高效的交互体验，提升应用的整体质量和用户满意度。在实际开发中，需要根据具体的业务需求和用户体验目标来决定使用哪种组件，或者在不同场景下灵活搭配使用。无论是 Sheet 还是 Popover，都为我们构建丰富、易用的 SwiftUI 应用提供了强大的工具。