Разница между ZStack и использованием .overlay()

Question

В чем разница между использованием ZStack по сравнению с использованием .overlay() модификатор.

Apple говорит:

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

дает