SwiftUI中searchable引发Push动画异常的问题解决

问题描述 #

我编写了如下SwiftUI代码：

enum ContentViewRouter {
    case details
}

struct ContentView: View {
    
    var body: some View {
        
        NavigationStack {
            ZStack {
                NavigationLink(value: ContentViewRouter.details) {
                    Text("Push")
                }
            }
            .navigationDestination(for: ContentViewRouter.self) { destination in
                switch destination {
                case .details:
                    DetailsView()
                }
            }
            .navigationTitle("TEST")
        }
    }
}

struct DetailsView: View {
    
    @State var query = ""
    
    var body: some View {
        
        Form {
            Section("TEST") {
                Text("DETAILS")
            }
        }
        .searchable(text: $query)
        .navigationTitle("DETAILS")
    }
}

通过NavigationStack跳转到DetailsView时，出现异常动画：搜索栏短暂显示后消失，过渡过程有明显的布局错位（glitch），无法实现平滑的Push过渡。请问这是系统Bug还是实现方式有误？如何修复？

问题原因 #

这是SwiftUI中searchable修饰符与NavigationStack过渡动画的已知布局冲突，属于系统层面的小Bug。根源是过渡动画期间，searchable对导航栏的布局调整与视图渲染不同步，导致短暂的视觉错位。

修复方案 #

方案1：延迟启用搜索栏 #

等过渡动画完成后再加载搜索栏，避免动画期间的布局冲突：

struct DetailsView: View {
    
    @State var query = ""
    @State private var enableSearch = false
    
    var body: some View {
        
        Form {
            Section("TEST") {
                Text("DETAILS")
            }
        }
        .searchable(text: $query, isPresented: $enableSearch)
        .navigationTitle("DETAILS")
        .onAppear {
            // 延迟0.3秒匹配过渡动画时长
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                enableSearch = true
            }
        }
    }
}

方案2：将搜索栏移至导航栈根视图 #

把searchable放在父视图的NavigationStack上，共享搜索状态，避免子视图过渡时的渲染冲突：

struct ContentView: View {
    @State private var searchQuery = ""
    
    var body: some View {
        NavigationStack {
            ZStack {
                NavigationLink(value: ContentViewRouter.details) {
                    Text("Push")
                }
            }
            .navigationDestination(for: ContentViewRouter.self) { destination in
                DetailsView(searchQuery: $searchQuery)
            }
            .navigationTitle("TEST")
            .searchable(text: $searchQuery)
        }
    }
}

struct DetailsView: View {
    @Binding var searchQuery: String
    
    var body: some View {
        Form {
            Section("TEST") {
                Text("DETAILS")
                if !searchQuery.isEmpty {
                    Text("当前搜索：\(searchQuery)")
                }
            }
        }
        .navigationTitle("DETAILS")
    }
}

方案3：固定导航栏标题显示模式 #

设置标题为inline模式，限制导航栏布局变化范围，减少冲突概率：

struct DetailsView: View {
    
    @State var query = ""
    
    var body: some View {
        
        Form {
            Section("TEST") {
                Text("DETAILS")
            }
        }
        .searchable(text: $query)
        .navigationTitle("DETAILS")
        .navigationBarTitleDisplayMode(.inline)
    }
}

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