SwiftUI中导航栏渐变与滚动内容融合的实现问题

我发现在SwiftUI中，把渐变背景放在滚动视图下方时，渐变会自动延伸到导航栏内部。目前我正利用这个特性，结合标准导航栏在滚动内容上方实现封面式视图，初始状态的代码如下：

struct ContentView: View {

    static let gradient = RadialGradient(gradient: Gradient(stops: [.init(color: .red, location: 0), .init(color: .yellow, location: 1)]), center: .bottom, startRadius: 0, endRadius: 300)

    var body: some View {
        NavigationStack {
            VStack(spacing: 0) {
                Image(systemName: "lasso.badge.sparkles")
                    .padding()
                    .foregroundStyle(.white)
                    .font(.system(size: 120))
                    .frame(maxWidth: .infinity)
                    .background(Self.gradient)
            
                Form {
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .foregroundStyle(.tint)
                    ForEach(1...100, id: \.self) { idx in
                        Text("Hello, world! \(idx)")
                    }
                }
            }
            .navigationBarTitle("Foo", displayMode: .inline)
        }
    }
}

现在想实现的效果是：把示例中的lasso.badge.sparkles图标移到Form或ScrollView这类滚动内容里，让它能在默认带模糊材质的导航栏下方滚动，同时初始未滚动时还能保持渐变的视觉连续性。

实现方案 #

核心思路是让导航栏透明，隐藏滚动视图的默认背景，将渐变作为滚动视图的背景，同时把图标放在滚动内容的最顶部：

struct ContentView: View {
    static let gradient = RadialGradient(gradient: Gradient(stops: [
        .init(color: .red, location: 0),
        .init(color: .yellow, location: 1)
    ]), center: .bottom, startRadius: 0, endRadius: 300)

    var body: some View {
        NavigationStack {
            Form {
                // 将图标移入Form作为顶部内容
                Image(systemName: "lasso.badge.sparkles")
                    .padding()
                    .foregroundStyle(.white)
                    .font(.system(size: 120))
                    .frame(maxWidth: .infinity)
                
                // 原有Form内容
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                ForEach(1...100, id: \.self) { idx in
                    Text("Hello, world! \(idx)")
                }
            }
            .scrollContentBackground(.hidden) // 移除Form默认背景，让渐变透出
            .background(Self.gradient) // 设置渐变作为Form的背景
            .navigationBarTitle("Foo", displayMode: .inline)
            .toolbarBackground(.hidden, for: .navigationBar) // 让导航栏透明，允许渐变延伸
            .toolbarColorScheme(.dark, for: .navigationBar) // 可选：适配深色渐变的导航栏文字颜色
        }
    }
}

关键细节说明 #

• scrollContentBackground(.hidden)：去掉Form自带的白色背景，确保我们的渐变背景能完全覆盖滚动区域。
• toolbarBackground(.hidden, for: .navigationBar)：让导航栏变为透明，这样初始状态下渐变会自然延伸到导航栏下方，保持视觉连续性。
• 图标放在Form最顶部：滚动时图标会随内容一起向上移动，当它滚到导航栏区域时，会被导航栏的模糊材质自然覆盖，符合预期效果。
• 可选的toolbarColorScheme(.dark)：如果渐变是深色系，设置这个可以让导航栏的文字更清晰可读。

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