SwiftUI - 菜单

SwiftUi 中的菜单视图用于创建包含一组相关操作的弹出菜单或下拉菜单。当我们单击某些指定的按钮或选项卡时，当前视图上会出现一个包含项目列表的菜单，用户可以从中选择所需的选项。菜单可以包含多个按钮，点击后可执行各种操作。

在 SwiftUI 中创建菜单

在 SwiftUI 中，我们可以借助 菜单视图 非常轻松地创建菜单。菜单视图从本地化字符串键创建一个包含标签的菜单。菜单可以包含嵌套菜单，或者我们可以说菜单可以包含子菜单。

语法

以下是语法 −

Menu(
   _ titleKey: LocalizedStringKey,
   @ViewBuilder content: () -> Content
) where Label == Text

参数

此视图使用以下参数 −

• titleKey:代表菜单的内容。

• content:表示菜单项组。

重载菜单方法

我们还可以按以下方式使用菜单视图 −

示例 1

以下 SwiftUI 程序创建菜单。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Menu("Edit"){
            Button("Paste", action: paste)
            Button("Cut", action: cut)
            Button("Undo", action: undo)
            Button("Select", action: select)
         }
      }
   }
   func paste(){
      print("Data is pasted")
   }
   func cut(){
      print("Data is removed")
   }
   func undo(){
      print("Data is undo")
   }
   func select(){
      print("Data is selected")
   }
}
#Preview {
   ContentView()
}

输出

示例 2

以下 SwiftUI 程序创建带有标签和嵌套菜单的菜单。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         
         // 带标签的菜单
         Menu{
            Button("Open", action: openfile)
            Button("New", action: newfile)
            Button("Save", action: savefile)
            Button("Save As", action: saveasfile)
            Menu("Recent Open"){
               Button("file1", action:file1)
               Button("file2", action:file3)
               Button("file3", action:file3)
            }
            
         }label:{
            Label("File", systemImage: "doc").font(.title)
         }
      }
   }
   func openfile(){
      print("File is opened")
   }
   func newfile(){
      print("New File")
   }
   func savefile(){
      print("File is saved")
   }
   func saveasfile(){
      print("Save as file")
   }
   func file1(){
      print("File 1 is opened")
   }
   func file2(){
      print("File 2 is opened")
   }
   func file3(){
      print("File 3 is opened")
   }
}
#Preview {
   ContentView()
}

输出

SwiftUI 中菜单中的主要操作

在 SwiftUI 中，我们可以创建一个带有一些自定义主要操作的菜单，其中主要操作允许我们定义一个默认操作，该操作在单击菜单后立即执行，而不是显示选项列表。在这种情况下，显示选项列表是主要操作的次要操作。当我们在提供一些附加选项列表的同时执行用户执行的主要操作时，它很有用。

例如，发送按钮的主要目的是发送消息，但我们也可以在菜单中提供其他选项，例如"稍后发送"、"立即发送"或"发送附件"。

因此，当我们按下菜单按钮时，主要操作将执行。当我们长按菜单按钮时，将显示选项列表。我们可以借助 primaryAction 参数向菜单添加主要操作。

语法

以下是语法 −

Menu{
   // body
}primaryAction:{

}

示例

以下 SwiftUI 程序创建一个具有主要操作的菜单。

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack{
         
         // 带标签的菜单
         Menu{
            Button("Open", action: openfile)
            Button("New", action: newfile)
            Button("Save", action: savefile)
            Button("Save As", action: saveasfile)
         }label:{
            Label("File", systemImage: "doc").font(.title)
         }primaryAction: {
            addSource()
         }
      }
   }
   func openfile(){
      print("File is opened")
   }
   func newfile(){
      print("New File")
   }
   func savefile(){
      print("File is saved")
   }
   func saveasfile(){
      print("Save as file")
   }
   func addSource(){
      print("Source code is added")
   }
}
#Preview {
   ContentView()
}

输出

在 SwiftUI 中设置菜单样式

在 SwiftUI 中，我们可以借助预定义的 menuStyle() 修饰符来设置菜单样式。使用此修饰符，我们可以将预定义样式应用于菜单，也可以为菜单创建自定义样式。

语法

以下是语法 −

func menuStyle(menuStyle)

示例

以下 SwiftUI 程序创建带有标签和嵌套菜单的菜单。

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack{
         Menu("File"){
            Button("Open", action: openfile)
            Button("New", action: newfile)
            Button("Save", action: savefile)
            Button("Save As", action: saveasfile)
         }.menuStyle(.borderlessButton)
      }
   }
   func openfile(){
      print("File is opened")
   }
   func newfile(){
      print("New File")
   }
   func savefile(){
      print("File is saved")
   }
   func saveasfile(){
      print("Save as file")
   }
   func addSource(){
      print("Source code is added")
   }
}
#Preview {
   ContentView()
}   

输出