SwiftUI中ScrollView背景无法覆盖整个页面问题求助

问题场景 #

布局结构为ScrollView嵌套ZStack，ZStack内包含带List、toolbar的NavigationView，给ScrollView设置背景图后，背景仅显示在页面底部，无法覆盖NavigationView区域。

原代码 #

ScrollView {
    ZStack{
        NavigationView(){
            List {...}
            .toolbar {...}                    
        }
        .sheet(isPresented: $showingProfile) {...}
        .sheet(isPresented: $showingVoortgang) {...} 
    }
}
.background(Image("Background3")
    .resizable()
    .ignoresSafeArea()
    .opacity(1))

问题原因 #

1. NavigationView自带默认背景层，会遮挡ScrollView的背景内容；
2. 布局层级冗余，ScrollView嵌套ZStack再包裹NavigationView的结构，导致背景的渲染层级被压在NavigationView下方，无法穿透显示。

解决方法 #

重构布局层级，将背景图放在最底层，同时移除NavigationView的默认背景，让底层背景能完整覆盖整个页面：

ZStack {
    // 背景图置于最底层，覆盖全屏
    Image("Background3")
        .resizable()
        .ignoresSafeArea()
        .opacity(1)
    
    NavigationView {
        // 若List本身支持滚动，可直接使用List，无需嵌套ScrollView
        ScrollView {
            List {...}
        }
        .toolbar {...}
        // 隐藏导航栏默认背景
        .toolbarBackground(.hidden, for: .navigationBar)
        // 可选：根据背景调整导航栏文字配色
        .toolbarColorScheme(.dark, for: .navigationBar)
        .navigationBarTitleDisplayMode(.inline)
    }
    .sheet(isPresented: $showingProfile) {...}
    .sheet(isPresented: $showingVoortgang) {...}
}

额外提示 #

• 若List内容足够长自带滚动效果，可直接删除外层的ScrollView，避免嵌套滚动导致的交互问题；
• 如果需要让List的背景也透明，可给List添加.scrollContentBackground(.hidden)，让底层背景穿透List区域。

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