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

Question

我不知道如何在ZStack上对齐Image视图，默认情况下，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。

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的大小与图像完全相同。

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

ZStack布局其子元素的方式与内容视图类似。它提供了它所提供的所有空间，然后子视图决定它们的大小。和Text是固定大小的视图，所以它们只是内容的大小。但是Color是一个灵活大小的视图。它接受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(...)改变了它所附加的视图的大小。这是完全不正确的。和以前一样，a ZStack的大小始终是其内容的大小。 .frame()会创建一个全新的视图来显示所请求的大小。然后，它根据框架的对齐方式在其内部定位包装的视图。所以在这个例子中，它是这样工作的：

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

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

然后，帧将所有这些空间提供给ZStack。ZStack对其子项进行布局，并返回其大小与包含它们的大小完全相同。

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

然后，它向后台报告它与顶级视图一样大(因为它很灵活)。

然后，背景声明与顶层内容视图的大小相同。

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

Answer 2

因此，如果您不想在图像和视图底部之间留出一些空间，那么使用infinity maxHeight修改器是不利的。

.edgesIgnoringSafeArea(.all)

您可能只需要告诉您的ZStack忽略安全区域插入。

struct ContactsView: View {
  var body: some View {

    ZStack {
      Image("bgImage")
      Text("Hello, World!")
    }.frame(maxWidth: .infinity, maxHeight: .infinity).background(Color.red).edgesIgnoringSafeArea(.all)

  }
}

如果您需要在底部和图像之间留出空间，请将ZStack包装在VStack中，并在VStack的底部抛出一个间隔符。

struct ContactsView: View {
  var body: some View {
    VStack {

      ZStack {
        Image(systemName: "bgImage")
        Text("Hello, World!")
      }.frame(maxWidth: .infinity, maxHeight: 300).background(Color.red)

      Spacer()

    }.edgesIgnoringSafeArea(.all)
  }
}

Answer 3

ZStack {
    Image("background")
         .resizable()
         .scaledToFill()
         .edgesIgnoringSafeArea(.all)
}

添加.edgesIgnoringSafeArea(.all)