SwiftUI中使用NavigationStack导航时搜索栏短暂显示的问题

你遇到的这个视觉异常不是NavigationStack使用方式错误，而是SwiftUI中导航动画与搜索栏布局初始化冲突导致的已知bug——导航到带.searchable修饰符的视图时，搜索栏会短暂出现在父视图的导航区域，随后才归位到目标视图的正确位置。

修复方案 #

这里提供几种实用的规避方法：

方法1：延迟启用搜索栏

通过延迟激活搜索栏的显示，避开导航动画的执行周期：

struct ListView1: View {
    @State private var searchText = ""
    @State private var isSearchEnabled = false
    
    var body: some View {
        List {
            ForEach(1..<20) { i in
                Text("List \(i)")
            }
        }
        .searchable(text: $searchText, isPresented: $isSearchEnabled)
        .navigationTitle("List View 1")
        .onAppear {
            // 延迟0.3秒启用，适配导航动画时长
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                isSearchEnabled = true
            }
        }
    }
}

方法2：禁用搜索栏初始动画

通过修改事务动画，避免搜索栏在导航过程中触发布局动画：

struct ListView1: View {
    @State private var searchText = ""
    
    var body: some View {
        List {
            ForEach(1..<20) { i in
                Text("List \(i)")
            }
        }
        .searchable(text: $searchText)
        .navigationTitle("List View 1")
        .transaction { transaction in
            // 过滤掉默认的导航动画，避免搜索栏布局冲突
            if transaction.animation == .default {
                transaction.animation = nil
            }
        }
    }
}

方法3：调整.searchable的修饰层级

将.searchable修饰符从List移到视图的外层容器（如VStack），减少与列表布局的动画冲突：

struct ListView1: View {
    @State private var searchText = ""
    
    var body: some View {
        VStack(spacing: 0) {
            List {
                ForEach(1..<20) { i in
                    Text("List \(i)")
                }
            }
        }
        .searchable(text: $searchText)
        .navigationTitle("List View 1")
    }
}

这些方法都能有效解决搜索栏短暂闪现的问题，你可以根据自己的需求选择合适的方案。

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