SwiftUI实现点击搜索栏弹出独立视图的方法，适配Twitter类交互效果

你原本采用 NavigationLink 跳转的方案不符合需求，原因有两点：

• NavigationLink 默认的 push 转场为右侧滑入，和 Twitter 搜索栏从顶部展开的动效不匹配
• NavigationView 自带的导航栏返回控件不符合 Twitter 搜索页的交互逻辑

正确实现思路 #

不要使用导航栈跳转，改用自定义模态弹层实现，核心步骤如下：

1. 主视图定义状态变量控制搜索页的显隐：@State private var showSearchView = false
2. 主页面的搜索栏设置为可点击的占位控件（禁用输入仅响应点击事件），点击后触发 showSearchView = true
3. 采用 fullScreenCover 修饰符弹出独立搜索视图，自定义转场动效为顶部移入+透明度变化，完全匹配目标交互
4. 搜索视图内部自行实现取消按钮、搜索输入框和结果列表，无需嵌套 NavigationView，避免出现默认返回控件

核心代码示例 #

import SwiftUI

// 主视图
struct HomeView: View {
    @State private var showSearch = false
    
    var body: some View {
        NavigationStack {
            List {
                // 主页面内容列表
            }
            .navigationTitle("首页")
            .safeAreaInset(edge: .top) {
                // 搜索栏占位控件
                Button {
                    withAnimation(.easeInOut(duration: 0.2)) {
                        showSearch = true
                    }
                } label: {
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(.secondary)
                        Text("搜索内容")
                            .foregroundColor(.secondary)
                        Spacer()
                    }
                    .padding(.horizontal, 12)
                    .frame(height: 36)
                    .background(.ultraThinMaterial)
                    .cornerRadius(10)
                    .padding(.horizontal, 16)
                    .padding(.bottom, 8)
                }
            }
            .fullScreenCover(isPresented: $showSearch) {
                SearchView(isPresented: $showSearch)
            }
        }
    }
}

// 独立搜索视图
struct SearchView: View {
    @Binding var isPresented: Bool
    @State private var searchText = ""
    @FocusState private var inputFocused: Bool
    
    var body: some View {
        VStack(spacing: 12) {
            // 搜索栏+取消按钮区域
            HStack(spacing: 12) {
                HStack {
                    Image(systemName: "magnifyingglass")
                        .foregroundColor(.secondary)
                    TextField("搜索", text: $searchText)
                        .focused($inputFocused)
                }
                .padding(.horizontal, 12)
                .frame(height: 36)
                .background(.ultraThinMaterial)
                .cornerRadius(10)
                
                Button("取消") {
                    withAnimation(.easeInOut(duration: 0.2)) {
                        isPresented = false
                    }
                }
            }
            .padding(.horizontal, 16)
            .padding(.top, 12)
            
            // 搜索建议/结果列表
            List {
                // 搜索结果渲染逻辑
            }
            .listStyle(.plain)
        }
        .onAppear {
            // 弹出后自动唤起键盘
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                inputFocused = true
            }
        }
    }
}

自定义调整说明 #

如果你需要保留底部 TabBar 不被搜索页覆盖，可以把 fullScreenCover 替换为 ZStack 手动叠加搜索视图，通过控制 offset 和 opacity 属性实现相同的动效，逻辑完全一致。

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