Progressive Blur Header Swiftui

作者 reason-machines2384a003145a无许可证83 个星标收录于 2026年10月8日更新于 2026年10月8日仓库3个月前更新

Drop-in SwiftUI sticky header component with progressive blur effect matching Apple Music, Photos, and App Store styles.

仅含说明Software Development
AI 生成的概览

提供在 SwiftUI 应用中添加渐进模糊吸顶头部组件的说明。

功能
该技能说明如何安装和使用 ProgressiveBlurHeader SwiftUI 包，其中提供带可变半径模糊和自适应色调的 StickyBlurHeader 组件。内容涵盖组件参数、常见头部模式、架构和故障排查。它产出的是指导说明和代码示例，而不是文件或脚本。
适用场景
适用于构建需要 Apple Music、Photos 或 App Store 风格渐进模糊吸顶头部的 SwiftUI 应用。也适合调整模糊半径、色调强度或淡出延伸范围，以及排查模糊效果或头部高度问题。
运行要求
需要 iOS 16+ 和 Swift 5.9+，并通过 Swift Package Manager 添加 ProgressiveBlurHeader Swift 包。不包含脚本，仅为说明文档。

ProgressiveBlurHeader SwiftUI Skill

Skill by ara.so — Daily 2026 Skills collection.

A drop-in SwiftUI package for sticky headers with progressive (variable-radius) blur — replicating the Apple Music, Photos, and App Store style where content scrolls underneath the header with increasing blur and tint. No clipping, no hard edges.

Installation

Swift Package Manager (Xcode)

File → Add Package Dependencies → paste:

https://github.com/dominikmartn/ProgressiveBlurHeader

Select branch: main

Package.swift

swift
dependencies: [    .package(url: "https://github.com/dominikmartn/ProgressiveBlurHeader", branch: "main"),]

Then add to your target:

swift
.target(    name: "YourApp",    dependencies: ["ProgressiveBlurHeader"])

Requirements: iOS 16+, Swift 5.9+

Core API

StickyBlurHeader

The primary component. Takes two ViewBuilder closures: header and content.

