SwiftUI同视图混用.refreshable()与.searchable()引发刷新卡顿

问题现象 #

在同一个SwiftUI视图中同时使用.refreshable()与.searchable()修饰符时，下拉刷新会出现视图抖动卡顿；移除.searchable()后，刷新动画恢复正常。

原因分析 #

这是由于.searchable()被附加在NavigationStack外层，下拉刷新的动作会触发整个导航栈相关视图的重新计算与重绘，额外的视图更新开销导致了卡顿。

解决方案 #

将.searchable()修饰符移动到NavigationStack内部，缩小视图更新的范围，避免不必要的层级重绘。

修改后的代码示例 #

import SwiftUI

struct TestView: View {
    
    @State private var text: String = ""
    let listings: [String] = ["Hello world", "Hello StackOverflow"]
    
    var body: some View {
        NavigationStack {
            VStack {
                List {
                    ForEach(listings, id: \.self) { item in
                        Text(item)
                    }
                }
                .refreshable {}
                .navigationTitle("Listings")
            }
            .searchable(text: $text) // 将searchable移到NavigationStack内部
        }
        .task {}
    }
}

#Preview {
    TestView()
}

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