SwiftUI中ZStack内元素垂直间距调整及滚动视图模糊头部布局问题

嗨，我完全懂你现在的困扰——想让那个半透明模糊的头部和ScrollView初始时紧紧挨着，边框能完美对上，同时滚动的时候ScrollView里的内容还能在头部下面透出模糊效果对吧？之前用ZStack层叠导致ScrollView被头部盖住，调offset又丢了模糊，确实有点头疼。

其实问题的核心是：ZStack是把元素一层叠一层的，你原来的ScrollView整个区域都在HeaderView下面，所以顶部内容被盖住了；但如果直接把ScrollView往下挪，它就不在HeaderView的层叠范围内了，自然就没了模糊效果。那我们的思路就是让ScrollView的整体依然在HeaderView下方，但把它的内容往下偏移头部的高度，这样初始时内容刚好接上头部，滚动时内容还是能滑到头部下面产生模糊。

给你两种解决方案，一种简单直接，一种更灵活：

方案一：硬编码头部高度（适合固定高度的头部） #

先给HeaderView设置一个固定高度，然后在ScrollView的内容顶部加一个同样高度的占位Spacer，这样内容就会往下移，刚好避开头部，同时ScrollView的整体区域还是在HeaderView下面：

import SwiftUI
import UIKit

struct ContentView: View {
    let headerHeight: CGFloat = 60 // 定义头部高度
    
    var body: some View {
        NavigationView {
            ZStack {
                Color.white
                    .ignoresSafeArea()
                
                ZStack(alignment: .top) {
                    ScrollView {
                        VStack {
                            // 添加和头部等高的占位，把内容往下推
                            Spacer()
                                .frame(height: headerHeight)
                            
                            Circle()
                                .fill(.red)
                                .frame(width: 430, height: 250)
                            Circle()
                                .fill(.blue)
                                .frame(width: 430, height: 250)
                            Circle()
                                .fill(.orange)
                                .frame(width: 430, height: 250)
                            Circle()
                                .fill(.green)
                                .frame(width: 430, height: 250)
                        }
                        .padding()
                        .border(.yellow)
                    }
                    
                    HeaderView()
                        .frame(height: headerHeight) // 给头部设置固定高度
                }
            }
        }
    }
}

struct HeaderView: View {
    var body: some View {
        HStack {
            Spacer()
            Image(systemName: "fanblades.fill")
                .foregroundColor(.mint)
                .font(.system(size: 30))
            Spacer()
        }
        .background(VisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterial)).ignoresSafeArea())
        .border(.blue)
    }
}

struct VisualEffectView: UIViewRepresentable {
    var effect: UIVisualEffect?
    func makeUIView(context: Context) -> UIVisualEffectView {
        UIVisualEffectView()
    }
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = effect
    }
}

方案二：动态获取头部高度（适配可变高度的头部） #

如果你的头部高度可能变化（比如不同设备、不同文字长度），可以用GeometryReader动态获取头部的实际高度，这样更灵活：

import SwiftUI
import UIKit

struct ContentView: View {
    @State private var headerHeight: CGFloat = 0 // 用来存储头部实际高度
    
    var body: some View {
        NavigationView {
            ZStack {
                Color.white
                    .ignoresSafeArea()
                
                ZStack(alignment: .top) {
                    ScrollView {
                        VStack {
                            // 用动态获取的高度作为占位高度
                            Spacer()
                                .frame(height: headerHeight)
                            
                            Circle()
                                .fill(.red)
                                .frame(width: 430, height: 250)
                            Circle()
                                .fill(.blue)
                                .frame(width: 430, height: 250)
                            Circle()
                                .fill(.orange)
                                .frame(width: 430, height: 250)
                            Circle()
                                .fill(.green)
                                .frame(width: 430, height: 250)
                        }
                        .padding()
                        .border(.yellow)
                    }
                    
                    HeaderView()
                        // 用GeometryReader获取头部的高度
                        .background(GeometryReader { proxy in
                            Color.clear
                                .onAppear {
                                    headerHeight = proxy.size.height
                                }
                        })
                }
            }
        }
    }
}

// HeaderView和VisualEffectView代码与方案一一致，此处省略

这样调整之后，你就能看到初始状态下黄色边框刚好挨着蓝色边框，滚动的时候内容滑到头部下面，模糊效果也能正常显示啦——因为ScrollView的整个区域还是在HeaderView的层叠下方，只是内容被占位Spacer推到了头部下面而已。

备注：内容来源于stack exchange，提问作者Mxyb