SwiftUI：NavigationStack根视图中Refreshable与Searchable重叠问题

在SwiftUI应用中，当同时给视图添加searchable和refreshable修饰符时，若该视图作为NavigationStack的根视图，会出现搜索栏（SearchBar）与下拉刷新进度视图（ProgressView）重叠的情况；但通过NavigationLink跳转到该视图时，布局显示正常。

问题对比图：

• 根视图重叠效果：
• 非根视图正常效果：

最小复现代码：

import SwiftUI

@main
struct RefreshableSearchableISsueApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationStack {
                ContentView()
            }
        }
    }
}
struct ContentView: View {
    @State var items = ["1", "2", "3", "4", "5"]
    @State var searchText = ""
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                NavigationLink(destination: ContentView()) {
                    HStack {
                        Text(item)
                        Spacer()
                    }
                }
            }
        }
        .searchable(text: $searchText)
        .refreshable { try? await Task.sleep(for: .seconds(1)) }
    }
}

问题原因 #

这是SwiftUI的布局逻辑bug：当根视图未设置导航标题时，searchable修饰符生成的搜索栏会与refreshable的进度视图在布局上产生冲突；而作为详情页时，导航栏已有默认的布局空间，因此不会出现重叠。

解决方案 #

方案1：添加导航标题

给根视图添加navigationTitle修饰符，让导航栏拥有正确的布局空间，从而避免两者重叠。可以配合navigationBarTitleDisplayMode调整标题显示样式：

struct ContentView: View {
    @State var items = ["1", "2", "3", "4", "5"]
    @State var searchText = ""
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                NavigationLink(destination: ContentView()) {
                    HStack {
                        Text(item)
                        Spacer()
                    }
                }
            }
        }
        .searchable(text: $searchText)
        .refreshable { try? await Task.sleep(for: .seconds(1)) }
        .navigationTitle("项目列表") // 添加导航标题
        .navigationBarTitleDisplayMode(.inline) // 可选：设置标题为行内模式
    }
}

方案2：将searchable移至NavigationStack层级

如果不需要显示导航标题，可以将searchable修饰符直接应用到NavigationStack上，让搜索栏属于导航栈的全局布局，避免和根视图的刷新视图冲突：

@main
struct RefreshableSearchableISsueApp: App {
    @State private var searchText = "" // 全局管理搜索文本
    var body: some Scene {
        WindowGroup {
            NavigationStack {
                ContentView(searchText: $searchText)
            }
            .searchable(text: $searchText) // 在NavigationStack上应用searchable
        }
    }
}

struct ContentView: View {
    @State var items = ["1", "2", "3", "4", "5"]
    @Binding var searchText: String // 通过Binding接收搜索文本
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                NavigationLink(destination: ContentView(searchText: $searchText)) {
                    HStack {
                        Text(item)
                        Spacer()
                    }
                }
            }
        }
        .refreshable { try? await Task.sleep(for: .seconds(1)) }
    }
}

验证效果 #

两种方案都能解决根视图中搜索栏与刷新进度视图的重叠问题，可根据是否需要显示导航标题选择对应方案。

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