SwiftUI 2 新组件之 Menu内置选择组件教程含源码

实战需求

SwiftUI 2之前没有特别好用的内部数据选择组件，iOS14给我们带来了Menu新组件。下面我们来全面体验新组件的强大功能吧！

本文价值与收获

看完本文后，您将能够作出下面的界面

Menu内置选择组件

组合使用Menu

支持选择内容

---

基础知识

Menu

用于显示动作菜单的控件。

struct Menu where Label : View, Content : View

使用教程

下面的示例显示了一个包含三个按钮的菜单和一个子菜单，该菜单包含其自己的三个按钮。

 Menu("基础内嵌式Menu") {
                Button("Duplicate", action: {})
                Button("Rename", action: {})
                Button("Delete…", action: {})
                Menu("Copy") {
                    Button("Copy", action: {})
                    Button("Copy Formatted", action: {})
                    Button("Copy Library Path", action: {})
                }
            }

您可以使用来创建菜单的标题，如上一个示例所示，或者使用视图创建器创建多个视图，例如图像和文本视图

 Menu {
                Button("Open in Preview", action: {})
                Button("Save as PDF", action: {})
            } label: {
                Image(systemName: "document")
                Text("自定义图文Menu")
            }

设置样式

使用修饰符可以更改视图中所有菜单的样式。下面的示例演示如何应用自定义样式：menuStyle(_:)

 Menu("Editing") {
                Button("Set In Point", action: {})
                Button("Set Out Point", action: {})
            }
            .menuStyle(BorderedButtonMenuStyle())

• struct DefaultMenuStyle
  默认菜单样式，基于菜单的上下文。
• struct BorderedButtonMenuStyle
  菜单样式，显示带边框的按钮，按下该按钮可切换菜单内容的显示。
• struct BorderlessButtonMenuStyle
  菜单样式，显示无边界按钮，按下该按钮即可切换菜单内容的显示。
• protocol MenuStyle
  一种类型，它将标准交互行为和自定义外观应用于视图层次结构中的所有菜单。

---

实战代码