SwiftUI技术问题：如何让背景色铺满整个屏幕

我正在开发一款应用，想给应用设置背景色，已经把颜色放进assets文件夹，但背景色只填充了屏幕的四分之三，顶部区域是空的。我用了ZStack，还在末尾加了.background(Color("appBackground"))，但结果还是不对。

HomeView 完整代码 #

import AVKit
import SwiftUI

struct HomeView: View {
    
    @Binding var streak: Streaks
    @Binding var timer: TimerStruct
    @State var isSheetPresented = false
    @Binding var navigationPath: NavigationPath
    @Binding var exercisePlans: [ExercisePlan]
    
    func ridzero(result: Double) -> String {
        let value = String(format: "%g", result)
        return value
    }
    func round(result: Double) -> String {
        let value = String(format: "%.1f", result)
        return value
    }
    
    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                ScrollView {
                    ZStack {
                        VStack {
                            
                            let percent = Double(timer.exerciseTime/1500)
                            Text("Welcome back to ElderlyFit")
                                .font(.system(size: 25,weight: .medium, design: .rounded))
                                .offset(x: 0, y: 20)

                            CircularProgressView(timer: $timer, progress: CGFloat(percent))
                                .frame(width: 150, height: 150)
                                .offset(x: -95, y: -240)
                                .padding(EdgeInsets(top: 280, leading: 0, bottom: 0, trailing: 0))
                            Text("\(round(result:percent*100))%")
                                .font(.system(size: 30, weight: .bold, design: .rounded))
                                .offset(x:-92, y:-345)
                            
                            Text("\(round(result: timer.exerciseTime/60)) mins of exercise completed today")
                                .frame(width: 200, height: 50)
                                .font(.system(size: 20, design: .rounded))
                                .offset(x:100, y:-410)
                            
                            
                            StreaksView(timer: $timer, streak: $streak)
                                .offset(x:0, y: -330)
                                .padding()
                            
                            Text("Choose your exercise plan:")
                                .bold()
                                .font(.system(size: 25))
                                .offset(x: -30, y: -420)
                                .zIndex(1.0)
                            
                            
                            ExercisePlanView( streaks: $streak, timer: $timer, navigationPath: $navigationPath, exercisePlans: $exercisePlans)
                                .offset(x: 15, y: -405)
                                .zIndex(-1.0)
                                .font(Font.system(size: UIFontMetrics.default.scaledValue(for: 15)))
                            
                            //.frame(maxWidth: .infinity, maxHeight: .infinity)
                            
                        }
                        .frame(width: geometry.size.width)
                        .edgesIgnoringSafeArea(.all)
                        
                    }
                    .background(Color("appBackground"))
                }
            }
        }
    }
}

问题截图 #

解决办法 #

1. 调整背景色的层级 #

把背景色设置给最外层的NavigationView或GeometryReader，同时添加edgesIgnoringSafeArea，确保背景色铺满整个屏幕：

NavigationView {
    GeometryReader { geometry in
        // 原有ScrollView及内部内容
    }
    .background(Color("appBackground"))
    .edgesIgnoringSafeArea(.all)
}

2. 移除硬编码的offset布局 #

你当前使用大量.offset()来调整控件位置，这会导致VStack的实际尺寸被压缩，背景色只能覆盖VStack的有效范围。建议改用Spacer、VStack(spacing:)或合理的padding来实现布局，让容器尺寸自然延伸到屏幕边缘。

3. 给ScrollView直接设置背景 #

如果上面的方法未生效，也可以直接给ScrollView添加背景：

ScrollView {
    // 原有ZStack及内部内容
}
.background(Color("appBackground"))
.edgesIgnoringSafeArea(.all)

问题根源 #

顶部留空是因为你把edgesIgnoringSafeArea(.all)加在了VStack上，而背景色是设置在ZStack上——ZStack的范围被VStack的offset限制，无法覆盖安全区域。把背景色移到更高层级的容器，并忽略安全区域，就能让背景色铺满全屏。

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