3

我使用 aZStack在主 UI 下方显示全屏背景图像。主 UI 由VStack多个视图组成，这些视图由灵活的 Spacers 分隔，以在不同的设备尺寸上按比例缩小或放大。现在我体验到 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
    }
}

预览截图： 看到蓝色边框比设备大 在此处输入图像描述

背景图片： 在此处输入图像描述

4

1 回答 1

2

在所描述的场景中，您需要使用.background代替ZStack，因此需要全屏布局的主视图表单和背景中的图像不会影响它。

所以布局应该是这样的

VStack(spacing: 0) {

   // content here

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

     // image here

)
于 2022-01-24T10:47:02.977 回答