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

Question

使用 aZStack和使用.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)

不考虑代码大小，是否有一个明显的目的，必须使用一个而不是另一个？

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

给