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

【问题标题】：SwiftUI large Image in ZStack breaks alignment of other layersZStack 中的 SwiftUI 大图像破坏了其他层的对齐方式
【发布时间】：2020-09-10 16:16:14
【问题描述】：

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

VStack {

    Text("Hello")

    Spacer()

    Text("World")
}

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

ZStack {

    Image("background")

    VStack {

        Text("Hello")

        Spacer()

        Text("World")
    }

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：