swift
StickyBlurHeader(    maxBlurRadius: Double,     // Default: 5    fadeExtension: CGFloat,    // Default: 64    tintOpacityTop: Double,    // Default: 0.7    tintOpacityMiddle: Double  // Default: 0.5) {    // header view (NO opaque background)} content: {    // scrollable content}

Parameters

ParameterTypeDefaultDescription
maxBlurRadiusDouble5Max blur at the top edge. 5 = subtle, 10 = moderate, 20 = strong
fadeExtensionCGFloat64Points below the header the blur extends
tintOpacityTopDouble0.7Tint behind Dynamic Island / status bar
tintOpacityMiddleDouble0.5Tint at the header's vertical center

The tint color adapts automatically to light/dark mode.

Basic Usage

swift
import SwiftUIimport ProgressiveBlurHeader
struct ContentView: View {    let items = (1...50).map { "Item \($0)" }
    var body: some View {        StickyBlurHeader {            // Header — NO opaque background            HStack {                Button("Back") { }                Spacer()                Text("Library").font(.headline)                Spacer()                Button("Settings") { }            }            .padding()        } content: {            ForEach(items, id: \.self) { item in                Text(item)                    .frame(maxWidth: .infinity, alignment: .leading)                    .padding()                    .background(Color(.secondarySystemBackground))                    .cornerRadius(8)                    .padding(.horizontal)            }        }        .background(Color(.systemBackground))    }}

Common Patterns

Navigation-Style Header with Back Button

swift
import SwiftUIimport ProgressiveBlurHeader
struct AlbumDetailView: View {    let albumTitle: String    @Environment(\.dismiss) private var dismiss
    var body: some View {        StickyBlurHeader(            maxBlurRadius: 8,            fadeExtension: 80,            tintOpacityTop: 0.75,            tintOpacityMiddle: 0.55        ) {            HStack {                Button {                    dismiss()                } label: {                    Image(systemName: "chevron.left")                        .fontWeight(.semibold)                }                Spacer()                Text(albumTitle)                    .font(.headline)                    .lineLimit(1)                Spacer()                Button {                    // action                } label: {                    Image(systemName: "ellipsis.circle")                }            }            .padding(.horizontal)            .padding(.vertical, 12)        } content: {            LazyVStack(spacing: 0) {                ForEach(0..<30) { index in                    SongRow(index: index)                    Divider().padding(.leading)                }            }        }        .background(Color(.systemBackground))    }}

Subtle Blur (Apple Photos Style)

swift
StickyBlurHeader(    maxBlurRadius: 5,    fadeExtension: 56,    tintOpacityTop: 0.6,    tintOpacityMiddle: 0.4) {    HStack {        Text("Photos")            .font(.largeTitle)            .fontWeight(.bold)        Spacer()        Button {            // action        } label: {            Image(systemName: "plus")        }    }    .padding(.horizontal)    .padding(.top, 8)    .padding(.bottom, 12)} content: {    LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))], spacing: 2) {        ForEach(photos) { photo in            PhotoThumbnail(photo: photo)        }    }    .padding(2)}.background(Color(.systemBackground))

Strong Blur (App Store Style)

swift
StickyBlurHeader(    maxBlurRadius: 12,    fadeExtension: 72,    tintOpacityTop: 0.85,    tintOpacityMiddle: 0.6) {    VStack(spacing: 4) {        HStack {            Text("Today")                .font(.largeTitle)                .fontWeight(.bold)            Spacer()            Button {                // profile action            } label: {                Image(systemName: "person.crop.circle.fill")                    .font(.title2)            }        }        HStack {            Text(Date(), style: .date)                .font(.subheadline)                .foregroundStyle(.secondary)                .textCase(.uppercase)            Spacer()        }    }    .padding(.horizontal)    .padding(.vertical, 12)} content: {    LazyVStack(spacing: 16) {        ForEach(featuredApps) { app in            AppCard(app: app)        }    }    .padding()}.background(Color(.systemBackground))

Dynamic Header (Height Changes)

Header height is measured automatically via GeometryReader + PreferenceKey — no manual sizing needed:

swift
StickyBlurHeader {    VStack(alignment: .leading, spacing: 4) {        Text("Title").font(.headline)        if showsSubtitle {            Text("Subtitle").font(.subheadline).foregroundStyle(.secondary)        }    }    .padding()    // Header auto-adjusts when showsSubtitle toggles} content: {    contentList}.background(Color(.systemBackground))

Architecture

The component uses a three-layer ZStack:

LayerComponentPurpose
BackScrollViewContent scrolls freely, never clipped
MiddleVariableBlurView + gradientProgressive blur + adaptive tint
FrontYour header viewFloats above blur, transparent background

The blur engine is VariableBlur by nikstar, which uses the same private API Apple uses internally. It is App Store approved.

Critical Rules

❌ Never add an opaque background to the header

swift
// WRONG — hides the blur effectStickyBlurHeader {    Text("Header")        .background(Color.white) // ❌ Breaks the blur}
// CORRECT — no background on header viewsStickyBlurHeader {    Text("Header") // ✅ Transparent, blur shows through}

❌ Never clip the content hierarchy

swift
// WRONGStickyBlurHeader { ... } content: {    VStack { ... }        .clipped() // ❌ Content becomes invisible under header}
// CORRECT — let content remain visible under blurStickyBlurHeader { ... } content: {    VStack { ... } // ✅ No clipping}

✅ Always set a background on the outer container

swift
StickyBlurHeader { ... } content: { ... }    .background(Color(.systemBackground)) // ✅ Required for tint to work correctly

Troubleshooting

Blur not visible / header looks opaque

  • Remove any .background(...) modifier from your header view
  • Ensure no parent view adds a background before StickyBlurHeader

Content disappears under header

  • Remove any .clipped() from the content or its ancestors
  • Do not wrap content in a ScrollView — StickyBlurHeader provides its own

Header height is wrong

  • Do not set explicit heights on the header; let it size naturally
  • GeometryReader measures the header automatically

Tint color looks wrong in dark mode

  • The tint adapts automatically; ensure .background(Color(.systemBackground)) is set on the outer view so the adaptive color has a reference

Build error: "No such module 'ProgressiveBlurHeader'"

  • Confirm the package is added in Xcode under Package Dependencies
  • Clean build folder: Product → Clean Build Folder (⇧⌘K)
  • Check the target membership of the package in your app target

iOS version compatibility

  • Minimum deployment target must be iOS 16.0 or higher
  • Set in Xcode: Target → General → Minimum Deployments

iOS 26 Comparison

iOS 26 adds .safeAreaBar(edge: .top) — a native one-liner for sticky blur bars. Use ProgressiveBlurHeader when you need:

  • Custom blur radius
  • Adjustable tint intensity
  • Extended fade below the header
  • iOS 16–25 support

来源与署名

来源：reason-machines/trending-skills位于skills/progressive-blur-header-swiftui提交2384a00

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 reason-machines/trending-skills 的技能

Yourvpndead Vpn Detection

reason-machines

介绍一款 Android 应用，用于检测 VPN 客户端并探测本机 SOCKS5 与 Clash API 端口是否泄露。

Security833个月前更新

X Mentor Skill Nuwa

reason-machines

提供 X（Twitter）内容策略指导：推文与长推写作、钩子点评、增长策略与账号诊断。

Marketing & Sales833个月前更新

Wildworld Dataset

reason-machines

介绍 WildWorld 动作条件 ARPG 世界建模数据集，并给出预期的加载、筛选与基准评测代码。

Data & Analytics833个月前更新

Understand Anything Knowledge Graph

reason-machines

为代码库构建可交互的知识图谱，并支持可视化探索、搜索和提问。

Software Development833个月前更新

Webphysics Avbd Engine

reason-machines

指导将实验性 WebGPU AVBD 刚体与软体物理引擎集成到浏览器项目中。

Software Development833个月前更新

Ui Ux Pro Max Skill

reason-machines

根据产品描述生成 UI/UX 设计系统，包括页面结构、风格、配色、字体搭配与检查清单。

Design & Creative833个月前更新

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新