如何解决iOS 16.1中.searchable组件出现后消失的异常问题？

在iOS 16.1搭配Xcode 14.1的环境中，使用.searchable修饰符时存在异常行为：进入包含该组件的视图时，搜索栏会与过渡视图重叠后随即消失。

复现代码 #

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink {
                    Mailbox().navigationTitle("Inkomend")
                } label: { Label("Inkomend", systemImage: "tray") }
                NavigationLink {
                    Mailbox().navigationTitle("Verstuurd")
                } label: { Label("Verstuurd", systemImage: "paperplane") }
                NavigationLink {
                    Mailbox().navigationTitle("Prullenmand")
                } label: { Label("Prullenmand", systemImage: "trash") }
            }
            .navigationTitle("Postbussen")
            .refreshable {}
        }
    }
}

struct Mailbox: View {
    @State private var searchQuery: String = ""
    
    var body: some View {
        List {
            NavigationLink {
                Text("Detail")
            } label: {
                VStack(alignment: .leading) {
                    Text("Apple").font(.headline)
                    Text("Verify your account.")
                    Text("Fijn dat je deze belangrijke stap neemt om je account te verifiëren.").lineLimit(2).foregroundColor(.secondary)
                }
            }
        }
        .searchable(text: $searchQuery)
    }
}

修复方案 #

方案1：延迟加载搜索栏

通过延迟添加.searchable修饰符，避开视图过渡动画的渲染冲突：

struct Mailbox: View {
    @State private var searchQuery: String = ""
    @State private var enableSearch = false
    
    var body: some View {
        List {
            NavigationLink {
                Text("Detail")
            } label: {
                VStack(alignment: .leading) {
                    Text("Apple").font(.headline)
                    Text("Verify your account.")
                    Text("Fijn dat je deze belangrijke stap neemt om je account te verifiëren.").lineLimit(2).foregroundColor(.secondary)
                }
            }
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                enableSearch = true
            }
        }
        .applyIf(enableSearch) { view in
            view.searchable(text: $searchQuery)
        }
    }
}

// 辅助工具：条件修饰符
extension View {
    func applyIf<T: View>(_ condition: Bool, transform: (Self) -> T) -> some View {
        condition ? transform(self) : self
    }
}

方案2：调整.searchable的层级

将搜索栏附加到父视图的NavigationStack上，避免子视图过渡时的层级冲突：

struct ContentView: View {
    @State private var searchQuery: String = ""
    
    var body: some View {
        NavigationStack {
            List {
                NavigationLink {
                    Mailbox().navigationTitle("Inkomend")
                } label: { Label("Inkomend", systemImage: "tray") }
                NavigationLink {
                    Mailbox().navigationTitle("Verstuurd")
                } label: { Label("Verstuurd", systemImage: "paperplane") }
                NavigationLink {
                    Mailbox().navigationTitle("Prullenmand")
                } label: { Label("Prullenmand", systemImage: "trash") }
            }
            .navigationTitle("Postbussen")
            .refreshable {}
            .searchable(text: $searchQuery) // 移到父视图层级
        }
    }
}

struct Mailbox: View {
    var body: some View {
        List {
            NavigationLink {
                Text("Detail")
            } label: {
                VStack(alignment: .leading) {
                    Text("Apple").font(.headline)
                    Text("Verify your account.")
                    Text("Fijn dat je deze belangrijke stap neemt om je account te verifiëren.").lineLimit(2).foregroundColor(.secondary)
                }
            }
        }
    }
}

方案3：升级系统版本

该问题是iOS 16.1的已知bug，Apple在iOS 16.2及后续版本中已修复此问题。升级设备系统至iOS 16.2+，或使用Xcode 14.2+进行开发，可彻底解决该异常。

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