SwiftUI中ScrollView底部超出子内容的多余空白区域问题

问题分析 #

你遇到的核心问题是：添加ScrollView后，内容高度未填满ScrollView的可视区域，导致底部出现空白。之前嵌套的ZStack属于冗余布局，会限制内部VStack的拉伸能力，使得Spacer无法生效。

解决方案 #

移除冗余的ZStack，并通过强制VStack填满ScrollView高度来解决，以下是优化后的代码：

public var body: some View {
    ScrollView {
        VStack(spacing: 0) {
            BannerView
                .frame(height: UIScreen.main.bounds.height * 0.30)
            SignInContent
        }
        .frame(maxHeight: .infinity) // 强制VStack填满ScrollView的可用高度
    }
    .ignoresSafeArea(.all)
    .background(Color.yourBackgroundColor) // 设置统一背景色，避免空白露出
}

如果需要将SignInContent推至屏幕底部，只需在BannerView和SignInContent之间添加Spacer()：

public var body: some View {
    ScrollView {
        VStack(spacing: 0) {
            BannerView
                .frame(height: UIScreen.main.bounds.height * 0.30)
            Spacer() // 用Spacer填充中间区域，将SignInContent推到底部
            SignInContent
        }
        .frame(maxHeight: .infinity)
    }
    .ignoresSafeArea(.all)
}

为什么之前的方案无效？ #

• 冗余的ZStack：ZStack默认仅包裹内部内容的最小尺寸，导致VStack无法拉伸至ScrollView的高度，Spacer自然无法发挥填充作用。
• 未强制内容高度：ScrollView的内容默认仅适配自身高度，当内容不足时，ScrollView会保留空白区域，通过frame(maxHeight: .infinity)可强制内容填满ScrollView的可用空间。

内容的提问来源于stack exchange，提问作者Zin Win Htet