View — Menu

在 SwiftUI 中，Menu 是一个用于创建下拉式菜单（Dropdown Menu）的控件。它可以在按钮被点击时动态显示多个操作选项，提供了一种简洁、直观的用户交互方式。在用户选择某个选项后，可以触发具体操作。

1. Menu 的基础语法 #

Menu 的基本语法如下：

Menu {
    // 菜单内容 (如 Button 或其他视图)
} label: {
    // 外部的标签内容 (通常是文案或图标)
}

参数说明： #

  • content（必需）：下拉菜单的菜单项内容，可以包含多个 Button 或其他视图。
  • label（必需）：定义 Menu 的外部显示内容，例如一个图标、文字或复杂的视图。

2. 基本示例 #

示例：文本选项菜单 #

import SwiftUI

struct MenuExampleBasic: View {
    var body: some View {
        Menu {
            Button("Option 1", action: { print("Selected Option 1") })
            Button("Option 2", action: { print("Selected Option 2") })
            Button("Option 3", action: { print("Selected Option 3") })
        } label: {
            Text("Show Menu")
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
    }
}

效果： #

  1. 显示一个名为 “Show Menu” 的按钮。
  2. 点击后弹出一个下拉菜单，包含三个选项：“Option 1”、“Option 2”、“Option 3”。
  3. 选择某一个选项后，控制台会打印对应的选项。

3. 添加图标到菜单项 #

每个菜单项可以配合图标（Image）一起使用，为用户提供更加直观的视觉指引。

示例：带图标的菜单 #

struct MenuExampleIcons: View {
    var body: some View {
        Menu {
            Button(action: { print("Edit action") }) {
                Label("Edit", systemImage: "pencil")
            }
            Button(action: { print("Delete action") }) {
                Label("Delete", systemImage: "trash")
            }
            Button(action: { print("Share action") }) {
                Label("Share", systemImage: "square.and.arrow.up")
            }
        } label: {
            Label("Actions", systemImage: "ellipsis.circle")
                .font(.title2)
        }
    }
}

效果： #

  • 外部按钮显示为一个带有图标的标题 “Actions”。
  • 菜单项包含图标，例如“编辑”使用 pencil 图标，“删除”使用 trash 图标，“分享”使用 square.and.arrow.up 图标。

4. 动态绑定菜单选项（与状态结合） #

可以通过 @State 给 Menu 动态绑定选项，并在用户选择时更新当前选中的状态。

示例：选择状态的菜单 #

struct MenuWithState: View {
    @State private var selectedOption = "Option 1" // 默认选项

    var body: some View {
        VStack {
            Menu {
                Button(action: { selectedOption = "Option 1" }) {
                    Text("Option 1")
                }
                Button(action: { selectedOption = "Option 2" }) {
                    Text("Option 2")
                }
                Button(action: { selectedOption = "Option 3" }) {
                    Text("Option 3")
                }
            } label: {
                Text("Selected: \(selectedOption)")
                    .padding()
                    .background(Color.gray.opacity(0.2))
                    .cornerRadius(8)
            }
            .padding()

            Text("You selected: \(selectedOption)")
                .font(.headline)
        }
    }
}

效果： #

  • selectedOption 会显示为当前选中的选项值。
  • 用户点击菜单并选择某个选项后，选中的值会动态更新到页面上。

5. 在菜单中嵌套更多视图 #

Menu 的内容不仅限于简单按钮，还可以嵌套带导航的菜单、分组等复杂内容。

示例：嵌套菜单和分组 #

struct NestedMenuExample: View {
    var body: some View {
        Menu {
            Text("Quick Actions:")
                .font(.headline)
                .padding(.vertical)

            Button(action: { print("Action 1 triggered") }) {
                Text("Action 1")
            }
            Button(action: { print("Action 2 triggered") }) {
                Text("Action 2")
            }

            Menu("More Options") { // 嵌套菜单
                Button("Sub Action 1", action: { print("Sub Action 1") })
                Button("Sub Action 2", action: { print("Sub Action 2") })
            }
        } label: {
            Label("Actions", systemImage: "ellipsis.circle.fill")
                .font(.title)
        }
    }
}

效果： #

