ZStack中的SwiftUI大图像破坏了其他层的对齐方式

Question

我有一个简单的ContentView，由一个带有一些文本和一个空格的VStack组成。

VStack {

    Text("Hello")

    Spacer()

    Text("World")
}

我想在其后面放置一个背景图像。我尝试使用ZStack。

ZStack {

    Image("background")

    VStack {

        Text("Hello")

        Spacer()

        Text("World")
    }

但是现在VStack不再尊重安全区域了。

在横向模式下，VStack根本不会重新缩放，从而有效地将其内容移出了视野。

为什么映像会影响VStack？我以为ZStack使层保持“独立”？

Answer 1

如果“背景”图像的尺寸很大并且大约与屏幕尺寸差不多，那么这里发生的事情是正确的。

ZStack视图的大小由其层的大小确定。它的大小足以封装它们。这里看起来整体大小由“背景”图像大小决定。反过来，这会影响VStack层的大小，因为其Spacer会扩展以填充到该大小。

将图像调整为所需的尺寸。还要看看在VStack上使用background()修饰符而不是ZStack。

您希望图像在横向模式下的显示方式取决于您，但是它不会自行调整大小或翻转。