SwiftUI 教程

SwiftUI - 主页 SwiftUI - 概览 SwiftUI 与 UIkit

SwiftUI 环境

SwiftUI - 环境设置 SwiftUI - 基本组件 SwiftUI - 构建第一个应用程序

SwiftUI 视图

SwiftUI - 视图 SwiftUI - 自定义文本视图 SwiftUI - 自定义图像视图 SwiftUI - 堆栈

SwiftUI 绘制形状

SwiftUI - 形状 SwiftUI - 绘制线条 SwiftUI - 绘制矩形 SwiftUI - 绘制圆角矩形 SwiftUI - 绘制三角形 SwiftUI - 绘制圆形 SwiftUI - 绘制星形 SwiftUI - 绘制多边形 SwiftUI - 绘制饼图 SwiftUI - 使用内置形状

SwiftUI - 文本

SwiftUI - 文本视图 SwiftUI - 文本输入和输出

SwiftUI - 颜色

SwiftUI - 颜色 SwiftUI - 颜色选择器 SwiftUI - 渐变 SwiftUI - 调整颜色

SwiftUI - 效果

SwiftUI - 效果 SwiftUI - 混合效果 SwiftUI - BLur 效果 SwiftUI - 阴影效果 SwiftUI - 悬停效果

SwiftUI - 动画

SwiftUI - 动画 SwiftUI - 创建动画 SwiftUI - 创建显式动画 SwiftUI - 多个动画 SwiftUI - 过渡 SwiftUI - 不对称过渡 SwiftUI - 自定义过渡

SwiftUI - 图像

SwiftUI - 图像 SwiftUI - 图像作为背景 SwiftUI - 旋转图像 SwiftUI - 媒体

SwiftUI - 视图布局

SwiftUI - 视图布局 SwiftUI - 视图大小 SwiftUI - 视图间距 SwiftUI - 视图填充

SwiftUI - UI 控件

SwiftUI - UI 控件 SwiftUI - 按钮 SwiftUI - 复选框 SwiftUI - 菜单栏 SwiftUI - 工具栏 SwiftUI - 搜索栏 SwiftUI - 文本字段 SwiftUI - 滑块 SwiftUI - 切换 SwiftUI - 选择器 SwiftUI - 菜单

SwiftUI - 列表 &表格

SwiftUI - 列表 SwiftUI - 静态列表 SwiftUI - 动态列表 SwiftUI - 自定义列表 SwiftUI - 表格

SwiftUI - 表单

SwiftUI - 表单 SwiftUI - 在部分中拆分表单

SwiftUI - 事件处理

SwiftUI - 事件处理 SwiftUI - 手势 SwiftUI - 剪贴板 SwiftUI - 拖放 SwiftUI - 焦点 SwiftUI - 警报

SwiftUI - 杂项

SwiftUI - 容器 SwiftUI - 导航 SwiftUI - 通知 SwiftUI - 跨平台 UI SwiftUI - 数据 SwiftUI - 可访问性

SwiftUI - 框架集成

SwiftUI - 框架集成 SwiftUI - 与 UIKit 交互 SwiftUI - 创建 macOS 应用

SwiftUI 有用资源

SwiftUI - 有用资源 SwiftUI - 讨论


SwiftUI - 菜单

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

在 SwiftUI 中创建菜单

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

语法

以下是语法 −

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

参数

此视图使用以下参数 −

  • titleKey:代表菜单的内容。

  • content:表示菜单项组。

重载菜单方法

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

菜单 描述
Menu(content:() -> Content, label: () -> Label) 用于创建带有自定义标签的菜单。
Menu(_:image:content:) 用于创建标签包含图像的菜单。
Menu(_:systemImage: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()
}

输出

Menu

示例 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()
}

输出

Menu

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()
}

输出

Menu

在 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()
}   

输出

菜单