ZStack或使用.overlay（）

Question

使用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)

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

Answer 1

在ZStack中，视图彼此独立，并且堆栈适合（如果没有自己的框架）最大的视图。还可以使用.zIndex修饰符来修改ZStack中的顺序。所有视图都在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()
    }
}

给予