ZStack 或使用 .overlay() 之间的区别

【问题标题】：Difference between a ZStack or using .overlay()ZStack 或使用 .overlay() 之间的区别
【发布时间】：2020-12-06 07:34:54
【问题描述】：

使用ZStack 与使用.overlay() 修饰符有什么区别。

苹果说：

ZStack = "覆盖其子项的视图，使它们在两个轴上对齐。"

.overlay = "在此视图前分层一个辅助视图。"

一些例子：

ZStack(alignment: .bottom) {
    Image(systemName: "folder")
        .font(.system(size: 55, weight: .thin))
    Text("❤️")
}

Image(systemName: "folder")
    .font(.system(size: 55, weight: .thin))
    .overlay(Text("❤️"), alignment: .bottom)

在不考虑代码大小的情况下，是否有一个明确的目的必须使用一个而不是另一个？

【问题讨论】：

标签： swiftui overlay zstack

【解决方案1】：

在ZStack 中，视图彼此独立，并且堆栈适合（如果没有自己的框架）到最大视图。 ZStack 中的订单也可以使用.zIndex 修饰符进行修改。所有视图都在 ZStack 坐标空间中。

在.overlay 的情况下，覆盖层内的视图始终绑定到父视图并始终在父视图之上（即zIndex 不发挥任何作用）。重叠视图也在父视图坐标空间中。

最明显的区别是是否使视图大小不同并应用剪辑，即

struct TestZStack: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            Image(systemName: "folder")
                .font(.system(size: 55, weight: .thin))
            Text("❤️").font(.system(size: 55, weight: .thin))
        }
        .clipped()
    }
}

给予

struct TestOverlay: View {
    var body: some View {
        Image(systemName: "folder")
            .font(.system(size: 55, weight: .thin))
            .overlay(Text("❤️").font(.system(size: 55, weight: .thin)), alignment: .bottom)
            .clipped()
    }
}

给予

【讨论】：