23

ZStack使用 a与使用.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)

不考虑代码大小,是否有一个必须使用另一个的明确目的?

4

1 回答 1

35

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

演示 1

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

演示2

于 2020-08-17T07:43:32.527 回答