  • 菜单内容分组，顶部显示一个静态的 “Quick Actions” 标签。
  • 包含两个直接操作的选项。
  • 子菜单 “More Options” 会展开更多选项。

6. 自定义菜单样式 #

如果你想完全自定义显示的菜单，可以结合 Menu 的 label 和内容自定义样式。

示例：自定义外观 #

struct CustomStyledMenu: View {
    var body: some View {
        Menu {
            Button("Option A", action: { print("Option A") })
            Button("Option B", action: { print("Option B") })
        } label: {
            HStack {
                Text("Menu")
                    .font(.headline)
                    .foregroundColor(.white)
                Image(systemName: "arrowtriangle.down.fill")
                    .foregroundColor(.white)
            }
            .padding()
            .background(Color.blue)
            .cornerRadius(8)
        }
    }
}

效果： #

  • 菜单的外部显示被自定义为具有 HStack 结构（文字 + 图标）。
  • 外观样式被设计为蓝色背景的按钮，带有下箭头图标。

7. 响应式菜单（例如动态状态显示） #

Menu 也可以根据应用状态动态生成选项内容。

示例：动态生成菜单项 #

struct DynamicMenuView: View {
    @State private var isLoggedIn = true

    var body: some View {
        Menu {
            if isLoggedIn {
                Button("Logout", action: { isLoggedIn = false })
            } else {
                Button("Login", action: { isLoggedIn = true })
            }
        } label: {
            Label(isLoggedIn ? "Profile" : "Login", systemImage: isLoggedIn ? "person.fill" : "person")
        }
    }

效果： #

  • Menu 的内容根据 isLoggedIn 的状态动态变化。
    • 如果用户已登录，显示 “Logout” 操作。
    • 如果用户未登录，显示 “Login” 操作。
  • 外部标签根据登录状态动态变化。

注意事项 #

1. Menu 的样式限制： #

  • Menu 本身没有直接的样式选项，它的表现受制于系统样式。
    • 如果需要完全自定义菜单外观，可以通过自定义修饰符或按钮模拟弹窗（如 Popover 或 Overlay）实现。

2. 菜单内容复杂性： #

  • 虽然 Menu 可以嵌套子内容（如子菜单、文本视图等），但它更适合轻量级操作。如果需要复杂的自定义交互，可以考虑使用 Popover 或实现自定义视图。

3. iOS 版本要求： #

  • Menu 组件在 iOS 14+ 中可用，部分用户可能需要检查版本支持。

总结 #

  • 轻量级且易用：快速实现下拉菜单操作。
  • 系统原生设计：保证一致的视觉和手势交互。
  • 灵活：支持嵌套菜单、按钮、分割静态内容等多种功能。
  • 动态绑定：便于与应用的状态同步。

适用场景： #

  • 显示一组操作，例如文件选项（编辑、删除、分享）。
  • 简单的选择器。
  • 嵌套交互（如 “更多选项” 子菜单）。

Menu 是 SwiftUI 的一个强大组件，为开发者提供了快速构建用户友好菜单的能力，同时具备了足够的灵活性来适应不同的 UI 需求。

对比：Picker with .menu vs Menu #

在 SwiftUI 中，Picker with .menu style 和 Menu 组件 都可以用于实现下拉菜单的功能，但它们各自的特点和适用场景有所不同。选择使用哪种组件，需要根据你的功能需求、用户体验要求以及设计目标来决定。

特性/区别Picker with .menuMenu
主要用途用于绑定到某个值，适合直接选择选项并更新状态。多用于触发操作或显示选择列表，与状态不强绑定。
用户交互显示类似下拉菜单的 UI，用户选择一个值后菜单自动关闭。显示类似下拉菜单的 UI，可包含选项触发的操作（不需要与状态绑定）。
数据绑定（必选值）需要绑定一个状态值（例如 @State），用户的选择会自动更新到绑定变量。不强制绑定状态，可以通过按钮执行操作，也可以手动管理选项。
功能复杂度适合简单的选项列表（如数据过滤、设置页面的单选选项）。更灵活，适用于包含按钮、嵌套菜单、自定义行为的场景。
菜单内容支持仅支持简单的选项 (Picker 的选项通常为 Text)，不适合复杂内容展示。可以包含图标、文本、按钮、自定义视图甚至嵌套子菜单。
下拉样式控制可以通过 .menu 样式切换为类似下拉菜单的外观，但本质仍为单选控件。默认显示为一个菜单，可以灵活设计样式，支持更多的视觉元素和操作能力。
扩展能力受限于 Picker 的样式（例如 .menu 风格或 .wheel 风格）；不支持多层嵌套菜单。支持嵌套菜单、多功能操作，且可以根据状态动态调整菜单内容。
iOS 版本兼容iOS 14 或更高版本。iOS 14 或更高版本。

Picker with .menu 的适用场景 #

Picker 是一种 状态绑定组件，性能轻量，样式直观，非常适合以下场景：

