iOS开发 SwitftUI 13：提示、弹窗、上下文菜单

移动端没有桌面的窗口机制，各种弹窗都是系统功能。

目录

.sheet 弹窗

.fullScreenCover 全屏弹窗

.actionSheet 选项弹窗

.alert 告警

.contextMenu 上下文菜单

汇总代码

.sheet 弹窗

sheet是一种弹窗机制，目前的默认实现是从屏幕下端升起，覆盖屏幕的绝大部分。

sheet属于整个屏幕，虽然把.sheet代码放在最外层符合逻辑，但实际上放在哪一层都没有关系，效果都是一样的。

基本的sheet用法：

@State var b = false @State var str = "info" var body: some View { Form { Button {b = true}label: { Text("打开sheet") } Text(str) } .sheet(isPresented: $b) { Text("关闭") .onTapGesture { str = str + "+1" b = false } } }

sheet需要一个变量来指示是否显示，需要关闭的时候设置变量为false即可。很明显，sheet是当前页面的一部分，只是根据指示显示出来。

初始：

点一下“打开sheet”：

sheet打开，占据屏幕绝大部分。再点一下“关闭”：

“info”变成了“info+1”，符合预期。

由于界面和数据完全通过绑定变量交互，不用太关心sheet对象再次打开时是重新创建还是显示原来的对象，不像桌面程序，要考虑对象的创建和显示/隐藏。

.fullScreenCover 全屏弹窗

只需要简单地把.sheet替换成.FullScreenCover即可，效果：

除了全屏化没别的区别。

.actionSheet 选项弹窗

注意，已经被标记为过时，推荐用confirmationDialog代替。

ActionSheet提供类似菜单的操作，显示方式和前面的两种一样，用一个变量来表示是否显示，选项弹窗的关键代码如下：

.actionSheet(isPresented: $b) { return ActionSheet( title: Text("操作"), message: Text("随便选一个"), buttons: [ .cancel( Text("取消"), action: { str = str + "+cancel" }), .destructive( Text("危险 动作1"), action: { str = str + "+destructive" } ), .default( Text("默认 动作2"), action: { str = str + "+default" } ), ] ) }

效果：

上面的代码在处理动作的时候并没有重置绑定变量b，设置的取消按钮也没有显示，但其实只需要点击弹窗以外的区域弹窗就会关闭，而且，任何一个动作结束都会自动重置绑定变量。

点击空白处取消：

再弹出来一次，点击一个选项：

动作都是正确执行的。

我们创建按钮的时候用了.destructive和.default，这两个是按钮的“角色”，前一个表示是破坏性的，所以系统自动使用红色显示，后一个是默认，系统使用黑色显示。

.alert 告警

写法跟actionSheet差不多：

.alert(isPresented: $bAlert) { return Alert(title: Text("告警") ,message: Text("确定吗？") ,primaryButton: .destructive(Text("确认")){str = str + "+ok"} ,secondaryButton: .default(Text("取消")){str = str + "+canecl"} ) }

效果：

说实话这东西真没有太多自定义的必要，但是从交互设计角度来说，文字应该居中显示。

.contextMenu 上下文菜单

上下文菜单需要通过长按呼出。跟前面的几个不同，不需要变量来指示是否显示，而且显示位置和修饰的对象有关。

下面的代码分别给整体和一个单独的Text设置了上下文菜单：

var body: some View { Form { //。。。。。。 Text(str) .contextMenu { Button("上下文菜单3") { str = str + "+contextMenu3" } Button("上下文菜单4") { str = str + "+contextMenu4" } } } //。。。。。。 .contextMenu { Button("上下文菜单1") { str = str + "+contextMenu1" } Button("上下文菜单2") { str = str + "+contextMenu2" } } }

长按Text的效果：

长按其余部分的效果：

汇总代码

本文的完整代码：

import SwiftUI struct SwiftUIViewPopup: View { @State var bSheet = false @State var bFullScreenCover = false @State var bActionSheet = false @State var bAlert = false @State var str = "info" var body: some View { Form { Button { bSheet = true } label: { Text("打开sheet") } Button { bFullScreenCover = true } label: { Text("打开FullScreenCover") } Button { bActionSheet = true } label: { Text("打开ActionSheet") } Button { bAlert = true } label: { Text("打开Alert") } Text(str) .contextMenu { Button("上下文菜单3") { str = str + "+contextMenu3" } Button("上下文菜单4") { str = str + "+contextMenu4" } } } .sheet(isPresented: $bSheet) { Text("关闭") .onTapGesture { str = str + "+1" bSheet = false } } .fullScreenCover(isPresented: $bFullScreenCover) { Text("关闭") .onTapGesture { str = str + "+a" bFullScreenCover = false } } .actionSheet(isPresented: $bActionSheet) { return ActionSheet( title: Text("操作"), message: Text("随便选一个"), buttons: [ .cancel( Text("取消"), action: { str = str + "+cancel" } ), .destructive( Text("危险 动作1"), action: { str = str + "+destructive" } ), .default( Text("默认 动作2"), action: { str = str + "+default" } ), ] ) } .alert(isPresented: $bAlert) { return Alert( title: Text("告警"), message: Text("确定吗？"), primaryButton: .destructive(Text("确认")) { str = str + "+ok" }, secondaryButton: .default(Text("取消")) { str = str + "+canecl" } ) } .contextMenu { Button("上下文菜单1") { str = str + "+contextMenu1" } Button("上下文菜单2") { str = str + "+contextMenu2" } } } } #Preview { SwiftUIViewPopup() }