如何在Swift中实现App Store搜索标签页的头部UI效果？

原生/取巧实现尝试（iOS 16+） #

要让标题、头像固定不折叠，核心是禁用系统导航栏的自动折叠行为，同时自定义导航栏内容，再结合searchable的固定展示模式：

1. 配置导航栏外观，消除滚动时的折叠变化：

init() {
    let navAppearance = UINavigationBarAppearance()
    navAppearance.configureWithOpaqueBackground()
    // 匹配App Store标题样式
    navAppearance.titleTextAttributes = [
        .font: UIFont.systemFont(ofSize: 28, weight: .bold),
        .foregroundColor: UIColor.label
    ]
    // 让滚动边缘外观与标准外观一致，避免折叠
    UINavigationBar.appearance().standardAppearance = navAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
}

2. 构建视图结构，自定义导航栏内容并固定搜索栏：

@State private var searchText = ""

var body: some View {
    NavigationStack {
        ScrollView {
            // 列表内容示例
            LazyVStack(spacing: 16) {
                ForEach(0..<20) { index in
                    Text("内容项 \(index)")
                        .frame(maxWidth: .infinity, minHeight: 60)
                        .background(Color.secondary.opacity(0.1))
                        .cornerRadius(12)
                        .padding(.horizontal)
                }
            }
            .padding(.top)
        }
        .toolbar {
            // 自定义标题，替代系统navigationTitle
            ToolbarItem(placement: .principal) {
                Text("搜索")
                    .font(.system(size: 28, weight: .bold))
            }
            // 右上角头像
            ToolbarItem(placement: .trailing) {
                Image(systemName: "person.circle")
                    .resizable()
                    .frame(width: 34, height: 34)
            }
        }
        .toolbarTitleDisplayMode(.never) // 禁用默认标题逻辑，避免折叠
        .searchable(
            text: $searchText,
            placement: .navigationBarDrawer(displayMode: .always)
        ) // 让搜索栏始终展开在导航栏下方
    }
}

这种方案利用系统组件自动适配样式，但不同iOS版本的searchable布局可能有细微差异，且无法完全自定义搜索栏样式。

自定义实现方案 #

如果需要100%还原App Store的细节（包括搜索栏样式、滚动渐变效果等），自定义实现是更可靠的选择：

1. 封装固定头部视图：

struct SearchHeaderView: View {
    @Binding var searchText: String
    
    var body: some View {
        VStack(spacing: 16) {
            HStack {
                Text("搜索")
                    .font(.system(size: 28, weight: .bold))
                Spacer()
                Image(systemName: "person.circle")
                    .resizable()
                    .frame(width: 34, height: 34)
            }
            // 自定义搜索栏
            TextField("搜索App、游戏、故事等", text: $searchText)
                .padding(.horizontal, 16)
                .padding(.vertical, 10)
                .background(Color.secondary.opacity(0.1))
                .cornerRadius(12)
        }
        .padding(.horizontal)
        .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0)
        .background(Color(.systemBackground))
    }
}

2. 主视图中固定头部，下方放置滚动内容：

@State private var searchText = ""

var body: some View {
    VStack(spacing: 0) {
        SearchHeaderView(searchText: $searchText)
        
        ScrollView {
            // 列表内容示例
            LazyVStack(spacing: 16) {
                ForEach(0..<20) { index in
                    Text("内容项 \(index)")
                        .frame(maxWidth: .infinity, minHeight: 60)
                        .background(Color.secondary.opacity(0.1))
                        .cornerRadius(12)
                        .padding(.horizontal)
                }
            }
            .padding(.top)
        }
    }
    .edgesIgnoringSafeArea(.bottom)
}

这种方案完全可控，可自由调整搜索栏样式、头部渐变效果，甚至添加自定义滚动动画，不受系统组件限制。

方案选择建议 #

• 若仅需要接近App Store的效果，且希望快速适配系统样式，可尝试原生方案；
• 若要求完全一致的视觉和交互细节，自定义实现是更佳选择，尤其是需要自定义搜索栏样式或特殊动画时。

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