SwiftUI中NavigationStack内切换视图后searchable意外显示的问题

嘿，我太懂这种莫名其妙的UI bug了！之前做类似的列表/网格切换功能时，也被searchable的这个破问题折腾过好一会儿。结合你描述的场景——初始列表视图、切网格时搜索栏都乖乖隐藏，但切回列表就突然蹦出来，大概率是SwiftUI的视图身份识别和searchable的状态绑定逻辑搞的鬼。

咱们来拆解下原因：其实SwiftUI会把if/else切换的List和LazyVGrid当成两个完全独立的视图实例。当你切回列表时，这个新重建的List实例上的searchable修饰符，会因为视图生命周期的变化，意外触发了显示状态，尤其是在NavigationStack的环境下，导航栏的状态很容易和视图重建产生冲突。

给你几个亲测有效的解决办法：

方法一：手动绑定searchable的显示状态（最推荐） #

别依赖系统默认的搜索栏显示逻辑，自己用一个@State变量来控制，每次切换视图时强制把搜索栏藏起来。代码大概是这样：

// 先定义你的布局枚举
enum LayoutStyle {
    case list, grid
}

struct BookmarksView: View {
    @State private var searchText = ""
    @State private var isSearchActive = false // 手动控制搜索栏显示
    @State private var layoutStyle: LayoutStyle = .list
    // 假设你的书签数据
    private let bookmarks = [Bookmark(name: "书签1"), Bookmark(name: "书签2")]
    
    private var filteredBookmarks: [Bookmark] {
        if searchText.isEmpty {
            return bookmarks
        } else {
            return bookmarks.filter { $0.name.localizedCaseInsensitiveContains(searchText) }
        }
    }
    
    var body: some View {
        NavigationStack {
            Group {
                if layoutStyle == .list {
                    List(filteredBookmarks) { bookmark in
                        Text(bookmark.name)
                    }
                } else {
                    LazyVGrid(columns: [GridItem(.adaptive(minimum: 150))]) {
                        ForEach(filteredBookmarks) { bookmark in
                            Text(bookmark.name)
                                .padding()
                                .background(Color.gray.opacity(0.2))
                                .cornerRadius(8)
                        }
                    }
                }
            }
            .searchable(text: $searchText, isPresented: $isSearchActive)
            .navigationTitle("我的书签")
            .toolbar {
                Button("切换布局") {
                    // 切换布局
                    layoutStyle = layoutStyle == .list ? .grid : .list
                    // 强制隐藏搜索栏
                    isSearchActive = false
                }
            }
        }
    }
}

// 书签模型
struct Bookmark: Identifiable {
    let id = UUID()
    let name: String
}

核心就是searchable的isPresented参数，把它和我们自己的变量绑定，每次切换布局时主动把这个变量设为false，不管视图怎么重建，搜索栏都会乖乖保持隐藏。

方法二：把布局内容封装成子视图 #

把列表和网格的内容都放到一个单独的子视图里，让父视图的searchable修饰符绑定到同一个子视图实例上，避免因为if/else切换导致的视图重建。代码示例：

// 封装布局内容的子视图
struct BookmarkContentView: View {
    let bookmarks: [Bookmark]
    let layoutStyle: LayoutStyle
    
    var body: some View {
        if layoutStyle == .list {
            List(bookmarks) { bookmark in
                Text(bookmark.name)
            }
        } else {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 150))]) {
                ForEach(bookmarks) { bookmark in
                    Text(bookmark.name)
                        .padding()
                        .background(Color.gray.opacity(0.2))
                        .cornerRadius(8)
                }
            }
        }
    }
}

// 主视图
struct BookmarksView: View {
    @State private var searchText = ""
    @State private var isSearchActive = false
    @State private var layoutStyle: LayoutStyle = .list
    private let bookmarks = [Bookmark(name: "书签1"), Bookmark(name: "书签2")]
    
    private var filteredBookmarks: [Bookmark] {
        searchText.isEmpty ? bookmarks : bookmarks.filter { $0.name.localizedCaseInsensitiveContains(searchText) }
    }
    
    var body: some View {
        NavigationStack {
            BookmarkContentView(bookmarks: filteredBookmarks, layoutStyle: layoutStyle)
                .searchable(text: $searchText, isPresented: $isSearchActive)
                .navigationTitle("我的书签")
                .toolbar {
                    Button("切换布局") {
                        layoutStyle = layoutStyle == .list ? .grid : .list
                        isSearchActive = false
                    }
                }
        }
    }
}

这样做的好处是，父视图上的searchable不会因为子视图内部的布局切换而触发状态异常，因为子视图的身份是稳定的，SwiftUI只会更新它的布局内容，而不是销毁重建整个视图。

额外小提示 #

如果还是有问题，检查下你有没有给List或NavigationStack加一些奇怪的导航栏修饰符，比如.navigationBarTitleDisplayMode(.inline)之类的，有时候这些也会和searchable的状态产生冲突，不妨暂时去掉试试，排查下问题所在。

备注：内容来源于stack exchange，提问作者alexbumbu