SwiftUI ZStack 对齐工作异常

Question

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

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 的元素根据 最大 child 的大小进行布局和对齐，而不是 [=11] 的框架=] 本身。您应该认为堆栈的“内容区域”与堆栈的框架是分开的。

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

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

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

SwiftUI ZStack 对齐工作异常

SwiftUI ZStack alignment works strangely

ios

swift

swiftui