You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何移除NavigationView默认透明头部及滚动顶部模糊效果?

解决ScrollView滚动时顶部模糊填充问题

这个滚动时顶部出现的带颜色模糊效果,是SwiftUI默认的滚动视图与导航栏联动交互,要移除它可以用以下两种方案:

方案一:iOS 16+ 专属(简洁高效)

给ScrollView添加.scrollContentBackground(.hidden)修饰符,直接隐藏滚动内容的背景效果:

struct DetailView: View {
    var body: some View {
        VStack {
            ScrollView(.vertical, showsIndicators: false) {
                Circle()
                    .fill(.red)
                
                Circle()
                    .fill(.blue)
                
                Circle()
                    .fill(.yellow)
                
                Circle()
                    .fill(.green)
            }
            .scrollContentBackground(.hidden) // 移除滚动背景效果
        }
    }
}

方案二:兼容iOS 15及以下

通过隐藏导航栏背景并设置标题显示模式,来消除联动效果:

struct DetailView: View {
    var body: some View {
        VStack {
            ScrollView(.vertical, showsIndicators: false) {
                Circle()
                    .fill(.red)
                
                Circle()
                    .fill(.blue)
                
                Circle()
                    .fill(.yellow)
                
                Circle()
                    .fill(.green)
            }
        }
        .navigationBarTitleDisplayMode(.inline)
        .toolbarBackground(.hidden, for: .navigationBar) // 隐藏导航栏背景
    }
}

内容的提问来源于stack exchange,提问作者Schwifty

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.09 12:32:13