SwiftUI中为带ScrollView的内容添加模糊导致布局偏移问题求助

问题现象 #

给包含ScrollView的页面添加blur模糊效果后，ScrollView顶部会出现意外内边距，破坏布局。具体表现为：激活遮罩层后点击状态栏回到顶部，再关闭遮罩层，ScrollView会向下偏移约20px；若不添加blur效果则无此问题。点击状态栏回到顶部是最稳定的复现路径，偶尔点击遮罩层也会触发该问题。从视图层级调试可见元素渲染位置偏移约20px。

复现代码 #

import SwiftUI

struct ContentView: View {
    @State private var isActive = false

    var body: some View {
        ZStack {
            ScrollView {
                VStack {
                    Rectangle()
                        .fill(.red)
                        .frame(height: 200)
                    Rectangle()
                        .fill(.orange)
                        .frame(height: 200)
                    Rectangle()
                        .fill(.blue)
                        .frame(height: 200)
                    Rectangle()
                        .fill(.purple)
                        .frame(height: 200)
                    Rectangle()
                        .fill(.yellow)
                        .frame(height: 200)
                    Button("Click me") {
                        isActive = true
                    }
                }
            }
            .blur(radius: isActive ? 10 : 0)
            
            if isActive {
                Color.clear
                    .background(.black.opacity(0.1))
                    .contentShape(Rectangle())
                    .onTapGesture {
                        isActive = false
                    }
                    .border(.orange)
            }
        }
    }
}

#Preview {
    ContentView()
}

复现步骤 #

• 运行应用，向下滚动后点击按钮激活遮罩层
• 点击状态栏回到ScrollView顶部
• 点击遮罩层关闭，此时ScrollView会向下偏移约20px

环境信息 #

该问题在iOS 17.5、iOS 18 Beta（搭配Xcode 15.4）环境中均已观测到。

问题分析 #

这是SwiftUI的布局Bug，你的实现逻辑本身没有错误。问题出在动态切换blur修饰符时，SwiftUI对ScrollView的安全区域计算或滚动偏移处理出现异常，导致布局偏移。

解决方案 #

方案1：调整Blur的作用对象 #

将blur修饰符从ScrollView移到内部的内容容器（如VStack）上，避免直接修改ScrollView的渲染状态：

ScrollView {
    VStack {
        // 原有内容
    }
    .blur(radius: isActive ? 10 : 0)
}

方案2：强制重置ScrollView偏移 #

使用ScrollViewReader在关闭遮罩时，手动将ScrollView滚动到顶部，修正偏移：

struct ContentView: View {
    @State private var isActive = false
    private let scrollAnchorID = "scrollTop"

    var body: some View {
        ZStack {
            ScrollViewReader { proxy in
                ScrollView {
                    VStack {
                        Rectangle()
                            .fill(.red)
                            .frame(height: 200)
                        Rectangle()
                            .fill(.orange)
                            .frame(height: 200)
                        Rectangle()
                            .fill(.blue)
                            .frame(height: 200)
                        Rectangle()
                            .fill(.purple)
                            .frame(height: 200)
                        Rectangle()
                            .fill(.yellow)
                            .frame(height: 200)
                        Button("Click me") {
                            isActive = true
                        }
                    }
                    .id(scrollAnchorID)
                }
                .blur(radius: isActive ? 10 : 0)
                .onChange(of: isActive) { newValue in
                    if !newValue {
                        proxy.scrollTo(scrollAnchorID, anchor: .top)
                    }
                }
            }
            
            if isActive {
                Color.clear
                    .background(.black.opacity(0.1))
                    .contentShape(Rectangle())
                    .onTapGesture {
                        isActive = false
                    }
                    .border(.orange)
            }
        }
    }
}

方案3：替换为UIScrollView #

如果上述方案无效，可以通过UIViewRepresentable封装原生UIScrollView，绕过SwiftUI的布局Bug。

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