SwiftUI ZStack alignment 工作异常

Question

我使用 SwiftUI 创建了非常简单的视图，包括 ZStack。

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Text("aaa")
                .frame(width: 50, height: 50)
                .font(.system(size: 20))
        }
        .frame(width: 142.0, height: 142.0)
        .background(.pink)
    }
}

我预计 Text("aaa") 会出现在粉色方块的顶部。

但结果是这样的。

更奇怪的是，如果我像这样将“Color.clear”添加到 ZStack，效果会很好。

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Color.clear
            Text("aaa")
                .frame(width: 50, height: 50)
                .font(.system(size: 20))
        }
        .frame(width: 142.0, height: 142.0)
        .background(.pink)
    }
}

结果就是这样。

我无法理解这种情况。 SwiftUI 完全疯了。

有人知道吗？

Answer 1

ZStack的元素根据最大子元素的大小进行布局和对齐，而不是ZStack本身的框架。 您应该认为堆栈的“内容区域”与堆栈的框架是分开的。

当你添加一个Color.clear时，它的默认框架是无界的（高度和宽度是infinity的），所以当它被添加到ZStack时，它会将“内容区域”增长到最大可能的大小。 这使得堆栈的内容区域与ZStack的框架大小相同。

您可以通过使用具有显式无限边界的Spacer()来获得相同的结果（以更清晰的方式）。 这将确保孩子们总是填写他们可用的相同内容。

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Spacer()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            Text("aaa")
                .frame(width: 50, height: 50)
                .font(.system(size: 20))
        }
        .frame(width: 142.0, height: 142.0)
        .background(.pink)
    }
}