SwiftUI：无法将图像与 ZStack 顶部对齐

Question

我不知道如何Image在 顶部对齐视图ZStack，默认情况下 SwiftUI 中的视图放置在其父级的中心，然后我们使用堆栈来对齐它们，我有以下代码：

struct ContentView: View {
    var body: some View {
        ZStack {
           Image("bgImage")
           Text("Hello, World!")
        }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.red) //this is for debugging purposes, to show the area of the ZStack
    }
}

如何将图像定位到顶部？

Answer 1

要告诉 ZStack 在其中以特定方式对齐事物，请使用alignment参数对其进行配置：

ZStack(alignment: .top) {
    Color.clear
    Image(...)
    Text("Hello, World!")
}

（Color.clear 扩展以填充所有可用空间，因此这会强制您的 ZStack 与封闭视图一样大，而无需添加.frame().）

当然，这将对齐顶部的所有内容，这可能不是您想要的。您可以通过嵌套您的 ZStacks 来解决这个问题，使其按照您的意愿对齐：

ZStack{
    ZStack(alignment: .top) {
        Color.clear
        Image(...)        // This will be at the top
    }
    Text("Hello, World!") // This will be centered
}

也就是说，我可能会.background在这个例子中使用 a 。

ZStack {
    Color.clear
    Text("Hello, World!")
}
.background(Image(...), alignment: .top)

如果你只有一个视图，你可以摆脱 ZStack 并使用框架代替：

Text("Hello, World!")
    .frame(maxHeight: .infinity)
    .background(Image(uiImage:#imageLiteral(resourceName: "image.jpg")), 
                alignment: .top)

请记住，在这种情况下，图像将绘制在其框架之外。在许多情况下这很好（并且完全合法），但有时可能很重要（例如，如果您将其放入堆栈中）。你可以添加.border(Color.green)到最后看看它是如何工作的。

这个例子真正触及了 SwiftUI 布局的核心，因此值得了解发生了什么。这不是解决方法或技巧，因此您应该找到感觉非常正常的地方。

顶级内容视图（包含 ZStack 的视图）为 ZStack 提供其整个空间。ZStack 始终与包含其内容的大小完全相同，因此首先 ZStack 需要对其子项进行布局。它根据对齐方式排列它们，然后精确调整大小以适应它们。因此，使用顶部对齐（但没有 Color.clear），图像位于 ZStack 的顶部。ZStack 的大小与 Image 完全相同。

顶级内容视图然后将 ZStack 放置在其中心。

ZStack 布置其子项的方式类似于内容视图的方式。它提供了它所提供的所有空间，然后子视图决定了它们的大小。视图总是决定它们自己的大小。Image 和 Text 是固定大小的视图，因此它们只是其内容的大小。但是颜色是一个灵活大小的视图。它接受 ZStack 提供的整个空间（与顶级内容视图提供的空间相同）并将其作为其大小返回。由于 ZStack 必须准确地包含其子项，因此 ZStack 现在是顶级内容视图的大小，并且事物的行为与您期望的一样，在屏幕顶部对齐。

让我们.frame()与您最初使用的方式进行比较：

ZStack {
   Image("bgImage")
   Text("Hello, World!")
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.red) //this is for debugging purposes, to show the area of the ZStack

首先，我想重点关注您的评论，因为它不正确。这不是 ZStack 的领域。ZStack 正是其内容（图像和文本）的大小。你把背景放在框架视图上，框架视图更大。

人们有一个关键的困惑是他们认为.frame(...)改变了它所附加的视图的大小。这根本不正确。和以前一样，ZStack 始终是其内容的大小。 .frame()创建所需大小的全新视图。然后它根据框架的对齐方式将包裹视图定位在其自身内部。所以在这个例子中它是这样工作的：

顶层 - 背景 - 框架 - ZStack - { 图像文本 }

顶层视图为背景提供了所有空间。背景是它们所包含内容的大小，因此它为框架提供了所有空间。Frame 在两个方向上都是灵活的（由于max字段），因此它会忽略其子项的大小并选择为其提供的大小。

然后 Frame 将所有空间提供给 ZStack。ZStack 布置其子项，并返回其大小与包含它们的大小相同。

Frame 然后根据 Frame 的对齐方式放置 ZStack（.center，因为这是默认设置）。如果您将框架的对齐方式设置为.top，则 ZStack 将被放置在框架的顶部（但文本将在 ZStack 中居中，而不是在框架中）。

然后它向后台报告它与顶级视图一样大（因为它灵活）。

背景然后声称与顶级内容视图相同的大小。

最后，顶级内容视图将背景放置在其中心。