  1. 简单状态绑定选项：
    如果需要让用户从一组选项中选择一个，并且你希望直接将用户选择的结果绑定到某个值，例如：

    • 表单： 选择性别、语言、主题等。
    • 设置： 声音模式、显示模式等。
    • 过滤器： 数据表格排序方式（升序/降序）。

  2. 用户必须做出选择：
    如果你的下拉选项要求用户必须选择一个值并更新绑定状态。

  3. 使用简单内容：
    选项本身没有特殊图标或高度自定义内容，只包含简单的 Text。

示例：状态绑定选择器 #

以下 Picker 示例适用于在设置页面中选择主题颜色（浅色或深色）：

struct PickerExample: View {
    @State private var selectedTheme = "Light" // 默认选项
    let themes = ["Light", "Dark", "System"]

    var body: some View {
        Picker("Select Theme", selection: $selectedTheme) {
            ForEach(themes, id: \.self) { theme in
                Text(theme)
            }
        }
        .pickerStyle(MenuPickerStyle()) // 下拉菜单样式
        .padding()
    }
}

特点： #

  • 用户选择后，selectedTheme 的值会自动更新为所选项。
  • Picker 只能做一个简单选择，没有复杂的交互能力。

Menu 是一种 功能触发组件，其设计更灵活，适合在以下场景中使用：

  1. 操作触发菜单：
    如果选项需要触发操作，而不是简单地绑定到某个状态，例如：

    • 文件管理： 复制、移动、删除等操作。
    • 社交分享： 分享到微信、微博、Twitter 等。
    • 编辑功能： 剪切、粘贴、复制。

  2. 支持复杂的菜单内容：
    如果菜单需要显示额外的信息，比如图标、分组，甚至是多层嵌套子菜单。
    例如：

    • 菜单项前需要加一个图标。
    • 菜单需要分组显示。

  3. 动态展示：
    如果菜单内容或交互逻辑需要根据状态动态变更，例如：

    • 根据登录状态显示不同的操作项（登录后显示“注销”，未登录显示“登录”）。
    • 菜单项可被动态添加或删除。

  4. 不需要绑定的场景：
    如果菜单的选项无需直接与状态绑定，而只是触发某个动作或执行行为。

示例：触发操作的功能菜单 #

以下 Menu 示例展示用户操作菜单：

struct MenuExample: View {
    @State private var selectedOption = "None"

    var body: some View {
        Menu {
            Button(action: { selectedOption = "Edit" }) {
                Label("Edit", systemImage: "pencil")
            }
            Button(action: { selectedOption = "Delete" }) {
                Label("Delete", systemImage: "trash")
            }
            Menu("More Options") { // 子菜单
                Button("Share via Email", action: { selectedOption = "Share via Email" })
                Button("Share via Messages", action: { selectedOption = "Share via Messages" })
            }
        } label: {
            Label("Actions", systemImage: "ellipsis.circle")
        }
    }
}

特点： #

  • 点击选项后，会触发对应的操作（如更新状态、执行逻辑等）。
  • 菜单支持嵌套子菜单（如 “More Options” 子菜单）。
  • 菜单内容高度可定制，可以灵活包含图标和附加信息。

如何在二者之间选择？ #

  1. 是否需要绑定状态值？

    • 是：选择 Picker。
    • 否：选择 Menu。

  2. 菜单内容单一还是复杂？

    • 单一（只有简单文字选项）：选择 Picker。
    • 复杂（需要图标、分组、多层菜单）：选择 Menu。

  3. 菜单的功能是什么？

    • 选取一个值并更新绑定状态：Picker。
    • 执行某个操作，比如触发事件或导航等：Menu。

  4. 是否需要功能扩展（嵌套/动态生成）？

    • 不需要：选择 Picker。
    • 需要：选择 Menu。

对比总结：快速选择指南 #

场景/需求选择组件
用户需要选择并绑定值Picker
菜单项简单，没有图标或动态内容Picker
菜单项较复杂，需要图标或者分层结构Menu
菜单项为操作类型（触发功能）Menu
菜单内容需要根据状态动态调整Menu
类似表单中的单值选取控件Picker

高阶建议 #

  • 如果你需要一个控件既能绑定状态值又能支持复杂的内容显示，可以考虑先使用 Picker，再扩展其样式。
  • 对于复杂场景，可以结合 Menu 与 Popover 等组件，通过自定义进一步完善用户交互设计。

通过以上比较和分析，你可以根据具体的需求决定选择使用 Picker with .menu style 或 Menu 来构建下拉交互界面。

本文共 3492 字，上次修改于 Jan 22, 2025