SwiftUI中如何让表单VStack填充渐变背景后的剩余高度？

问题根源：

• 你的gradient视图设置了.frame(height: .infinity)，这会让渐变占据整个屏幕高度，导致后续的表单VStack没有可用空间
• 根VStack里的Spacer会把表单推到屏幕底部，不符合你“紧跟渐变下方”的需求

修改方案及完整代码：

var gradient: some View {
    ZStack(alignment: .top) {
        LinearGradient(
            stops: [
                .init(color: .red, location: 0.4),
                .init(color: .orange, location: 0.7),
                .init(color: .yellow, location: 0.8)
            ],
            startPoint: .leading,
            endPoint: .trailing)
        .frame(maxWidth: .infinity, maxHeight: 300, alignment: .top)
        .mask(
            RoundedRectangle(cornerRadius: 96)
                .fill(Color.black)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        )
        .blur(radius: 64)
    }
    .ignoresSafeArea()
    // 移除让渐变撑满整个屏幕的frame设置
    .offset(y: -100)
}

@State private var username = ""
@State private var password = ""

var body: some View {
    VStack(spacing: 0) { // 设置spacing为0，让表单和渐变紧密贴合
        gradient
        // 移除Spacer，避免表单被推到底部
        VStack(spacing: 24) { // 调整内部间距让布局更合理
            VStack (spacing: 8) {
                Text("Sign In")
                    .font(.title)
                    .fontWeight(.bold)
                Text("Access to your account")
                    .font(.callout)
                    .foregroundColor(.secondary)
            }
            VStack (spacing: 18) {
                TextField("Username", text: $username)
                    .modifier(TextFieldOutlined())
                TextField("Password", text: $password)
                    .modifier(TextFieldOutlined())
            }
            .padding()
        }
        .frame(maxHeight: .infinity, alignment: .top) // 让表单VStack填充剩余高度，内容顶部对齐
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity) // 根VStack撑满整个屏幕
    .padding(.bottom, 48)
    .ignoresSafeArea()
}

关键修改点说明：

1. 修正渐变视图的高度：移除gradient里的.frame(height: .infinity)，让渐变只保留你设置的maxHeight: 300的高度，避免占据整个屏幕。
2. 移除多余Spacer：根VStack里的Spacer会将表单推至底部，直接移除后表单会自然紧跟在渐变下方。
3. 让表单填充剩余空间：给表单的VStack添加.frame(maxHeight: .infinity, alignment: .top)，这样它会自动填充渐变下方的所有剩余屏幕高度，alignment: .top保证表单内容从顶部开始排列（如果需要内容居中，可改为.center）。
4. 调整根VStack间距：设置spacing: 0让渐变和表单之间没有额外空隙，贴合更紧密。

内容的提问来源于stack exchange，提问作者Nick Settler