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

Question

我有一个简单的 ContentView，由带有一些文本和间隔符的 VStack 组成。

VStack {

    Text("Hello")

    Spacer()

    Text("World")
}

我想在它后面放一个背景图片。我尝试使用 ZStack。

ZStack {

    Image("background")

    VStack {

        Text("Hello")

        Spacer()

        Text("World")
    }

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

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

为什么Image会影响VStack？我认为 ZStack 保持层“独立”？

Answer 1

如果“背景”图像的尺寸很大并且大致等于屏幕的尺寸，那么这里发生的事情是正确的。

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

将图像大小调整为您想要的大小。还要考虑background()在 VStack 而不是 ZStack 上使用修改器。

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