SwiftUI — sheet 和 inspector

在 SwiftUI 中，inspector 和 sheet 都是弹出式组件的展示方式，但它们的用途和交互模式有显著的区别。了解它们的区别可以帮助开发者选择合适的组件来实现特定的 UI/UX 目标。

1. 简介：Inspector 和 Sheet #

  • sheet：

    • sheet 是 SwiftUI 中用于展示一个模态视图（全屏或半屏）的组件。它通常覆盖当前内容部分或全部，并要求用户与其进行一些具体的交互，比如填写表单、查看详情等。
    • 示例场景：
      • 显示一个全屏/半屏的表单。
      • 弹出一个操作菜单或设置屏幕。

  • inspector：

    • inspector 是一种更轻量级、非模态的上下文用户界面，允许用户在不离开当前视图的情况下检查、查看或编辑与当前内容相关的额外信息。它通常存在于某个特定的屏幕区域而不是覆盖整个视图。
    • 示例场景：
      • 显示额外的属性信息。
      • 提供上下文相关的选项或附加设置。

由于 inspector 几乎没有标准化的实现，开发者在不同的平台（例如 macOS 和 iPadOS）可能需要自己构建这一组件，而在 Apple 的文档中，inspector 概念常见于 macOS 的多窗口支持。

2. 使用场景和交互逻辑比较 #

特性InspectorSheet
展示方式通常在一个指定区域显示（例如侧边栏或弹出的上下文窗口），在用户仍然可以看到其上下文的情况下展示附加信息。以模态形式弹出，覆盖当前视图区域的部分或全部，用户需要与弹出的内容完成交互后才能返回。
覆盖范围不覆盖当前主要内容，用户可以与当前界面内容同时交互；是非模态的展示方式。覆盖当前内容部分或全部，通常阻止用户与背景内容交互；是模态的展示方式。
使用平台常见于 macOS 和 iPadOS 的上下文操作（如侧边栏中的信息显示，文件属性修改等）。在 iOS、iPadOS 和 macOS 中常用，特别是在小屏幕的移动设备上用于弹出重要内容窗口。
交互方式轻量级，可以无需关闭 Inspector 窗口继续与主界面交互，通常用于提高生产力（例如，文件整理或快速属性修改）。需要用户与 sheet 的内容完成交互（如关闭 sheet 或触发事件），然后回到主界面。
用途提供上下文相关的信息，通常设计用于快速检查或编辑信息，例如文件属性、格式化选项、颜色选择等。提供更大的设计空间，适合需要复杂交互、完成任务、填表单或执行子操作的场景，例如用户设置或者提交信息表单。
调用和管理通常是一个较轻量级的附加 UI，可以通过绑定 State 或直接展示、隐藏 Inspector 内容。自然地弹出并需要通过 .sheet() 管理其状态和显示，显示期间会阻止主界面操作。

3. 示例代码分析 #

3.1 sheet 的使用 #

sheet 是 SwiftUI 中十分常见的 UI 组件，用于弹出模态窗口。以下是一个典型的例子：

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

    var body: some View {
        Button("Show Sheet") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            VStack {
                Text("This is a Sheet")
                    .font(.largeTitle)
                    .padding()
                    
                Button("Dismiss") {
                    showSheet = false
                }
            }
        }
    }
}

工作机制： #

  1. isPresented: $showSheet 绑定了布尔值，当 showSheet 设置为 true 时，sheet 弹出。
  2. sheet 是模态的，会覆盖屏幕的部分内容并暂停用户对背景内容的交互。
  3. 用户需要关闭 Sheet（通过点击关闭按钮）才能返回到主界面。

输出效果： #

  • 弹出一个模态窗口，常用于任务完成后关闭，比如显示一个表单。

3.2 模拟 Inspector 的实现 #

虽然 SwiftUI 中并没有直接提供 inspector 的概念组件，但可以通过某些技术（如弹出的轻型视图、popover 或侧边栏）来构建它。在以下示例中，我们通过一个弹出的面板模拟 Inspector 的行为：

struct InspectorExample: View {
    @State private var showInspector = false

    var body: some View {
        VStack {
            Button("Toggle Inspector") {
                showInspector.toggle()
            }
            .padding()
            
            Spacer()
        }
        .overlay(
            Group {
                if showInspector {
                    VStack(alignment: .leading) {
                        Text("Inspector Panel")
                            .font(.headline)
                            .padding()
                        
                        Text("Additional settings or details can go here.")
                            .padding()
                        
                        Button("Close Inspector") {
                            showInspector.toggle()
                        }
                        .padding()
                    }
                    .frame(maxWidth: 300)
                    .background(Color(UIColor.secondarySystemBackground))
                    .cornerRadius(10)
                    .shadow(radius: 5)
                    .padding()
                    .transition(.move(edge: .trailing))
                }
            },
            alignment: .trailing // Inspector 面板从右侧出现
        )
        .animation(.default, value: showInspector)
    }
}

工作机制： #

  1. 使用 @State 管理 showInspector 的状态，点击 “Toggle Inspector” 按钮切换显示或隐藏。
  2. 使用 overlay 将 Inspector 面板添加到主视图的右侧区域，不会完全阻止用户与主界面的其他内容交互。
  3. 通过实现 动画 让 Inspector 入场和退出时更平滑。

输出效果： #

  • 轻量级的面板从右侧弹入，可以快速查看或更改设置，同时允许用户继续与主界面内容互动。

4. 实际使用场景对比 #

4.1 Inspector 的典型场景 #

  • macOS Finder 的“检查器”功能：

    • 选中文件后，用户可以进入 Finder 的“检查器”，显示文件的详细信息或者属性设置，并可以快速修改。
    • 适用于用户需要对当前内容进行快速编辑或查询，而无需改变当前视图上下文的场景。

  • iPad 上的侧边属性面板：

    • 图形编辑应用（如 Keynote 或 Pages）经常有“属性检查器”，在侧边栏显示图形的配置信息，允许用户调整颜色、尺寸等属性。
    • 选中某个对象时，显示该对象的上下文关联设置，但主界面始终保持互动。

4.2 Sheet 的典型场景 #

  • 全屏或半屏表单输入：

    • 用户弹出一个 Modal 界面需要完成某个任务，如输入用户信息、填写表单、完成某些特定的操作（如付款流程）。
    • sheet 遮挡了当前视图，因此用户的注意力被集中到当前表单任务中。

  • 操作不可中断：

    • 当某些操作需要“阻止”用户继续与主界面交互时，可以用 sheet 强制用户完成任务后再返回主界面。
    • 比如：展示隐私策略页面，用户必须点击“同意”后才能继续操作。

5. 总结 #

属性InspectorSheet
覆盖范围局部区域（通常显示在侧边框或弹出的轻量视图上）覆盖主视图的部分或全部区域
交互模式用户可以继续与主界面交互用户需要完成任务后才能返回主界面
效果和用途检查或调整上下文关联的小范围内容用于完成特定的交互任务（例如表单、详情查看）
使用场景快速属性编辑、查看文件细节（例如 macOS 的检查器）表单填写、查看信息详情、一步完成的子任务
平台偏好常见于 macOS 和 iPadOS（更多用于多窗口和复杂界面）常见于 iOS, iPadOS 和 macOS；适合任何屏幕

选择指南： #

  • 使用 sheet： 如果需要覆盖整个界面弹出模态视图并强制用户完成交互，使用 sheet 是首选。
  • 使用 inspector： 如果需要轻量级且上下文关联的附加信息 UI，同时维持主要视图的交互性，使用 inspector 是更好的选择。
本文共 2151 字，上次修改于 Jan 4, 2025