如何在SwiftUI中使用ZStack重现高度/堆叠效果

我想在ZStack中重现iOS 13中显示模式时看到的高度效果：

背景略微透明，并变为灰色，带有模糊效果

---

想法是创建一个视图，该视图似乎漂浮在ZStack内部下面的元素之上。

您可以拥有一个

ZStack

，该视图根据

@State

变量有条件地显示。该变量还将确定基础视图上的

.blur

量，以及中间是否显示透明的灰色视图（这会使背景看起来灰显）。我举了一个例子来说明：

struct ContentView:View{
@状态变量modalIsPresented=false
@状态变量alertIsPresented=false
@状态变量customAlertIsPresented=false
var body：一些观点{
ZStack{
文本（“测试！！！”）
VStack{
垫片（）
文本（“Lorem ipsum dolor sit amet”）
垫片（）
文本（“Lorem ipsum dolor sit amet”）
图像（系统名称：“星”）
按钮（操作：{
self.modalis=true
}) {
文本（“呈现实际模态”）
}
按钮（操作：{
self.alertIsPresented=true
}) {
文本（“显示实际警报”）
}
按钮（操作：{
动画片{
self.customAlertIsPresented=true
}
}) {
文本（“显示自定义警报”）
}
}
.blur（半径：self.customAlertIsPresented？3:0）
.animation（.easeOut）
如果显示customAlertIsPresented{
矩形（）
.背景（颜色.黑色）
.不透明度（0.3）
.edgesIgnoringSafeArea（.all）
.animation（.easeIn）
}
如果显示customAlertIsPresented{
CustomAlert（isPresented:$customAlertIsPresented）.框架（宽度：300）
.背景（颜色.白色）
.animation（.easeIn）
.转弯半径（10）
.阴影（半径：10）
}
}.表（已提交：$已提交）{
文本（“这是实际模态的样子”）
}.alert（isPresented:$alertIsPresented）{
警报（标题：Text（“这是警报的外观”））
}
}
}
结构CustomAlert:视图{
@显示绑定变量：Bool
var body：一些观点{
VStack{
Text（“这是我的自定义警报”）.padding（）
分隔器（）
按钮（操作：{
self.isPresented=false
}) {
HStack{
垫片（）
文本（“驳回”）
垫片（）
}
}.填充（[顶部，.底部]，10）
}
}
}

我添加了一些动画以使过渡更平滑。您可以调整

.blur

、

.opacity

和各种

.animation

等内容，以定制您想要的外观。我的示例如下所示：

---

你能提供一些你想要达到的目标的图片吗？比如iPhone屏幕被锁定时的音乐播放器之类的东西？就像UIContextMenuInteraction一样…@MycroftCanner嗨，我下面的回答对你有帮助吗？如果是这样，请随意接受它，以便遇到此问题的其他用户知道什么答案适合您。如果没有，请在回答的评论中告诉我问题是什么，或者如果你发现一个更好地回答了你的问题，请发布你自己的解决方案。