ios - SwiftUI:无法将图像对齐到ZStack的顶部

Question

我无法弄清楚如何在Image上对齐ZStack View ，默认情况下，SwiftUI中的 View 位于其父级的中心，然后我们使用堆栈来对齐它们，我有以下代码:

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变得与封闭 View 一样大，而无需添加 .frame()。)

当然，这将使所有内容排列在顶部，这可能不是您想要的。您可以通过嵌套ZStack使其对齐来解决此问题:

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

就是说，在此示例中，我可能会使用 .background。

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

如果只有一个 View ，则可以摆脱ZStack并改用框架:

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

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

这个示例确实进入了SwiftUI布局的核心，因此值得了解正在发生的事情。这不是解决方法或技巧，因此您应该到达感觉很正常的地方。

顶层内容 View (包含ZStack的 View )将整个空间提供给ZStack。 ZStack始终是包含其内容的大小，即，因此ZStack首先需要布局其子级。它根据对齐方式对它们进行布局，然后精确调整自身大小以适合它们的周围。因此，使用顶部对齐(但不使用Color.clear)，图像位于ZStack的顶部。 ZStack与Image大小完全相同。

然后，顶层内容 View 将ZStack置于其中心。

ZStack对其子级进行布局的方式与内容 View 的方式类似。它提供了所提供的所有空间，然后 subview 确定了它们的大小。 View 始终确定自己的大小。 图像和文本是固定大小的 View ，因此它们仅是其内容的大小。但是“颜色”是一个大小灵活的 View 。它接受ZStack提供的整个空间(与顶级内容 View 提供的空间相同)，并以其大小返回。由于ZStack必须完全包含其子级，因此ZStack现在是顶级内容 View 的大小，并且一切都按您期望的方式进行，并在屏幕顶​​部对齐。

让我们将其与最初使用 .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恰好是其内容(图像和文本)的大小。您将背景放在框架 View 上，并且框架 View 更大。

人们有一个关键的困惑，就是他们认为 .frame(...)会更改附加到的View的大小。那根本不正确。和以前一样， ZStack始终是其内容的大小。 .frame()创建所需大小的全新 View 。然后，根据框架的对齐方式将包装后的 View 放置在其内部。因此，在此示例中，它的工作方式如下:

顶层-背景-框架-ZStack-{图片文字}

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

然后，框架将所有空间提供给ZStack。 ZStack布置其子项，并返回其大小恰好包含它们的大小。

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

然后，它向后台报告它与顶级 View 一样大(因为它具有灵活性)。

然后，背景技术要求顶级内容 View 具有相同的大小。

最后，顶级内容 View 将背景置于其中心。