如何让SwiftUI的.searchable搜索框聚焦时固定在顶部不移动

需求：在无导航栏标题的情况下，让使用.searchable修饰符的搜索框固定在顶部，聚焦时仅显示右侧取消按钮，搜索框位置保持不动，阻止默认的上移动画。

已尝试无效的方法：

• 使用.navigationBarHidden(true)：直接移除整个搜索栏
• 在VStack中添加Spacer：未聚焦时无法将搜索栏推到顶部
• 添加.ignoreSafeArea()、用GeometryReader放大屏幕高度：无效果

原代码：

struct SearchBarSM: View {
    
    @State var searchtxt:String = ""
    
    var body: some View {
        GeometryReader { geo in
            NavigationStack {
                ZStack {
                    VStack {
                        Text("Hello stackoverflow")
                    }
                }
                .navigationBarTitle("")
                .searchable(text: $searchtxt, prompt: "Search") {
                }
                .preferredColorScheme(.dark)
            }
        }
    }
}

未聚焦状态：

聚焦状态：

可以看到，搜索框在聚焦时会向上移动。

由于默认.searchable与NavigationStack的集成行为是硬编码的上移动画，我们可以通过自定义搜索栏来完全控制其位置和交互：

struct SearchBarSM: View {
    @State private var searchtxt = ""
    @State private var isSearching = false
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 0) {
                // 自定义固定顶部的搜索栏
                HStack {
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(.gray)
                        TextField("Search", text: $searchtxt)
                            .onTapGesture {
                                withAnimation(nil) { // 禁用聚焦动画
                                    isSearching = true
                                }
                            }
                        if !searchtxt.isEmpty {
                            Button(action: {
                                searchtxt = ""
                            }) {
                                Image(systemName: "xmark.circle.fill")
                                    .foregroundColor(.gray)
                            }
                        }
                    }
                    .padding(.vertical, 8)
                    .padding(.horizontal, 12)
                    .background(Color(.systemGray5))
                    .cornerRadius(10)
                    
                    if isSearching {
                        Button("Cancel") {
                            withAnimation(nil) {
                                searchtxt = ""
                                isSearching = false
                                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
                            }
                        }
                        .foregroundColor(.blue)
                    }
                }
                .padding(.horizontal)
                .padding(.top, 8) // 适配安全区顶部
                
                // 主内容区域
                ScrollView {
                    Text("Hello stackoverflow")
                        .padding()
                }
            }
            .navigationBarTitle("")
            .navigationBarHidden(true) // 隐藏默认导航栏
            .preferredColorScheme(.dark)
        }
    }
}

说明： #

1. 自定义搜索栏布局：用HStack实现搜索框+取消按钮的组合，固定在VStack的顶部位置，不受聚焦状态影响。
2. 禁用动画：通过withAnimation(nil)阻止聚焦/取消时的动画效果，确保搜索框位置不变。
3. 手动管理键盘：点击取消按钮时调用resignFirstResponder收起键盘，同时重置搜索状态。
4. 样式匹配：通过background和cornerRadius模拟默认.searchable的样式，保持视觉一致性。

这个方案完全脱离了默认.searchable与导航栏的绑定逻辑，彻底解决了搜索框上移的问题，同时保留了搜索功能和取消按钮的交互。

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