ios - SwiftUI VStack - 让背景以横向方式填满整个屏幕

Question

横向时背景不会填满整个屏幕。我怎样才能让它一直拉伸(stretch)？

这是我的代码:

import SwiftUI

struct ContentView: View {
    @Environment(\.verticalSizeClass) var verticalSizeClass
    
    var body: some View {
        VStack(spacing: 20) {
            VStack {
                Text("Instant Developer")
                    .font(.system(.largeTitle))
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                Text("Get help from expert in 15 minutes")
                    .foregroundColor(.white)
            }
            
            HStack(alignment: .bottom, spacing: 20) {
                Image("student")
                    .resizable()
                    .scaledToFit()
                Image("tutor")
                    .resizable()
                    .scaledToFit()
            }
            .padding(.horizontal, 50)
            
            Text("Need help with coding problem? Register!")
                .foregroundColor(.white)
            
            Spacer()
            
            if verticalSizeClass == .compact {
                HSignUpButtonGroup()
            } else {
                VSignUpButtonGroup()
            }
        }
        .padding(.top, 30)
        .background(Color.black)
    }
}

Answer 1

问题似乎是由于 scaledToFit 造成的，它试图保留图像的纵横比，因此不会使背景一直延伸。

要解决此问题，只需使用 .frame(maxWidth: .infinity) 让背景尽可能拉伸(stretch)即可。确保将此修饰符放在 background 之前，以便颜色符合新布局。

.padding(.top, 30)
.frame(maxWidth: .infinity) /// here!
.background(Color.black)