SwiftUI：Spacer 不会缩小，因为 BG Image 不会调整到设备尺寸

Question

我使用 ZStack 在主 UI 下方显示全屏背景图像。主 UI 由一个 VStack 组成，多个视图由灵活的间隔符分隔，以在不同的设备尺寸上缩小或放大。现在我体验到 Spacers 不会在小型设备上缩小，因为小型设备上的背景图像仍然大于屏幕尺寸并保持 ZStack 高，请参见 iPhone 预览的屏幕截图 8. 什么我在这里做错了吗？

代码：

import SwiftUI

struct TestView: View {
    
    var headerView: some View {
        VStack {
            Text("HEADER").padding([.leading,.trailing], 100)
        }
    }
    
    var middleView: some View {
        HStack {
            Text("MIDDLE").padding([.leading,.trailing], 100)
        }
    }
    
    var bottomView: some View {
        VStack {
            Text("BOTTOM").padding([.leading,.trailing], 100)
        }
    }
    
    var body: some View {
        ZStack {
            // Background Image
            Image("BgImg")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            
            // Main UI
            VStack(spacing: 0) {
                headerView
                    .frame(height:222)
                    .background(Color.red)
                
                Spacer()
                
                middleView
                    .frame(height:155)
                    .background(Color.orange)
                
                Spacer()
                
                bottomView
                    .frame(height:288)
                    .background(Color.yellow)
            }
            .padding(.bottom, 32)
            .padding(.top, 54)
            // END Main UI
        }
        .edgesIgnoringSafeArea(.all)
        .statusBar(hidden: true)
        // END ZStack
    }
}

预览截图： 看到蓝色边框比设备大

背景图片：

Answer 1

在描述的场景中，您需要使用 .background 而不是 ZStack，因此 主视图 需要表单 full-screen 布局和图像背景不会影响。

所以布局应该是这样的

VStack(spacing: 0) {

   // content here

}
.padding(.bottom, 32)
.padding(.top, 54)
.edgesIgnoringSafeArea(.all)
.statusBar(hidden: true)
.background(

     // image here

)

SwiftUI：Spacer 不会缩小，因为 BG Image 不会调整到设备尺寸

SwiftUI: Spacers won't scale down because BG Image will not adjust to device size

swiftui

vstack

zstack