SwiftUI ZStack对齐工作原理奇怪

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

我希望文本(“aaa”)会出现在粉红方格的顶部。

但结果却是这样。

​

​

更奇怪的是，如果我像这样在ZStack中添加“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)
    }
}